CSS偏移反爬虫

CSS偏移反爬虫

一、基本原理

CSS 偏移反爬虫指的是利用 CSS 样式将乱序的文字排版为人类正常阅读顺序的行为。这个概念不是很好理解，我们可以通过对比两段文字来加深对这个概念的理解。

·HTML 文本中的文字：我的学号是 1308205，我在北京大学读书。
·浏览器显示的文字：我的学号是 1380205，我在北京大学读书。

分析:爬虫提取到的学号是 1308205，但用户在浏览器中看到的却是 1380205。如果不细心观察，爬虫工程师很容易被爬取结果糊弄。这种混淆方法和图片伪装一样，是不会影响用户阅读的。让人好奇的是，浏览器如何将 HTML 文本中的数字按照开发者的意愿排序或放置呢？这种放置规则是如何运作的呢？我们可以通过一个具体的例子来了解CSS 偏移反爬虫的应用和绕过方法。

二、实例分析

目标网址：

http://www.porters.vip/confusion/flight.html

任务：爬取航班查询和机票销售网站页面中的航站名称、所属航空公司和票价

页面内容如图所示：

在编写 Python 代码之前，我们需要确定目标数据的元素定位。航空公司名称元素定位如图所示。

航空公司名称包裹在没有属性的 span标签中，但该 span 标签包裹在class属性为air g-tips的div标签中。接下来我们看一下航站名称的元素定位，定位结果如图 6-6 所示。

航站名称包裹在没有属性的 h2标签中，h2标签包裹在class为sep-lf的 div 标签中。我们再看一下票价的元素定位，定位结果如图:

页面中显示的票价为 467，但是在网页中却有两组不同的数字，其中一组是[7, 7, 7]，而另一组是[6, 4]，这看起来就有点奇怪了。难道是网页显示有问题？按照正常排序来说，这架航班的票价应该是 77 764 才对。我们可以查看第二架航班信息的价格，思考是网页显示问题还是做了什么反爬虫措施。第二架航班的票价元素定位结果如图所示。

结果与第一架航班的票价显示有同样的问题：网页显示内容和 HTML 代码中的内容不一致。我们分析一下 HTML 代码，看一看是否能找到什么线索。第一架航班票价的 HTML 代码为：

代码中有 3 对 b标签，第 1 对 b 标签中包含 3 对 i 标签，i 标签中的数字都是 7，也就是说第 1 对 b 标签的显示结果应该是 777。而第 2 对b标签中的数字是 6，第 3 对 b 标签中的数字是 4。这些数字与页面所显示票价 467 的关系是什么呢？这一步找到的标签和数字有可能是数据源，但是数字的组合有很多种可能，如图所示：

三、总结

由上述的分析可得到：

5 个数字的组合结果太多了，我们必须找出其中的规律，这样就能知道网页为什么显示 467 而不是 764 或者 776 。在仔细查看过后，发现每个带有数字的标签都设定了样式。
第 1 对 <b> 标签的样式为：width:48px;left:-48px
第 2 对 <b> 标签的样式为：width: 16px;left:-32px
第 3 对 <b> 标签的样式为：width: 16px;left:-48px
<i> 标签对的样式是相同的，都是：width: 16px;
另外，还注意到最外层的 <span> 标签对的样式为：width:48px 
如果按照 CSS 样式这条线索来分析的话，第 1 对 <b> 标签中的 3 对 <i> 标签刚好占满 <span> 标签对的位置。

其位置如图所示。

此时网页中显示的价格应该是 777，但是由于第 2 和第 3 对 b 标签中有值，所以我们还需要计算它们
的位置。此时标签位置的变化如图所示。

右侧是标签位置变化后的结果，由于第 2 对 <b> 标签的位置样式是left:-32px，
所以第 2 对 <b> 标签中的值 6 就会覆盖原来第 1 对 <b> 标签中的中的第 2 个数字 7，
此时页面应该显示的数字是 767。按此规律推算，第 3 对 <b> 标签的位置样式是left:-48px，
这个标签的值会覆盖第 1 对 <b> 标签中的第 1 个数字7，覆盖结果如图所示，最后显示的票价是 467。

根据结果来看这种算法是合理的，不过我们还需要对其进行验证，现在将第二架航班的 HTML 值和 CSS 样式按照这个规律进行推算。最后推算得到的结果与页面显示结果相同，说明这个位置偏移的计算方法是正确的，这样我们就可以编写 Python 代码获取网页中的票价信息了。