前端工程师的反击爬虫技术脑洞打开

1. 前言

对于一张网页，我们往往希望它是结构良好，内容清晰的，这样搜索引擎才能准确地认知它。

而反过来，又有一些情景，我们不希望内容能被轻易获取，比方说电商网站的交易额，教育网站的题目等。因为这些内容，往往是一个产品的生命线，必须做到有效地保护。这就是爬虫与反爬虫这一话题的由来。

2. 前端与反爬虫

2.1 font-face拼凑式

例子：猫眼电影

猫眼电影里，对于票房数据，展示的并不是纯粹的数字。

页面使用了font-face定义了字符集，并通过unicode去映射展示。也就是说，除去图像识别，必须同时爬取字符集，才能识别出数字。

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

2.2 background拼凑式

例子：美团

与font的策略类似，美团里用到的是background拼凑。数字其实是图片，根据不同的background偏移，显示出不同的字符。

3. 常见反爬虫策略

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

如果页面希望能在用户面前正常展示，同时又不给爬虫机会，就必须要做到识别真人与机器人。因此工程师们做了各种尝试，这些策略大多采用于后端，也是目前比较常规单有效的手段，比如：

User-Agent + Referer检测

账号及Cookie验证

验证码

IP限制频次

而爬虫是可以无限逼近于真人的，比如：

chrome headless或phantomjs来模拟浏览器环境

tesseract识别验证码

代理IP淘宝就能买到

所以我们说，100%的反爬虫策略?不存在的。

更多的是体力活，是个难易程度的问题。

不过作为前端工程师，我们可以增加一下游戏难度，设计出一些很(sang)有(xin)意(bing)思(kuang)的反爬虫策略。