前几天在爬取某网站的时候遇到了 CSS 偏移反爬虫, 它是一种利用 CSS 样式将乱序的文字排版成人类正常阅读顺序的反爬虫. 今天志斌就来跟大家分享一下这类反爬虫应该如何绕过.
本文转载自微信公众号「志斌的 python 笔记」, 作者志斌. 转载本文请联系志斌的 python 笔记公众号.
大家好, 我是志斌~
前几天在爬取某网站的时候遇到了 CSS 偏移反爬虫, 它是一种利用 CSS 样式将乱序的文字排版成人类正常阅读顺序的反爬虫. 今天志斌就来跟大家分享一下这类反爬虫应该如何绕过.
01 原理
在搭建网页的时候, 我们需要用 CSS 来控制各类字符的位置, 也正是如此, 我们可以利用 CSS 来将浏览器中显示的文字, 在 html 中以乱序的方式存储, 从而来限制爬虫. 如下图, 我们发现浏览器中实际显示的是 1226, 但是 HTML 中显示的是 1262.
接下来, 我们通过一个例子来了解绕过 CSS 偏移反爬虫的方法.
02 绕过
从下图中我们看出机票价格的数据被包裹在一个标签中, 标签大小是 64px. 如下图所示:
进一步对网页进行观察发现, 标签中有五个标签, 它们每一对标签都有特定的样式. 如下图所示:
我们用这些 CSS 样式来进行分析的话, 我们发现, 第一对标签中的四对标签刚好占满了标签的位置. 如下图所示:
浏览器中, 本应显示的是 5377, 因为第二, 三, 四, 五对标签中有值, 所以我们还需要看一下他们的位置.
第二对的 < b > 标签的位置样式是 left:-64px, 所以第二对 < b > 标签中的 1 就会覆盖第一对 < b > 标签中第一对 < i > 标签中的 5; 第三对的 < b > 标签的位置样式是 left:-32px, 第三对 < b > 标签中的 2 会覆盖第一对 < b > 标签中第三对 < i > 标签中的 7. 依次类推, 第四对 < b > 标签中的 6 会覆盖第一对 < b > 标签中第四对 < i > 标签中的 7, 第五对 < b > 标签中的 2 会覆盖第一对 < b > 标签中第二对 < i > 标签中的 3.
通过上面的分析, 我们发现, CSS 偏移反爬虫其实就是让几个数据由 CSS 控制位置, 来对原数据进行覆盖, 从而实现反爬效果.
那么当我们遇到这类反爬虫的时候, 首先就需要对页面的 CSS 进行观察分析, 找到偏移量的计算规律, 然后提取出每个标签中 left 的值, 根据规律来排列出真实的数据.
当然, 会有读者说, 我们找到了规律, 但是不会提取标签中的数据怎么办? 不用担心, 在之前的文章中, 志斌介绍过如和用 BS4 提取数据的方式, 其中就有提取标签数据的方法, 有不懂的小伙伴, 可以看看这篇文章学会 BS4, 轻松解决数据提取!.
03 小结
1. CSS 偏移反爬虫实质上是通过 CSS 样式来控制数据在页面中显示的位置, 从而将乱序的数据以正常的形式展示给用户.
2. 破解这种反爬虫的难度并不大, 主要是找到位置偏移的计算方法, 而且代码书写可能较为繁琐, 读者们可以提前写好流程图, 然后在进行书写.
3. 目前这种反爬虫方法主要是针对于数字数据的反爬.
4. 本文旨在学习与研究 CSS 偏移反爬虫, 请大家不要用于非法用途.
来源: http://developer.51cto.com/art/202106/668649.htm