5分钟看懂SVG反爬虫原理与绕过实战 | 知了干货分享

最新推荐文章于 2024-09-06 22:29:15 发布

jspython

最新推荐文章于 2024-09-06 22:29:15 发布

阅读量1.8k

点赞数 3

分类专栏：编程文章标签： python

本文链接：https://blog.csdn.net/jspython/article/details/106071233

版权

本文详细讲解SVG反爬虫的原理，通过实例分析SVG与CSS的关系，介绍如何利用Python抓取SVG隐藏信息。通过理解字符映射、CSS定位与SVG坐标系统，最终实现数据的成功提取。

摘要由CSDN通过智能技术生成

SVG反爬虫不同于字体反爬虫，它巧妙的利用css 与 svg的关系，将字符映射到网页中，看起来虽然正常，但是却抓取不到有效内容。本文带你深入浅出，破了SVG反爬虫的套路，学会之后，可应用于某点评网。
在这里插入图片描述
一、初识SVG反爬：
为了防止面对监狱编程，我在本地自己做了一个网页用于爬虫测试。

任务是爬取票据中的产品价格信息，按照往常一样审查元素定位目标节点，但是发现事情并不简单。

看图：

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

看css样式：

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

background-image: url(../css/zhiliao.svg);

就有点奇怪，而第二段，描述的是background，它的值是两个大小值，单位px。
在这里插入图片描述
打开svg文件查看：

貌似是没什么规律的数字
在这里插入图片描述
查看该页面网页源代码，发现是张这样的：

二、什么是SVG？

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

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

编写一个SVG文件：

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

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love zhiliao</text>
</svg>
</body>
</html>

浏览器打开如下：
在这里插入图片描述
其中：

<text x="0" y="15" fill="red">I love zhiliao</text>

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

该坐标的规则是：
1.以左上角为坐标系的原点(0,0)
2.X 轴的正方向向右，从 0,0 点开始向右， x 逐渐增大。Y 轴的正方向向下，从 0,0 点开始向下， y 逐渐增大。
3.坐标以像素为单位
4.n 个字符可以有 n 个位置参数。
在这里插入图片描述
增加一行：

<text x="10 20 30 40 50 60 70 80 90" y="100" fill="black">I love zhiliao</

最低0.47元/天解锁文章

jspython

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录