飞道的博客

反反爬虫 大众点评-图片文字破解 2020年6月2日

368人阅读  评论(0)

界面元素审查

不得不说,大众点评的反爬虫措施还算可以,但是为了网页加载的运行效率,反爬措施无法做得非常深入,给反反爬虫给了非常大的机会。

随便找一个大众点评的评论来进行分析,发现评论的是子字和图片(svgmtsi标签)混合起来的,而且最骚的是,你每次刷新,它都会重新将某些文字换成图片。

第一次刷新

第二次刷新

行不通的解决方案

Q:所以,难道解决方案是通过不停的刷新来获取文字最后进行拼接吗(并不是:( )
A:一直刷新显得非常玄学,而且程序还不好判断文字是否补全

Q:用OCR把图片一个个转换成文字?
A:1.OCR贵。2.OCR贵。3.OCR贵。4.他效率不高啊(网好很高,高了也贵)

寻找正确的解决方案

答案就在前端中

根据文字会随机变成图片的规则,我想到了应该存在字库这样的东西。(以前是字体来进行反反爬虫的)
那么这个字库在哪呢?

从来都没见过的新标签

这是啥?
我在百度了一会只找到了svg没找到这个标签。
此时一旁的CSS样式表带我找到了答案~~

没错,这个标签应该是导入进来的,并且从这个CSS中可以看出,有一个CSS的样式表并且这个样式表里面有着所有class="pld***"的某个属性设置,前面这些标签的class值可以推断出这些图片的class全是以pld开头的,并且这个CSS还设置了widthheight还有background-image,从而将文字变成图片。
这个CSS非常关键

为了弄清楚这个CSS到底是哪来的,就得从源代码挖掘

层层递进–抽丝剥茧

源代码挖掘


打开源代码,一眼就可以看得两个导入的样式表,其中有个样式表带有SVG的字样,很明显这就是我们要找的样式表。

样式表挖掘


打开样式表,非常杂乱,但是我看到了我想要的东西----很多开头为pld的class
整理一下

这个坐标值很明显就是文字的坐标值,那就是有个文字库,文字库变成了图片,然后根据坐标值进行裁剪。
并且在这个样式表中我发现了之前的CSS代码

svgmtsi[class^="pld"] {
	width: 14px;
	height: 24px;
	margin-top: -14px;
	background-image: url(//s3plus.meituan.net/v1/mss_0a06a471f9514fc79c981b5466f56b91/svgtextcss/3227a6ecbf70945a0bb6adfd922e6ea1.svg);
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
}

并且给出了图像网址,打开它,整个字库就出现在了面前

根据之前的分析,基本上可以确定整个流程图

验证猜想

首先我写了这么一段HTML代码看能不能显示出图片文字

pld27n在原网页上就是显示为

的确,显示了字,验证了我的猜想
那么这个坐标值是不是真的可以截出这个字呢?

字的剪切

.pld27n {
	background: -238.0px -2241.0px;
}

我找到了这个字的坐标值,并且在这个字库的源代码里面也发现了坐标值

<text x="0" y="2158">蹲案看杀广哄吞伴疮背廉访扣赚现径们厉惭士积想熔默驼饲杂易仁壶痛弱馋拿氧拐遍抄遗爆嫩拌</text>
<text x="0" y="2191">歇题举耐惠熟旁与剑都素字递锯泉腔害始逃跑潮店舅零介洞匹虹萌祸电板桶罩盐鼻阳然职捎闲茎</text>
<text x="0" y="2225">名型交穴喇排鹅蜓灿仙奸暴罐需漆换睁谜储宋伍粪角稼带晓还慕球习栏叔瑞周贡迷刘撒召闷搂烛</text>
<text x="0" y="2264">甚驻惊汇焰户舰互罗滩定拒财存之风屿重梦浙羽填共育次勿惰寻臂旨锡度歌配饱丧画埋外鸭骆磨</text>
<text x="0" y="2298">靠朴截竿脂汪匀锤聪串策砍添蝶飞父凶择迅亩翼拥耕巷该筋施缘键丘触过殖澡兽女蛇蛙粮壤炼怕</text>
<text x="0" y="2343">彼头切装蒜摧按绘鹿升停扑贴生纤观尤皮醉围淡</text>

字出现在了<text x="0" y="2264">这个标签里面,并且为第18字
前面又可知,每个图片的宽为14,长为24
分析这几个数字,我得出了这样的换算公式
X坐标:14(宽度)(18(位置)-1(起始点在字前面))==1417=238px
Y坐标:2264(所在行坐标)-24(高)+1(加1像素就可以等于)==2241px

之后我也试了其他的字,也是这个规律
CSS位置:
http://s3plus.meituan.net/v1/mss_0a06a471f9514fc79c981b5466f56b91/svgtextcss/04cc0a6880e00deb1d952ce411661c99.css
字库位置:
http://s3plus.meituan.net/v1/mss_0a06a471f9514fc79c981b5466f56b91/svgtextcss/3227a6ecbf70945a0bb6adfd922e6ea1.svg

到此为止,字库破解已经完成,可以直接用程序将文字和标签一一对应,生成一个字典方便爬虫使用


转载:https://blog.csdn.net/mahuatengmmp/article/details/106502277
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场