您当前的位置:首页 > 电脑百科 > 站长技术 > 网站

5分钟看懂SVG反爬虫原理与绕过实战

时间:2020-05-12 11:32:56  来源:  作者:

SVG反爬虫不同于字体反爬虫,它巧妙的利用css 与 svg的关系,将字符映射到网页中,看起来虽然正常,但是却抓取不到有效内容。本文带你深入浅出,破了SVG反爬虫的套路,学会之后,可应用于某点评网。

5分钟看懂SVG反爬虫原理与绕过实战

 

一、初识SVG反爬:

为了防止面对监狱编程,我在本地自己做了一个网页用于爬虫测试。任务是爬取票据中的产品价格信息,按照往常一样审查元素定位目标节点,但是发现事情并不简单。

看图:

¥符号后面并没有我们想要的价格信息,而是四个d标签取而代之。随便选中一个7,发现对应的是属性class=lhtqsc的d标签。

看css样式:

有两段描述这个标签的语句,第一段比较常规,但是其中的

5分钟看懂SVG反爬虫原理与绕过实战

就有点奇怪,而第二段,描述的是background,它的值是两个 大小值,单位px。

5分钟看懂SVG反爬虫原理与绕过实战

打开svg文件查看:

貌似是没什么规律的数字

5分钟看懂SVG反爬虫原理与绕过实战

查看该页面网页源代码,发现是张这样的:

5分钟看懂SVG反爬虫原理与绕过实战
 

 

二、什么是SVG?

想要搞定SVG反爬虫就得先搞清楚SVG:

SVG是一种基于xml用于描述矢量图的图形格式,由于矢量图放大或缩写都不会影响图形的质量,所以被较多的应用在web站点与App中,常见的存在形式是图标。

编写一个SVG文件:

为了方便,我们可以把要写的svg,写到html文件中,新建一个svg.html键入如下内容:

5分钟看懂SVG反爬虫原理与绕过实战

浏览器打开如下:

5分钟看懂SVG反爬虫原理与绕过实战

其中:

5分钟看懂SVG反爬虫原理与绕过实战

很关键,这一行用text标签定义了一段文本,fill是文本颜色属性,为红色,并且指定了文本的坐标。该坐标的规则是:

  1. 以左上角为坐标系的原点(0,0)
  2. X 轴的正方向向右,从 0,0 点开始向右, x 逐渐增大。Y 轴的正方向向下,从 0,0 点开始向下, y 逐渐增大。
  3. 坐标以像素为单位
  4. n 个字符可以有 n 个位置参数。

5分钟看懂SVG反爬虫原理与绕过实战

增加一行:

5分钟看懂SVG反爬虫原理与绕过实战

这行代码指定了前九个字符的位置,且指定了文本的颜色,y的值也增大到100,浏览器打开如下:

5分钟看懂SVG反爬虫原理与绕过实战

再次增加一行:

5分钟看懂SVG反爬虫原理与绕过实战

5分钟看懂SVG反爬虫原理与绕过实战

上图可以看到,在不改变文本顺序的情况下通过改变x中的值,让第一个字符I和第四个字符o交换了位置。

 

三、SVG与CSS的联系:

现在我们尝试把css和svg联系起来,更加深入的理解,方便我们做下一步抓取工作:在svg中,X轴正方向为从左到右,y轴的正方向是从上到下;在css中,X轴负数向右,Y轴是负数向下。一图胜千言:

5分钟看懂SVG反爬虫原理与绕过实战
所以,CSS与SVG刚好相反。新建一个zhiliao.svg并键入:

5分钟看懂SVG反爬虫原理与绕过实战

我们在style中 定义了字符的风格,大小(14px),以及颜色(#666)。定义了每个字符所在的位置。5分钟看懂SVG反爬虫原理与绕过实战

现在我们对第一个字符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文件,键入如下内容:

5分钟看懂SVG反爬虫原理与绕过实战

新建一个demo.html,键入:

5分钟看懂SVG反爬虫原理与绕过实战

html中会引入css文件,css又会引入svg文件。通过d标签的class属性值读取css对应的svg标签,完成对svg的映射。然后把demo.html拖到浏览器,可以看到:

5分钟看懂SVG反爬虫原理与绕过实战

字符h完完整整的被我们成功的映射出来了。
搞懂了这些,反爬就不是难事了,我们要做的是让程序搞定这些。

 

四、Python抓取数据:

回到刚才的目标网站,开始实战抓取。

1.获取css样式文件与svg文件内容:

5分钟看懂SVG反爬虫原理与绕过实战

2.获取匹配出class属性值对应css参数,与字符大小:

5分钟看懂SVG反爬虫原理与绕过实战

测试寻找class=lhtqsc的css对应参数和字符大小,输出如下:

5分钟看懂SVG反爬虫原理与绕过实战

打开对应css与svg文件验证:

5分钟看懂SVG反爬虫原理与绕过实战

5分钟看懂SVG反爬虫原理与绕过实战

一致,成功!

3.观察svg文件:

5分钟看懂SVG反爬虫原理与绕过实战这里有四个text标签,对应四个文本,每个文本X轴都是从0开始,并且以14递增Y轴不相同的,分别是 38, 83 , 120 ,164文本顺序也有所不同。现在我们get这些数据:

5分钟看懂SVG反爬虫原理与绕过实战

输出:

5分钟看懂SVG反爬虫原理与绕过实战

到这一步,我们成功的分别取出了y的和text标签的四个值,并组成了列表。但是,这些元素 几乎没有和 [‘38’, ‘83’, ‘120’, ‘164’] 中有相等的,

5分钟看懂SVG反爬虫原理与绕过实战

这对于我们寻找text标签包含的文本值并不影响,我们找到最近接近的即可。我们仍然以 class=lhtqsc为例子,寻找它最近的y值,从而找出是哪个text标签包含的值。完善我们的代码:

5分钟看懂SVG反爬虫原理与绕过实战

输出:

5分钟看懂SVG反爬虫原理与绕过实战

然后就可以利用切片的特性寻找到对应的数值啦!

5分钟看懂SVG反爬虫原理与绕过实战

输出 7,有图为证:

5分钟看懂SVG反爬虫原理与绕过实战

验证:我们打开网站,看看对应的是不是数字7

5分钟看懂SVG反爬虫原理与绕过实战

到这里,就算成功了,是不是很简单呢?跟我一起做一遍吧。



Tags:SVG反爬虫   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
SVG反爬虫不同于字体反爬虫,它巧妙的利用css 与 svg的关系,将字符映射到网页中,看起来虽然正常,但是却抓取不到有效内容。本文带你深入浅出,破了SVG反爬虫的套路,学会之后,可应用于...【详细内容】
2020-05-12  Tags: SVG反爬虫  点击:(178)  评论:(0)  加入收藏
▌简易百科推荐
今天我们来聊一下北京地区的《ICP经营许可证》有多好办,现在的互联网上提供的商机越来越多,增值电信业务十分火爆,企业通过互联网突破地域的限制,把公司产品卖到更远的地方,同时...【详细内容】
2021-12-17  梦想理应飞翔Yy    Tags:《ICP经营许可证》   点击:(12)  评论:(0)  加入收藏
转自: https://blog.kermsite.com/p/blog-intro/由于格式问题,部分链接、表格可能会失效,若失效请访问原文此专题将详细介绍如何从零开始搭建一个个人博客。Dec 01, 2021阅读时...【详细内容】
2021-12-17  LaLiLi    Tags:个人博客   点击:(7)  评论:(0)  加入收藏
SP证是第二类增值电信业务经营许可证的简称。分为全网SP证和地网SP证。申请经营许可证是在工信部申请,全网SP经营许可证的有效期是5年,全网SP许可证在工信部办理全网SP续期,地...【详细内容】
2021-11-01  s陳述    Tags:sp证书   点击:(39)  评论:(0)  加入收藏
现在还有许多人不知道EDI许可证是什么东西今天我就来给大家讲解一下.EDI许可证就是一种增值电信业务经营许可证。是针对在线数据处理和交易处理业务需求的专业资格证书。 《...【详细内容】
2021-10-28  soberXx    Tags:edi许可证   点击:(75)  评论:(0)  加入收藏
元素的化学概念,如周期表中的化学元素,一切物质都是由元素构成的。对程序员而言,网站建设制作就是代码构成网站。企业网站设计者也收集了各种各样的元素,但并非所有元素都需要运...【详细内容】
2021-10-26  南宁云尚网络    Tags:企业网站   点击:(40)  评论:(0)  加入收藏
在运营网站的过程中,有一件不可忽略的事情。那就是网站上线之前需要完成 ICP 备案。说到这里,很多朋友就提出疑问了~· 什么是 ICP 备案呢?· ICP 备案需要哪些材...【详细内容】
2021-10-22  启测云    Tags:ICP备案   点击:(46)  评论:(0)  加入收藏
最近有朋友问我,我公司有外资就不能申请ICP许可证了么?外资的定义是什么?其实是可以的,但有一个特定条件必须满足,外资公司是指公司有外资股东,比如香港、加拿大、美国、韩国等等,...【详细内容】
2021-10-21  小白速看Z    Tags:ICP   点击:(51)  评论:(0)  加入收藏
自互联网出现以来,超文本传输协议http协议被广泛用于在Web浏览器和网站服务器之间传递信息,但随着互联网的发展,另一种协议——https出现,并与http一同服务于这个互联...【详细内容】
2021-10-20  我是FEIYA    Tags:https   点击:(44)  评论:(0)  加入收藏
Grafana Loki 是一个日志聚合工具,它是功能齐全的日志堆栈的核心。图片来自 包图网先看看结果有多轻量吧: Loki 是一个为有效保存日志数据而优化的数据存储。日志数据的高效索...【详细内容】
2021-09-14    51CTO  Tags:Loki日志   点击:(97)  评论:(0)  加入收藏
背景最近做微信小程序开发比较多,大家知道线上微信小程序为了安全起见,要求后端通信协议必须是HTTPS,这就要求需要安装证书。为了测试预发布线上环境,特地买了个最便宜的域名,为...【详细内容】
2021-09-14  小李子说程序    Tags:HTTPS证书   点击:(125)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条