CSS 偏移反爬虫，两种偏移案例

前言

很早之前就知道有一种反爬文本混淆，其中包含了图片伪装反爬，css 偏移反爬，字体反爬，SVG 反爬，以前稍微研究过一点字体反爬，可参考：

《爬虫 | 五八字体反爬》

《爬取租房信息，自己设置过滤条件》

最近稍微研究了一下 css 反爬，找了一些资料学习，成功通过了 GliedSky 的 css 偏移反爬的题目：

在这里总结两种 css 偏移反爬。

GlidedSky 其他题目的可以参考：

《Glidedsky 爬虫挑战 | js 加密1》

第一种

第一种 css 反爬，是比较好理解，网上搜到的资料最多的以去哪网为例的，机票价格的偏移。

如在页面上看到的数字是 450，但在获取的 html 中直接提取出来的是 540（好像现在可以直接提取 title 属性获得正确的数字了）：

可以看到数字是放到 b 标签中的，总共有 4 个，还有一个折叠的，展开，其中有 3 个 i 标签也有数字，所以要提取 450 这个正确的顺序的话，就需要所有数字，先拿出来 797540：

现在开始偏移回去，整个价格标签宽度，即 width 为 48。

1，2，3 标签的宽度各为 16，3 个标签长度刚好为 48，按顺序拼在一起，即 797。

4，5，6 标签各个宽度也为 16，但多了一个 left，这个就是需要偏移的标识，后面接偏移距离，正负号决定偏移距离。

例如 4 标签，left:-32px，在正确的标签上向左偏移 -32，即向右偏移 32 得到此时的位置，所有这个标签向左移动 32 变回去得到正确的位置：

为了方便理解，画了一个图：

这样就还原得到了正确额数字，逻辑明白了，那编写代码就容易多了，感兴趣的可以自己试试。

第二种

第二种，以 GlidedSky 的题目为例的，跟上面的对比有些不太一样，是要利用匹配 css 代码得到具体是怎么偏移的才好还原，上面的值利用标签就可以。

其中又涉及到几种，一个一个来看。

第一种 ::before 伪标签，即在标签中只显示 ::before 但真实的数据是放在 css 当中的：

第二种多余标签，即用来捣乱的，实际在页面中是不显示的，css 样式中有 opacity: 0 取值，代表不显示，只要是含有这个样式的标签是不需要的，需要剔除。

可以看到数字为 144，但标签有 4 个，1 标签中取值为 6 且含有 opacity，代表不显示，即剔除：

第三种没有任何偏移，即就在原位置的，虽没有偏移，但也需要判断后才知道。

我们一个一个标签的看，发现在三个标签的 css 样式中，绿色的部分都没有含有偏移关键字 left，即可判断未偏移：

第四种偏移的，即在正确的数字上偏移得到标签中的数字。

例如正确的数字是 256，偏移后的标签得到的是 562：

我们一个一个看，绿色部分含有偏移关键字 left 及后面的偏移距离，em 为单位，即向左偏移多少单位得到偏移后结果。

三个标签分别是向左偏移 1 个单位，向左偏移一个单位，向左偏移 -2 个单位，负号控制方向。

为了便于理解，画了一个偏移前后图：

所有涉及到的偏移都列举了，明白这个逻辑就可以写代码了，提取所有标签，判断每个数字标签是哪种偏移做对应处理。

每个标签都有一个 class 属性，取值是唯一的，可以理解为 id，通过此 id 在 css 样式中提取偏移距离或伪标签数字或移除多余标签或不移动。

css 样式这里是嵌入到了 html 中，直接正则匹配即可，核心代码为：

这样整个逻辑就完成了。