反击爬虫，前端工程师的脑洞能够有多大？

1. 前言

对于一张网页，咱们每每但愿它是结构良好，内容清晰的，这样搜索引擎才能准确地认知它。
而反过来，又有一些情景，咱们不但愿内容能被轻易获取，比方说电商网站的交易额，教育网站的题目等。由于这些内容，每每是一个产品的生命线，必须作到有效地保护。这就是爬虫与反爬虫这一话题的由来。

2. 常见反爬虫策略

可是世界上没有一个网站，能作到完美地反爬虫。

若是页面但愿能在用户面前正常展现，同时又不给爬虫机会，就必需要作到识别真人与机器人。所以工程师们作了各类尝试，这些策略大多采用于后端，也是目前比较常规单有效的手段，好比：

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

而爬虫是能够无限逼近于真人的，好比：

• chrome headless或phantomjs来模拟浏览器环境
• tesseract识别验证码
• 代理IP淘宝就能买到

因此咱们说，100%的反爬虫策略？不存在的。
更多的是体力活，是个难易程度的问题。

不过做为前端工程师，咱们能够增长一下游戏难度，设计出一些很(sang)有(xin)意(bing)思(kuang)的反爬虫策略。

3. 前端与反爬虫

3.1 font-face拼凑式

例子：猫眼电影

猫眼电影里，对于票房数据，展现的并非纯粹的数字。
页面使用了font-face定义了字符集，并经过unicode去映射展现。也就是说，除去图像识别，必须同时爬取字符集，才能识别出数字。

而且，每次刷新页面，字符集的url都是有变化的，无疑更大难度地增长了爬取成本。

3.2 background拼凑式

例子：美团

与font的策略相似，美团里用到的是background拼凑。数字实际上是图片，根据不一样的background偏移，显示出不一样的字符。

而且不一样页面，图片的字符排序也是有区别的。不过理论上只需生成0-9与小数点，为什么有重复字符就不是很懂。

页面A：

页面B：

3.3 字符穿插式

例子：微信公众号文章

某些微信公众号的文章里，穿插了各类迷之字符，而且经过样式把这些字符隐藏掉。
这种方式虽然使人震惊…但其实没有太大的识别与过滤难度，甚至能够作得更好，不过也算是一种脑洞吧。

对了，个人手机流量能够找谁报销吗？

3.4 伪元素隐藏式

例子：汽车之家

汽车之家里，把关键的厂商信息，作到了伪元素的content里。
这也是一种思路：爬取网页，必须得解析css，须要拿到伪元素的content，这就提高了爬虫的难度。

3.5 元素定位覆盖式

例子：去哪儿

还有热爱数学的去哪儿，对于一个4位数字的机票价格，先用四个i标签渲染，再用两个b标签去绝对定位偏移量，覆盖故意展现错误的i标签，最后在视觉上造成正确的价格…

这说明爬虫会解析css还不行，还得会作数学题。

3.6 iframe异步加载式

例子：网易云音乐

网易云音乐页面一打开，html源码里几乎只有一个iframe，而且它的src是空白的：about:blank。接着js开始运行，把整个页面的框架异步塞到了iframe里面…

不过这个方式带来的难度并不大，只是在异步与iframe处理上绕了个弯（或者有其余缘由，不彻底是基于反爬虫考虑），不管你是用selenium仍是phantom，都有API能够拿到iframe里面的content信息。

3.7 字符分割式

例子：全网代理IP

在一些展现代理IP信息的页面，对于IP的保护也是大费周折。

他们会先把IP的数字与符号分割成dom节点，再在中间插入迷惑人的数字，若是爬虫不知道这个策略，还会觉得本身成功拿到了数值；不过若是爬虫注意到，就很好解决了。

3.8 字符集替换式

例子：去哪儿移动侧

一样会欺骗爬虫的还有去哪儿的移动版。

html里明明写的3211，视觉上展现的倒是1233。原来他们从新定义了字符集，3与1的顺序恰好调换得来的结果…