手把手教你处理 JS 逆向之 CSS 偏移

本篇文章将聊聊另外一种常见的反爬方案,即:「 CSS 偏移 」 。

CSS 偏移反爬是利用「 CSS 样式 」对网页元素进行一次自定义的排序,最后让网页以正确的数据展示出来 。

下面我们通过一个简单的实例,讲解应对 CSS 偏移网站常规解决方案 。

目标对象:aHR0cDovL3d3dy5wb3J0ZXJzLnZpcC9jb25mdXNpb24vZmxpZ2h0Lmh0bWw=

1.分析一下

打开目标网站,在开发者工具面板中查看「 机票价格 」的网页元素组成方式 。

我们发现,机票价格由上、下两个区域的数据元素,通过一定的偏移量偏移,最后在页面上展示的 。

以第 1 条数据为例,机票实际价格为 467。

区域一宽度设置为 48px,left 的值为 -48px 代表左边距向左偏移 48px 。

其内部的 i 标签宽度都为 16px,完全占满了父容器的宽度 。

即:如果区域二隐藏的话,机票价格应该为 777 。

我们继续看区域二的内容

第一个 b 标签,内容为 6,left 属性值为 -32px,宽度为 16px,会覆盖上面的第二个数字 。

第二个 b 标签,内容为 4,left 属性值为 -48px,宽度同样为 16px,会覆盖掉上面的第一个数字 。

因此,最后网页展示的机票价格就是 467 。

2.特殊处理

如果仔细观察网页元素ÿ

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值