一些骨骼惊奇的前端反爬虫策略

前言

爬虫与反爬虫的斗争从未停止过。
如果页面希望能在用户面前正常展示,同时又不给爬虫机会,就必须要做到识别真人与机器人。
这些策略大多采用于后端,也是目前比较常规单有效的手段,比如:

  • User-Agent + Referer检测
  • 账号及Cookie验证
  • 验证码
  • IP限制频次

上面只些后端的手段。

下面就是展示下前端如何做一些反爬虫策略的

利用font-face属性,映射字体

例子:猫眼电影中的评分

对于票房数据,展示的并不是纯粹的数字。 页面使用了font-face定义了字符集,并通过unicode去映射展示。如下图中标出的红框。
x

font-face

利用background属性加偏移定义数字

例子:美团的电影票价

并不是显示的数字,而是通过背景的偏移量来显示不同的数字。

x

利用opacity属性穿插不相关文字

例子:微信公众号

当然,找几篇别的公众号的,好像也没像这篇这样处理。


在一段正常的话中混入别的文字

替换字体文件

例子: 去哪儿移动版

明明显示的是470,但页面元素文本是380。

看看这字体文件,只接把3和4顺序替换了。

元素定位覆盖

例子: 去哪儿

伪元素隐藏式

例子: 汽车之家

参考


一些骨骼惊奇的前端反爬虫策略
https://blog.fengcl.com/2017/10/13/front-end-strategy-impede-data-collect/
作者
frank
发布于
2017年10月14日
许可协议