目前反爬虫机制能有效防止数据被爬取吗？ 第1页

SVG 映射反爬虫

SVG 是用于描述二维矢量图形的一种图形格式。它基于 XML 描述图形，对图形进行放大或缩小操作都不会影响图形质量。矢量图形的这个特点使得它被广泛应用在 Web 网站中。

接下来我们要了解的反爬虫手段正是利用 SVG 实现的，这种反爬虫手段用矢量图形代替具体的文字，不会影响用户正常阅读，但爬虫程序却无法像读取文字那样获得 SVG 图形中的内容。由于 SVG 中的图形代表的也是一个个文字，所以在使用时必须在后端或前端将真实的文字与对应的 SVG 图形进行映射和替换，这种反爬虫手段被称为 SVG 映射反爬虫。

6.3.1 SVG 映射反爬虫绕过实战

示例 6：SVG 映射反爬虫示例。

任务：爬取美食商家评价网站页面中的商家联系电话、店铺地址和评分数据，页面内容如图 6-15 所示。

图 6-15 示例 6 页面

在编写 Python 代码之前，我们需要确定目标数据的元素定位。在定位过程中，发现一个与以往不同的现象：有些数字在 HTML 代码中并不存在。例如口味的评分数据，其元素定位如图 6-16 所示。

图 6-16 评分数据中口味分数元素定位

根据页面显示内容，HTML 代码中应该是 8.7 才对，但实际上我们看到的却是：

HTML 代码中有数字 7 和小数点，但没有 8 这个数字，似乎数字 8 的位置被 d 标签占据。而商家电话号码处的显示就更奇怪了，一个数字都没有。商家电话对应的 HTML 代码如下：

包含很多的 d 标签，难道它使用 d 标签进行占位，然后用元素进行覆盖吗？我们可以将 d 标签的数量和数字的数量进行对比，发现它们的数量是相同的，也就是说一对 d 标签代表一个数字。

每一对 d 标签都有 class 属性，有些 class 属性值是相同的，有些则不同。我们再将 class 属性值与数字进行对比，看一看能否找到规律，如图 6-17 所示。

图 6-17 class 属性值和数字的对比

从图 6-17 中可以看出，class 属性值和数字是一一对应的，如属性值 vhk08k 与数字 0 对应。根据这个线索，我们可以猜测每个数字都与一个属性值对应，对应关系如图 6-18 所示。

图 6-18 数字与属性值对应关系

浏览器在渲染页面的时候就会按照这个对应关系进行映射，所以页面中显示的是数字，而我们在 HTML 代码中看到的则是这些 class 属性值。浏览器在渲染时将 HTML 中的 d 标签与数字按照此关系进行映射，并将映射结果呈现在页面中。映射逻辑如图 6-19 所示。

图 6-19 映射逻辑

我们的爬虫代码可以按照同样的逻辑实现映射功能，在解析 HTML 代码时将 d 标签的 class 属性值取出来，然后进行映射即可得到页面中显示的数字。如何在爬虫代码中实现映射关系呢？实际上网页中使用的是“属性名数字”这种结构，Python 中内置的字典正好可以满足我们的需求。我们可以用 Python 代码测试一下，代码如下：

这段代码的逻辑是：首先定义属性值与数字的映射关系，然后假设一个 HTML 中 d 标签的属性值，接着将这个属性值的映射结果打印出来。代码运行后得到的结果为：

运行结果说明映射这种方法是可行的。接着我们试一试将商家的联系电话映射出来：

运行结果为：

我们使用映射的方法得到了商家联系电话，说明 SVG 映射反爬虫已经被我们绕过了。

6.3.2 大众点评反爬虫案例

这种映射手段不仅仅出现在本书的示例中，在大型网站中也有应用。大众点评是中国领先的本地生活信息及交易平台，也是全球最早建立的独立第三方消费点评网站。大众点评不仅为用户提供商户信息、消费点评及消费优惠等信息服务，同时提供团购、餐厅预订、外卖和电子会员卡等 O2O（Online To Offline）交易服务。大众点评网站也使用了映射型反爬虫手段，打开浏览器并访问 https://www.dianping.com/shop/14741057，页面如图 6-20 所示。

图 6-20 大众点评商家信息页

大众点评的商家信息页主要用于展示消费者对商家的各项评分、商家电话、店铺地址和推荐菜品等。我们可以看一看商家电话或评分的 HTML 代码，如图 6-21 所示。

图 6-21 商家电话 HTML 代码

大众点评中的商家号码并不是全部使用 d 标签代替，其中有部分使用了数字。但是仔细观察一下就可以发现商家号码的数量等于 d 标签数量加上数字的数量，说明 d 标签的 class 属性值与数字也有可能是一一对应的映射关系。感兴趣的同学可以使用示例 6 中的方法，尝试映射大众点评案例中的数字。

如果这种手段的绕过方法这么简单的话，那么它早就被淘汰了，为什么连大众点评这样的大型网站都会使用呢？我们继续往下看，大众点评的商家营业时间部分的 HTML 代码如图 6-22 所示。

图 6-22 大众点评商家营业时间

除了刚才的数字映射之外，大众点评还对中文进行了映射。此时如果按照示例 6 中人为地将 class 值和对应的文字进行映射的话，就非常麻烦了。试想一下，如果网页中所有的文字都使用这种映射反爬虫的手段，那么爬虫工程师要如何应对呢？对所有用到的文字进行映射吗？

这不可能做到，其中要完成映射的包括 10 个数字、26 个英文字母和几千个常用汉字。而且目标网站一旦更改文字的对应关系，那么爬虫工程师就需要重新映射所有文字。面对这样的问题，我们必须找到文字映射规律，并且能够使用 Python 语言实现映射算法。如此一来，无论目标网站文字映射的对应关系如何变化，我们都能够使用这套映射算法得到正确的结果。

这种映射关系在网页中是如何实现的呢？是使用 JavaScript 在页面中定义数组吗？还是异步请求API 拿到 JSON 数据？这都有可能，接下来我们就去寻找答案。

6.3.3 SVG 反爬虫原理

映射关系不可能凭空出现，一定使用了某种技术特性。HTML 中与标签 class 属性相关的只有 JavaScript 和 CSS。根据这个线索，我们需要继续对示例 6 进行分析。案例中商家电话的 HTML 代码为：

我们可以随意选择一对 d 标签，然后观察它对应的 CSS 样式有没有可以深入分析的线索，如果没有线索再看 JavaScript。d 标签的 CSS 样式如下：

d 标签样式看上去没有什么特别之处，只是设置了 background 属性的坐标值。但是上方 d 标签的公共样式中设置了背景图片，我们可以复制背景图片的地址，在浏览器的新标签页中打开，d 标签背景图如图 6-23 所示。

图 6-23 标签背景图

d 标签的背景图中全部都是数字，这些无序的数字共有 4 行。但这好像不是一张大图片，我们查看该图片页面的源代码，内容如图 6-24 所示。

图 6-24 图片页面源代码

源代码中前两行表明这是一个 SVG 文件，该文件中使用 text 标签定义文本， style 标签用于设置文本样式， text 标签定义的文本正是图片页面显示的数字。难道这些无序的数字就是我们在页面中看到的电话号码和评分数字？

除了 class 属性值为 vhkbvu 的 d 标签，其他标签也使用了这个的 CSS 样式，但每对 d 标签的坐标定位都不同。它们的坐标定位如下：

坐标是定位数字的关键，要想知道坐标的计算方法，必须了解一些关于 SVG 的知识。

在本节开始的时候，我们简单地了解了 SVG 的概念，知道 SVG 是基于 XML 的。实际上它是用文本格式的描述性语言来描述图像内容的，因此 SVG 是一种与图像分辨率无关的矢量图形格式。打开文本编辑器，并在新建的文件中写入以下内容：

将该文件保存为 test.svg，然后使用浏览器打开 test.svg 文件，显示内容如图 6-25 所示。

图 6-25 test.svg 显示内容

代码前 3 行声明文件类型，第 4 行~第 5 行定义了 SVG 内容块和画布宽高，第 6 行使用 text 标签定义了一段文本并指定了文本的坐标。这段文本就是我们在浏览器中看到的内容，而代码中的 x 坐标和 y 坐标则用于确定该文本在画布中的位置，坐标规则如下。

•以页面的左上角为零坐标点，即坐标值为 (0, 0)。 •坐标以像素为单位。•x 轴的正方向为从左到右，y 轴的正方向是从上到下。•n 个字符可以有 n 个位置参数。

如果字符数量大于位置参数数量，那么没有位置参数的字符将以最后一个位置参数为零坐标点，并按原文顺序排列。

看上去并不是很好理解，我们可以通过修改代码来理解坐标轴的定义。首先是 x 轴， text 标签中的 x 代表列表字符在页面中的 x 轴位置，test.svg 中的 x 值为 10，现在我们将其设为 0 ，保存后刷新网页

x 的值为 0 时，文本紧贴浏览器左侧。而 x 的值为 10 时，文本距离浏览器左侧有一定的距离，这说明 x 的值能够决定文字所在的位置。现在我们将代码中 x 对应的值改为“10 50 30 40 20 60”（注意这里特意将第 2个数字 20与第 5个数字互换了位置），这样做是为了设定前 6个字符的坐标位置。

此时，第 1 个字符的位置参数为 10，第 2 个字符的位置参数为 50，第 3 个字符的位置参数为 30

但是由于我们调换了第 2 个字符和第 5 个字符的位置参数，即字母 e 和字母 o 的位置互换

6-27 设定多个 x 值的 svg

图 6-27 中文字顺序与我们猜测的顺序是一样的，这说明 SVG 中每个字符都可以有自己的 x 轴坐标值。y 与 x 同理，每个字符都可以有自己的 y 轴坐标值。虽然我们只设定了 6 个位置参数， svg 中的字符却有 11 个，但没有设定位置参数的字符依然能够按照原文顺序排序。在了解 SVG 基本知识之后，我们回头看一下案例中所使用的 SVG 文件中坐标参数的设定，图 6-23 中的字符与图 6-24 图片页源代码中的字符一一对应，且每个字符都设定了 x 轴的位置参数，而 y 轴则只有 1 个值。

在了解位置参数之后，我们还需要弄清楚字符定位的问题。浏览器根据 CSS 样式中设定的坐标和元素宽高来确定 SVG 中对应数字。x 轴的正方向为从左到右，y 轴的正方向是从上到下，如图 6-28 所示。

图 6-28 SVG x 轴和 y 轴与位置参数的关系

而 CSS 样式中的 x 轴与 y 轴是相反的，也就是说 CSS 样式中 x 轴是负数向右的，y 轴是负数向下的，如图 6-29 所示。

图 6-29 CSS x 轴和 y 轴与位置参数的关系

所以当我们需要在 CSS 中定位 SVG 中的字符位置时，需要用负数表示。我们可以通过一个例子来理解它们的关系，现在需要在 CSS 中定位图 6-30 中第 1 行的第 1 个字符的中心点。

图 6-30 SVG

假设字符大小为 14 px，那么 SVG 的计算规则如下。

•字符在x轴中心点的计算规则为：字符大小除以2，再加字符的x轴起点位置参数，即14÷2+0 等于 7。 •字符在 y 轴中心点的计算规则为：y 轴高度减字符 y 轴起点减字符大小，其值除以 2 后加上字符 y 轴起点位置参数，最后再加上字符大小数值的一半，即(38−0−14)÷2+0+7 等于 19。

最后得到 SVG 的坐标为：

CSS 样式的 x 轴和 y 轴与 SVG 是相反的，所以 CSS 样式中对该字符的定位为：

这样就能够定位到指定字符的中心点了。但是如果要在 HTML 页面中完整显示该字符，那么还需要为 HTML 中对应的标签设置宽高样式，如：

还有需要映射的 HTML 标签的 class 属性值，如：

接下来使用 Requests 库向 URL 发出请求，拿到文本内容。对应代码如下：

提取 CSS 样式文件中标签属性对应的坐标值，这里使用正则进行匹配即可。对应代码如下：

此时得到的坐标值是正数，可以直接用于 SVG 字符定位。定位前我们要先拿到 SVG 中所有 text 标签的 Element 对象：

然后获取所有 text 标签中的 y 值，接着我们将上一步得到的 Element 对象进行循环取值即可：

得到 y 值后就可以开始字符定位了。要注意的是，SVG 中 text 标签的 y 值与 CSS 样式中得到的 y 值并不需要完全相等，因为样式可以随意调整，比如 CSS 样式中-90 和-92 对于 SVG 的定位来说并没有什么差别，所以我们只需要知道具体是哪一个 text 即可。

那么如何确定是哪一个 text呢？

我们可以用排除法来确定，假如当前 CSS 样式中的 y 值是-97，那么在 SVG 中 text 的 y 值就不可能小于 97，我们只需要取到比 97 大且最相近的 text 标签 y 值即可。比如当前 SVG 所有 text 标签的 y 值为：

那么大于 97 且最相近的是 120。将这个逻辑转化为代码：

       axis_y = [i.attrib.get('y') for i in texts if y <= int(i.attrib.get('y'))][0]     

得到 y 值后就可以确定具体是哪个 text 标签了。对应代码如下：

       svg_text = svg_data.xpath('//text[@y="%s"]/text()' % axis_y).extract_first()     

接下来需要确认 SVG 中的文字大小，也就是需要找到 font-size 属性的值。对应代码如下：

       font_size = re.search('font-size:(d+)px', svg_resp).group(1)     

得到 font-size 的值后，我们就可以定位具体的字符了。x 轴有多少个字符呢？刚才我们拿到的 svg_text 就是指定的 text 标签中的字符：

       '671260781104096663000892328440489239185923'     

我们需要计算字符串长度吗？并不用，我们知道，每个字符大小为 14 px，只需要将 CSS 样式中的 x 值除以字符大小，得到的就是该字符在字符串中的位置。除法得到的结果有可能是整数也有可能是非整数，当结果是整数是说明定位完全准确，我们利用切片特性就可以拿到字符。如果结果是非整数，就说明定位不完全准确，由于字符不可能出现一半，所以我们利用地板除（编程语言中常见的向下取整除法，返回商的整数部分。）就可以拿到整数：

       position = x // int(font_size) # 结果为 27     

也就是说 CSS 样式 vhkbvu 映射的是 SVG 中第 4 行文本的第 27 个位置的值。映射结果如图 6-31 所示。

图 6-31 映射结果

然后再利用切片特性拿到字符。对应代码如下：

代码运行结果为 4。我们还可以尝试其他的 class 属性值，最后得到的结果与页面显示的字符都是相同的，说明这种映射算法是正确的。至此，我们已经完成了对映射型反爬虫的绕过。

最后推荐一款适合爬虫的代理ip---代理云

爬虫的小伙伴可以去领取免费的代理IP试一下

国内高质动态IP。时效2-10分钟，注册免费领取一万代理IP

注册电脑端

注册手机端

我是一名基层派出所民警。

可以说当今中国警察普遍羡慕美国警察可以采取暴力手段绝对的镇压不法分子。

但是，不得不说，这次这位美国警察，太过分了，不仅是过分，而且我的理解是那已经构成了犯罪行为。那黑人已经制服了就可以正常上拷带走了，没必要一直压着脖子压那么长时间。没能置身其中不知现场那美国警察的所思所想，反正我个人挺不理解他为啥那样干的。

只能说无论什么地方，无论什么行业，只要是人的社会，都有像样的也有操蛋的吧。

_________此处为分割线 _________

以下为统一答复评论中有些人质疑的我所讲的羡慕二字。

能够出现这种质疑在我料想之中，因为中国警察也有过过分的时代，据我所知就是在七十八十九十年代，就如同地痞流氓，看谁不顺眼就能打谁对老百姓而言没王法可讲，那时候的警察说好听点可以说是威风凛凛说难听点儿是横行霸道。

但我想表明的是，时过境迁，现在的中国警察无论是受舆论约束还是因为法治社会建设制度规范都已经变得逐步文明与规范起来，起码我认为从我们现在开始从公安司法院校毕业参加公务员考试考进来的新一代警察已经具备新的面目，当然不可否认的是在这个行业内目前仍然存有历史的顽疾，仍然存在着臭虫，但我已经讲过无论什么行业都有操蛋的吧，这是个人问题，不是群体问题。相比之下，拍拍良心看，现在的整个警察队伍比照曾经确实过分的年代是不是已经是天地之别，问问曾经真正挨过曾经年代老警察欺负的中老年人就知道了。

为何会说起羡慕，因为警察每天面对的人群，大多是三教九流之辈，没有武力加身，很多事情在处理上警察显得软弱无能，说白了，好人谁没事儿上派出所转悠啊都忙着自己的生活呢，警察打人这句话，我们常常听到，但是但凡有点脑袋的人都能想明白，警察会闲着没事儿干把那在家里消停待着的遵纪守法的人抓起来暴揍一顿吗？

以上言辞不免更会有人质疑，请允许我解释，武力，当然不可滥用，我所说的羡慕不是羡慕美国警察的随意滥用武力，而是在合法范围内准许在对方不听从警察指令时动用武力，现在确实有人民警察法赋予了相关权力，但实践中现在的中国警察并不能或者说不敢执行人民警察法里的所有权力。拿防疫工作举例，卡口的工作人员在让出入的人员扫码登记时，就会有不愿意配合的人，然而这些不愿意配合的人可会知道工作人员的所做所为是为了整个社区的稳定安全，因为这整个社区包括了这名不愿意配合的人啊，在这个时候是否应当对其进行武力控制来保障其他居民的安全呢。同理，警察盘查也好，调查也好，总会有那些不愿意配合的人，自我感觉良好认为自己没问题所以警察不必要对其进行盘查所以就不配合，而警察当看到对方不配合时会以什么视角审视，难道要说谢谢您的不配合吗，万一这不愿配合的人真背着案子呢，那便是对更多的人民群众的不负责任。因此，我要说，民众的素质如果真正达到了人人互相敬重路不拾遗夜不闭户的文明程度，要求警察绝对文明不要有暴力举动，一点问题没有，一味强调了警察不该暴力执法而分毫不过问被执法对象自身是否存在问题，是不是看问题的角度些微的片面了些。

请注意，我说羡慕里的那句话尾巴实际已经表明了，羡慕的是暴力手段对不法分子的镇压，可不是对遵纪守法的百姓也要肆意妄为。例如像给群众办个身份证居住证之类的业务，警察当然应该热心服务。但当面对泼皮无赖时，还要笑脸相迎，得来的只有蹬鼻子上脸，警察都不怕了，您们认为这些无赖还有谁管得了。

列位存有异议的同志们，谢谢您们的教诲。言辞中犀利的同志们，谢谢您们的敦促。

让我知道当警察，需要吾日三省吾身。

还想要质疑甚或是骂的您们，若是能让您舒服，骂两句无妨。我不算您辱骂警察。不过是，道不同不相为谋罢了吧。

_____分割线

2020年6月5日22:53 出警在路上

---

  wei-xin-si-wei 网友的相关建议: 
      

一大早起来真是笑死我了。

由于老头环空前的热潮，以及B站特有的UP主靠制作视频吸引流量转直播的模式，导致很多有人气但完全没有魂系列经验的主播在播这款游戏。比如某幻、瓶子。

（就是一开始制作视频是主业，直播是兼职，甚至是乐趣兴趣，到直播为主，制作视频反倒成了兼职。这种现象在游戏区特别明显。）

这就很有节目效果了，我看几个有名气的主播，都是重复被虐，平均活不过5分钟。真正是在哪里跌倒就从哪里跌倒。

很多在我们这些老玩家看来常识性的东西，对于他们来说完全不存在的。

盾反这种就不提了（其实我也不会），连二人转、回合制、推图都不懂。在大型地牢里不想打小怪，一个劲往前跑，结果变成开火车；当着怪物的面喝药=白喝；开宝箱被怪物背刺；以为学了法术就是法爷了，结果被几只鸟打得抱头鼠窜。

然后另一边，那些原本有魂系列经验的主播，就吃了刻板印象的亏。觉得自己有技术有实力，也不练级就顺着主线硬钢。就比如一上来的野外精英太阳骑士，要么你死要么我亡，绕路是不可能绕路的。

太阳骑士都还好，毕竟王老菊都能杀。

但没有等级，没有血量，没有伤害，硬钢噩兆。

真当噩兆快慢刀是假的，自己打几次就能盾反了？而且老头环这次砍了盾反在BOSS战中的作用，要反三次（二次）才能触发处决。

结果被虐3000遍，又不好意思去练级，尬在那了。

老头环是不是玩家的盛宴我还不知道（买了游戏，昨天也预下载了，结果今天起来发现那个盘满了……正在重新下载，下载完了又发现，我的电脑只有8G内存……），但肯定是不少主播的灾难、观众的盛宴。

当然，我也知道有些主播直播受罪是搞节目效果，但我也是真看到有主播被气到下播了。

另外一点，老头环这次其实是以探索为主要玩法。

B站UP主老戴今天专门做了一期视频讲解，想要玩好、玩轻松，就是尽可能的探索地图，拿物品、刷等级。而不是走到哪杀到哪，打不过硬去打。

就比如第一个剧情BOSS前，大地图上有的是小型地牢，野外精英，要把图清完了再去打噩兆，真跟打弟弟一样。（收回我的话，40级30血20耐20敏+3打刀7瓶奶，打了7次才过。前三次就是纯背板，后三次有点贪，经常血瓶白喝，最后一次基本掌握出手时机，就硬耗过去了。）

其实魂系列游戏特别吃角色强度（等级、装备），一些小怪你一刀砍死和一刀残血，完全就是两种难度。打BOSS，你挨一下就要喝药，和挨两下才需要喝药也是两倍的差距。

不过按照这么个玩法，的确没有什么节目效果。

讲真，还真就是看那些新手主播无能狂怒最有节目效果。

至于游戏本体，如今我也的确是玩上了，总体上来说符合我的期待。

作为一个中年人，我其实是在看了老头环试玩视频后才接触魂系列的。

原因有2，一是手残反映慢，玩这种游戏非常苦手；二是，我其实不太喜欢魂系列那种压抑的黑暗风格。

但老头环作为开放世界，虽然依旧以压抑阴郁为主，但也有光明广阔的场景。比如一开始做完新手指引推门而出的那一刻。

至于在难度与操作方面，远程技能的实用化，召唤物的存在，以及跳砍与伪盾反的出现，真的能够解决很多问题。

只是看你愿不愿意当一个“卑鄙的褪色者”。

远程技能包括法术与射击。我玩的武士，初始给的长弓非常给力。尤其记得推一座城堡图的时候，一开始不清楚套路，进入城堡被满地的炸药桶与两个放火球的法师直接秒了。复活后掏出长弓，一剑封喉，解决掉法师无伤过了。

还有初期的一个地牢，一个场景墙上爬着的与左右墙角蹲着的类似地精的怪物，近战5-6刀才能砍死。

第一次去直接围殴致死。

第二次，用弓箭一只只引过来，很轻松就过了。

至于近战武器，我是非常推荐初期见完老婆就能开箱子拿到的君王大剑。

这把武器虽然攻速低，成长性也低，但在初期真的非常实用。

尤其是在跳劈方面。

这一作跳劈虽然强但也看武器，比如武士上来给的打刀就属于跳劈对空，跳起来横着劈一刀，有时候都打不到站着的怪。而大剑则是竖着往地上砸，范围极大。

我举一个例子，就是我开地图第一次遇到红灵。就是等对方打完一套跳劈就完了。

我的战斗策略就是，遇事不决，举盾防御，然后跳劈。

至于BOSS战，依旧有难度，也许跳劈和法术都没啥作用，依靠的依旧是精准的闪躲后普攻（排除盾反）。

但我觉得这算是魂系列的乐趣之一。

如果随便什么BOSS战都能逃课，那也就没意思了。

---