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

前言

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

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

上面只些后端的手段。

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

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

例子：猫眼电影中的评分

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

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

例子：美团的电影票价

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

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

例子：微信公众号

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

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

替换字体文件

例子： 去哪儿移动版

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

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

元素定位覆盖

例子： 去哪儿

伪元素隐藏式

例子： 汽车之家

参考

• CSS3 @font-face 规则
• 前端工程师的脑洞可以有多大