上周末百度三面面试官问的一个我最感兴趣的问题莫过于“对于淘宝京东之类的电商网站，防止商品价格被爬取，你会有哪些设计思路 
”在此之前，cc只是会通过代理IP手段来绕过一些反爬虫设置进行网站爬虫，但是没有思考过这样具体的应用场景。这篇Blog将梳理下常见的反爬虫策略及解决方式，毕竟没有100%的反爬虫策略，只是说在设计的过程中相对增大爬虫难度。
常见的反爬虫及解决方法
前端的反爬虫实例
前端通常可以设计一些有趣的内容来增加爬虫的难度和成本，从而实现反爬虫的目的。
- Font-Face拼凑式
场景： 猫眼电影的票房数据
具体方法：页面使用font-face定义字符集，并且通过unicode去映射展示。除去图像识别，还要同时爬取字符集，才能识别出数字，并且伴随着刷新页面，字符集的url会不断发生变化，定期更新字体文件和映射表可以来增大难度。
介绍： @font-face 是 CSS3 的一个模块，其主要作用是可将自定义字体嵌入到网页中，让网页字体的运用不只是限定在 Web 安全字体中
font-face加载网络字体，也可以创建一套字体，之后自定义一套映射关系表设置0xefab是映射字符1,0xeba2是映射字符2，以此类推。网页的源码只会显示编码，不影响正常用户的浏览，因为浏览器会记载css的font渲染好，实时显示在网页中
破解方法： 人工处理下，读出请求html文件对应数字的unicode,自己更新映射表，可以设置自动转换，还可以用在其他地方。
- background拼凑式
场景： 美团的价格
具体方法： 美团用的background拼凑，数字其实是图片，根据不同的background偏移，显示出不同的字符。在不同的页面上，图片的字符排序也是有区别的，理论上只需要生成0-9与小数点。利用css混淆视听，用户可以看到网页内容，但是代码上显示是错误的，所见非所得。
- 伪元素隐藏式
场景： 汽车之家的厂商信息
具体方法： 把关键的厂商信息，做到了伪元素的content中。这样就会导致爬网页的时候，不得不解析css，因为需要拿到伪元素的content，这样就变相地增大了爬虫的难度。但是在框架好像行不通，比如vue中如何在css的content中显示价格。
- 元素定位覆盖式
场景： 去哪儿的机票价格
具体方法： 将价格数据按不同的位进行分别处理，比如对于一个4位数字的机票价格，先用四个i标签渲染，再用两个b标签去绝对定位偏移量，覆盖故意展示错误的i标签，最后在视觉上形成正确的价格…
解决方法： 结合css计算价格
- iFrame异步加载式
场景： 网易云音乐
具体方式： 网易页面的html源码中几乎只有一个iframe,并且src是空白的：about: blank。接着js开始运行，整个页面的框架异步塞到了iframe里面
不过这个方式带来的难度并不大，只是在异步与iframe处理上绕了个弯（或者有其他原因，不完全是基于反爬虫考虑），无论你是用selenium还是phantom，都有API可以拿到iframe里面的content信息。
- 字符分割式
场景： 全网代理IP
具体方式： 在代理IP信息的页面，需要对IP进行保护，具体办法是把IP数字和符号分割为dom及诶单，再在中间插入迷惑人的数字，爬虫不注意的情况下，很容易误以为拿到了成功的数值；但一旦发觉，很容易解决。
- 字符穿插式
场景： 微信公众号文章
具体方法： 为了保护原文章，在某些微信公众号的文章里，穿插了各种迷之字符，并且通过样式把这些字符隐藏掉。
这种方式虽然令人震惊…但其实没有太大的识别与过滤难度，甚至可以做得更好，不过也算是一种脑洞吧。
- 字符集替换式
场景： 去哪儿移动版
具体方法： 重新定义字符集，与实际的字符显示不一致，html里明明写的3211，视觉上展示的却是1233。原来他们重新定义了字符集，3与1的顺序刚好调换得来的结果…
- canvas指纹
在绘制canvas图片的时候，不同机器，不同浏览器绘制的图片特征是相同并且独一无二的，这样的，只要提取最简单的md5值便可以唯一标识和跟踪这个用户
- 在图片格式上，不同的web浏览器使用了不同的图形处理引擎，不同的图片导出项，不同的默认压缩等级
- 在像素级别上，操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素级别的渲染操作
- 操作系统的分辨率，浏览器版本，安装浏览器插件，操作系统的分辨率，下载的字体，所在时区和其他信息。每110万人中，才会有一个人的浏览器跟你有一样的设置。
反爬虫与爬虫真的是相爱相杀的死对头了，哈哈哈哈哈哈哈~
