SVG反爬虫不同于字体反爬虫,它巧妙的利用css 与 svg的关系,将字符映射到网页中,看起来虽然正常,但是却抓取不到有效内容。本文带你深入浅出,破了SVG反爬虫的套路,学会之后,可应用于某点评网。
为了防止面对监狱编程,我在本地自己做了一个网页用于爬虫测试。任务是爬取票据中的产品价格信息,按照往常一样审查元素定位目标节点,但是发现事情并不简单。
¥符号后面并没有我们想要的价格信息,而是四个d标签取而代之。随便选中一个7,发现对应的是属性class=lhtqsc的d标签。
有两段描述这个标签的语句,第一段比较常规,但是其中的
就有点奇怪,而第二段,描述的是background,它的值是两个 大小值,单位px。
貌似是没什么规律的数字
查看该页面网页源代码,发现是张这样的:
SVG是一种基于xml用于描述矢量图的图形格式,由于矢量图放大或缩写都不会影响图形的质量,所以被较多的应用在web站点与App中,常见的存在形式是图标。
为了方便,我们可以把要写的svg,写到html文件中,新建一个svg.html键入如下内容:
浏览器打开如下:
其中:
很关键,这一行用text标签定义了一段文本,fill是文本颜色属性,为红色,并且指定了文本的坐标。该坐标的规则是:
增加一行:
这行代码指定了前九个字符的位置,且指定了文本的颜色,y的值也增大到100,浏览器打开如下:
再次增加一行:
上图可以看到,在不改变文本顺序的情况下通过改变x中的值,让第一个字符I和第四个字符o交换了位置。
现在我们尝试把css和svg联系起来,更加深入的理解,方便我们做下一步抓取工作:在svg中,X轴正方向为从左到右,y轴的正方向是从上到下;在css中,X轴负数向右,Y轴是负数向下。一图胜千言:
所以,CSS与SVG刚好相反。新建一个zhiliao.svg并键入:
我们在style中 定义了字符的风格,大小(14px),以及颜色(#666)。定义了每个字符所在的位置。
现在我们对第一个字符h进行定位,
X轴计算法则:字符大小 / 2 + 字符的x轴起点位置参数
Y轴计算法则:(y 轴高度 - 字符 y 轴起点 - 字符大小)/ 2 + 字符 y 轴起点位置参数 + 字符大小数值的一半
也就是:
X = 14/2 + 0 = 7
Y = (30 - 0 - 14) / 2 + 0 + 14 / 2 = 15
svg中对应的定位就是 x = 7 ,y = 15
css与svg相反,所以是 -7,-15现在
新建一个zhiliao.css文件,键入如下内容:
新建一个demo.html,键入:
html中会引入css文件,css又会引入svg文件。通过d标签的class属性值读取css对应的svg标签,完成对svg的映射。然后把demo.html拖到浏览器,可以看到:
字符h完完整整的被我们成功的映射出来了。
搞懂了这些,反爬就不是难事了,我们要做的是让程序搞定这些。
回到刚才的目标网站,开始实战抓取。
测试寻找class=lhtqsc的css对应参数和字符大小,输出如下:
打开对应css与svg文件验证:
一致,成功!
这里有四个text标签,对应四个文本,每个文本X轴都是从0开始,并且以14递增Y轴不相同的,分别是 38, 83 , 120 ,164文本顺序也有所不同。现在我们get这些数据:
输出:
到这一步,我们成功的分别取出了y的和text标签的四个值,并组成了列表。但是,这些元素 几乎没有和 [‘38’, ‘83’, ‘120’, ‘164’] 中有相等的,
这对于我们寻找text标签包含的文本值并不影响,我们找到最近接近的即可。我们仍然以 class=lhtqsc为例子,寻找它最近的y值,从而找出是哪个text标签包含的值。完善我们的代码:
输出:
然后就可以利用切片的特性寻找到对应的数值啦!
输出 7,有图为证:
验证:我们打开网站,看看对应的是不是数字7
到这里,就算成功了,是不是很简单呢?跟我一起做一遍吧。