hello，大家好，今天给大家介绍一下爬虫反爬虫的技术方案研究和落地，对于内容型的公司，数据的安全性不言而喻。一个在线教育的平台，题目的数据很重要吧，但是被别人通过爬虫技术全部爬走了，那结果就是“凉凉”。再比说有个独立开发者想抄袭你的产品，通过抓包和爬虫手段将你核心的数据拿走，然后短期内做个网站和 App，短期内成为你的劲敌。成果：segmentfault 上发表过文章，获赞 148。

大前端时代安全性如何做

如果想了解大前端（Web、App、接口）层面的安全性，可以查看我的这篇文章。

爬虫工程师的爬虫手段

• 从渲染好的 html 页面直接找到感兴趣的节点，然后获取对应的文本
• 去分析对应的接口数据，更加方便、精确地获取数据

制定出 Web 端反爬技术方案

本人从这2个角度（网页所见非所得、查接口请求没用）出发，制定了下面的反爬方案。

• 使用HTTPS 协议
• 单位时间内限制掉请求次数过多，则封锁该账号
• 前端技术限制 （接下来是核心技术）

比如需要正确显示的数据为“19950220”

1. 先按照自己需求利用相应的规则（数字乱序映射，比如正常的0对应还是0，但是乱序就是 0 <-> 1，1 <-> 9,3 <-> 8,...）制作自定义字体（ttf）
2. 根据上面的乱序映射规律，求得到需要返回的数据 19950220 -> 17730220
3. 对于第一步得到的字符串，依次遍历每个字符，将每个字符根据按照线性变换（y=kx+b）。线性方程的系数和常数项是根据当前的日期计算得到的。比如当前的日期为“2018-07-24”，那么线性变换的 k 为 7，b 为 24。
4. 然后将变换后的每个字符串用“3.1415926”拼接返回给接口调用者。(为什么是3.1415926，因为对数字伪造反爬，所以拼接的文本肯定是数字的话不太会引起研究者的注意，但是数字长度太短会误伤正常的数据，所以用所熟悉的Π)

比如后端返回的是323.14743.14743.1446，根据我们约定的算法，可以的到结果为1773

image

上面计算的到的1773，然后根据ttf文件，页面看到的就是1995

• 然后为了防止爬虫人员查看 JS 研究问题，所以对 JS 的文件进行了加密处理。如果你的技术栈是 Vue 、React 等，webpack 为你提供了 JS 加密的插件，也很方便处理

JS混淆工具

• 个人觉得这种方式还不是很安全。于是想到了各种方案的组合拳。比如

反爬升级版

个人觉得如果一个前端经验丰富的爬虫开发者来说，上面的方案可能还是会存在被破解的可能，所以在之前的基础上做了升级版本

• 组合拳1: 字体文件不要固定，虽然请求的链接是同一个，但是根据当前的时间戳的最后一个数字取模，比如 Demo 中对4取模，有4种值 0、1、2、3。这4种值对应不同的字体文件，所以当爬虫绞尽脑汁爬到1种情况下的字体时，没想到再次请求，字体文件的规则变掉了

• 组合拳2: 前面的规则是字体问题乱序，但是只是数字匹配打乱掉。比如 1 -> 4, 5 -> 8。接下来的套路就是每个数字对应一个 unicode 码 ，然后制作自己需要的字体，可以是 .ttf、.woff 等等。

image

这几种组合拳打下来。对于一般的爬虫就放弃了。

反爬手段再升级

上面说的方法主要是针对数字做的反爬手段，如果要对汉字进行反爬怎么办？接下来提供几种方案

方案1: 对于你站点频率最高的词云，做一个汉字映射，也就是自定义字体文件，步骤跟数字一样。先将常用的汉字生成对应的 ttf 文件；根据下面提供的链接，将 ttf 文件转换为 svg 文件，然后在下面的“字体映射”链接点进去的网站上面选择前面生成的 svg 文件，将svg文件里面的每个汉字做个映射，也就是将汉字专为 unicode 码（注意这里的 unicode 码不要去在线直接生成，因为直接生成的东西也就是有规律的。我给的做法是先用网站生成，然后将得到的结果做个简单的变化，比如将“e342”转换为 “e231”）；然后接口返回的数据按照我们的这个字体文件的规则反过去映射出来。

方案2: 将网站的重要字体，将 html 部分生成图片，这样子爬虫要识别到需要的内容成本就很高了，需要用到 OCR。效率也很低。所以可以拦截钓一部分的爬虫

方案3: 看到携程的技术分享“反爬的最高境界就是 Canvas 的指纹，原理是不同的机器不同的硬件对于 Canvas 画出的图总是存在像素级别的误差，因此我们判断当对于访问来说大量的 canvas 的指纹一致的话，则认为是爬虫，则可以封掉它”。

关键步骤

1. 先根据你们的产品找到常用的关键词，生成词云
2. 根据词云，将每个字生成对应的 unicode 码
3. 将词云包括的汉字做成一个字体库
4. 将字体库 .ttf 做成 svg 格式，然后上传到 icomoon 制作自定义的字体，但是有规则，比如 “年” 对应的 unicode 码是 “\u5e74” ，但是我们需要做一个 恺撒加密 ，比如我们设置 偏移量 为1，那么经过恺撒加密 “年”对应的 unicode 码是“\u5e75” 。利用这种规则制作我们需要的字体库
5. 在每次调用接口的时候服务端做的事情是：服务端封装某个方法，将数据经过方法判断是不是在词云中，如果是词云中的字符，利用规则（找到汉字对应的 unicode 码，再根据凯撒加密，设置对应的偏移量，Demo 中为1，将每个汉字加密处理）加密处理后返回数据
6. 客户端做的事情：
   • 先引入我们前面制作好的汉字字体库
   • 调用接口拿到数据，显示到对应的 Dom 节点上
   • 如果是汉字文本，我们将对应节点的 css 类设置成汉字类，该类对应的 font-family 是我们上面引入的汉字字体库

image

推荐做爬虫的小伙伴们看一下这个开源项目，可以让你了解到这个东西是如何做的，知其然并知其所以然。

开源地址：https://github.com/FantasticLBP/Anti-WebSpider

今天的推荐不知道大家喜欢吗？如果你们喜欢话，请在文章底部留言或点赞，以表示对我的支持，你们的留言，点赞，转发关注是我持续更新的动力哦！

关注公众号回复："1024"，免费领取一大波学习资源，先到先得哦！

关注我，领取免费学习资源