knowledge-kit/Chapter2 - Web FrontEnd/2.18.md

# 反爬技术研究

> 对于内容型的公司，数据的安全性很重要。对于内容公司来说，数据的重要性不言而喻。比如你一个做在线教育的平台，题目的数据很重要吧，但是被别人通过爬虫技术全部爬走了？如果核心竞争力都被拿走了，那就是凉凉。再比说有个独立开发者想抄袭你的产品，通过抓包和爬虫手段将你核心的数据拿走，然后短期内做个网站和 App，短期内成为你的劲敌。



## 一、爬虫手段

目前爬虫技术都是从渲染好的 html 页面直接找到感兴趣的节点，然后获取对应的文本.
有些网站安全性做的好，比如列表页可能好获取，但是详情页就需要从列表页点击对应的 item，将 itemId 通过 form 表单提交，服务端生成对应的参数，然后重定向到详情页（重定向过来的地址后才带有详情页的参数 detailID），这个步骤就可以拦截掉一部分的爬虫开发者



## 二、制定出**Web 端反爬技术方案**

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


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

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

#### 2.1 原始数据加密

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，因为对数字伪造反爬，所以拼接的文本肯定是数字的话不太会引起研究者的注意，但是数字长度太短会误伤正常的数据，所以用所熟悉的 Π)

```
1773 -> “1*7+24” + “3.1415926” + “7*7+24” + “3.1415926” + “7*7+24” + “3.1415926” + “3*7+24” -> 313.1415926733.1415926733.141592645
02 -> "0*7+24" + "3.1415926" + "2*7+24" -> 243.141592638
20 -> "2*7+24" + "3.1415926" + "0*7+24" -> 383.141592624
````

#### 2.2 前端拿到数据后再解密，解密后根据自定义的字体 Render 页面

1. 先将拿到的字符串按照“3.1415926”拆分为数组
2. 对数组的每1个数据，按照“线性变换”（y=kx+b，k和b同样按照当前的日期求解得到），逆向求解到原本的值。
3. 将步骤2的的到的数据依次拼接，再根据 ttf 文件 Render 页面上。


#### 2.3 后端需要根据上一步设计的协议将数据进行加密处理

下面以 **Node.js** 为例讲解后端需要做的事情

1. 首先后端设置接口路由

2. 获取路由后面的参数

3. 根据业务需要根据 SQL 语句生成对应的数据。如果是数字部分，则需要按照上面约定的方法加以转换

4. 将生成数据转换成 JSON 返回给调用者

   ```js
   // json
   var JoinOparatorSymbol = "3.1415926";
   function encode(rawData, ruleType) {
     if (!isNotEmptyStr(rawData)) {
       return "";
     }
     var date = new Date();
     var year = date.getFullYear();
     var month = date.getMonth() + 1;
     var day = date.getDate();
   
     var encodeData = "";
     for (var index = 0; index < rawData.length; index++) {
       var datacomponent = rawData[index];
       if (!isNaN(datacomponent)) {
         if (ruleType < 3) {
           var currentNumber = rawDataMap(String(datacomponent), ruleType);
           encodeData += (currentNumber * month + day) + JoinOparatorSymbol;
         }
         else if (ruleType == 4) {
           encodeData += rawDataMap(String(datacomponent), ruleType);
         }
         else {
           encodeData += rawDataMap(String(datacomponent), ruleType) + JoinOparatorSymbol;
         }
       }
       else if (ruleType == 4) {
         encodeData += rawDataMap(String(datacomponent), ruleType);
       }
   
     }
     if (encodeData.length >= JoinOparatorSymbol.length) {
       var lastTwoString = encodeData.substring(encodeData.length - JoinOparatorSymbol.length, encodeData.length);
       if (lastTwoString == JoinOparatorSymbol) {
         encodeData = encodeData.substring(0, encodeData.length - JoinOparatorSymbol.length);
       }
     }
   ```

   ```javascript
   //字体映射处理
   function rawDataMap(rawData, ruleType) {
   
     if (!isNotEmptyStr(rawData) || !isNotEmptyStr(ruleType)) {
       return;
     }
     var mapData;
     var rawNumber = parseInt(rawData);
     var ruleTypeNumber = parseInt(ruleType);
     if (!isNaN(rawData)) {
       lastNumberCategory = ruleTypeNumber;
       //字体文件1下的数据加密规则
       if (ruleTypeNumber == 1) {
         if (rawNumber == 1) {
           mapData = 1;
         }
         else if (rawNumber == 2) {
           mapData = 2;
         }
         else if (rawNumber == 3) {
           mapData = 4;
         }
         else if (rawNumber == 4) {
           mapData = 5;
         }
         else if (rawNumber == 5) {
           mapData = 3;
         }
         else if (rawNumber == 6) {
           mapData = 8;
         }
         else if (rawNumber == 7) {
           mapData = 6;
         }
         else if (rawNumber == 8) {
           mapData = 9;
         }
         else if (rawNumber == 9) {
           mapData = 7;
         }
         else if (rawNumber == 0) {
           mapData = 0;
         }
       }
       //字体文件2下的数据加密规则
       else if (ruleTypeNumber == 0) {
   
         if (rawNumber == 1) {
           mapData = 4;
         }
         else if (rawNumber == 2) {
           mapData = 2;
         }
         else if (rawNumber == 3) {
           mapData = 3;
         }
         else if (rawNumber == 4) {
           mapData = 1;
         }
         else if (rawNumber == 5) {
           mapData = 8;
         }
         else if (rawNumber == 6) {
           mapData = 5;
         }
         else if (rawNumber == 7) {
           mapData = 6;
         }
         else if (rawNumber == 8) {
           mapData = 7;
         }
         else if (rawNumber == 9) {
           mapData = 9;
         }
         else if (rawNumber == 0) {
           mapData = 0;
         }
       }
       //字体文件3下的数据加密规则
       else if (ruleTypeNumber == 2) {
   
         if (rawNumber == 1) {
           mapData = 6;
         }
         else if (rawNumber == 2) {
           mapData = 2;
         }
         else if (rawNumber == 3) {
           mapData = 1;
         }
         else if (rawNumber == 4) {
           mapData = 3;
         }
         else if (rawNumber == 5) {
           mapData = 4;
         }
         else if (rawNumber == 6) {
           mapData = 8;
         }
         else if (rawNumber == 7) {
           mapData = 3;
         }
         else if (rawNumber == 8) {
           mapData = 7;
         }
         else if (rawNumber == 9) {
           mapData = 9;
         }
         else if (rawNumber == 0) {
           mapData = 0;
         }
       }
       else if (ruleTypeNumber == 3) {
   
         if (rawNumber == 1) {
           mapData = "&#xefab;";
         }
         else if (rawNumber == 2) {
           mapData = "&#xeba3;";
         }
         else if (rawNumber == 3) {
           mapData = "&#xecfa;";
         }
         else if (rawNumber == 4) {
           mapData = "&#xedfd;";
         }
         else if (rawNumber == 5) {
           mapData = "&#xeffa;";
         }
         else if (rawNumber == 6) {
           mapData = "&#xef3a;";
         }
         else if (rawNumber == 7) {
           mapData = "&#xe6f5;";
         }
         else if (rawNumber == 8) {
           mapData = "&#xecb2;";
         }
         else if (rawNumber == 9) {
           mapData = "&#xe8ae;";
         }
         else if (rawNumber == 0) {
           mapData = "&#xe1f2;";
         }
       }
       else{
         mapData = rawNumber;
       }
     } else if (ruleTypeNumber == 4) {
       var sources = ["年", "万", "业", "人", "信", "元", "千", "司", "州", "资", "造", "钱"];
       //判断字符串为汉字
       if (/^[\u4e00-\u9fa5]*$/.test(rawData)) {
   
         if (sources.indexOf(rawData) > -1) {
           var currentChineseHexcod = rawData.charCodeAt(0).toString(16);
           var lastCompoent;
           var mapComponetnt;
           var numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
           var characters = ["a", "b", "c", "d", "e", "f", "g", "h", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
   
           if (currentChineseHexcod.length == 4) {
             lastCompoent = currentChineseHexcod.substr(3, 1);
             var locationInComponents = 0;
             if (/[0-9]/.test(lastCompoent)) {
               locationInComponents = numbers.indexOf(lastCompoent);
               mapComponetnt = numbers[(locationInComponents + 1) % 10];
             }
             else if (/[a-z]/.test(lastCompoent)) {
               locationInComponents = characters.indexOf(lastCompoent);
               mapComponetnt = characters[(locationInComponents + 1) % 26];
             }
             mapData = "&#x" + currentChineseHexcod.substr(0, 3) + mapComponetnt + ";";
           }
         } else {
           mapData = rawData;
         }
   
       }
       else if (/[0-9]/.test(rawData)) {
         mapData = rawDataMap(rawData, 2);
       }
       else {
         mapData = rawData;
       }
   
     }
     return mapData;
   }
   ```

   ```javascript
   //api
   module.exports = {
       "GET /api/products": async (ctx, next) => {
           ctx.response.type = "application/json";
           ctx.response.body = {
               products: products
           };
       },
   
       "GET /api/solution1": async (ctx, next) => {
   
           try {
               var data = fs.readFileSync(pathname, "utf-8");
               ruleJson = JSON.parse(data);
               rule = ruleJson.data.rule;
           } catch (error) {
               console.log("fail: " + error);
           }
   
           var data = {
               code: 200,
               message: "success",
               data: {
                   name: "@杭城小刘",
                   year: LBPEncode("1995", rule),
                   month: LBPEncode("02", rule),
                   day: LBPEncode("20", rule),
                   analysis : rule
               }
           }
   
           ctx.set("Access-Control-Allow-Origin", "*");
           ctx.response.type = "application/json";
           ctx.response.body = data;
       },
   
   
       "GET /api/solution2": async (ctx, next) => {
           try {
               var data = fs.readFileSync(pathname, "utf-8");
               ruleJson = JSON.parse(data);
               rule = ruleJson.data.rule;
           } catch (error) {
               console.log("fail: " + error);
           }
   
           var data = {
               code: 200,
               message: "success",
               data: {
                   name: LBPEncode("建造师",rule),
                   birthday: LBPEncode("1995年02月20日",rule),
                   company: LBPEncode("中天公司",rule),
                   address: LBPEncode("浙江省杭州市拱墅区石祥路",rule),
                   bidprice: LBPEncode("2万元",rule),
                   negative: LBPEncode("2018年办事效率太高、负面基本没有",rule),
                   title: LBPEncode("建造师",rule),
                   honor: LBPEncode("最佳奖",rule),
                   analysis : rule
               }
           }
           ctx.set("Access-Control-Allow-Origin", "*");
           ctx.response.type = "application/json";
           ctx.response.body = data;
       },
   
       "POST /api/products": async (ctx, next) => {
           var p = {
               name: ctx.request.body.name,
               price: ctx.request.body.price
           };
           products.push(p);
           ctx.response.type = "application/json";
           ctx.response.body = p;
       }
   };
   ```

   ```javascript
   //路由
   const fs = require("fs");
   
   function addMapping(router, mapping){
       for(var url in mapping){
           if (url.startsWith("GET")) {
               var path = url.substring(4);
               router.get(path,mapping[url]);
               console.log(`Register URL mapping: GET: ${path}`);
           }else if (url.startsWith('POST ')) {
               var path = url.substring(5);
               router.post(path, mapping[url]);
               console.log(`Register URL mapping: POST ${path}`);
           } else if (url.startsWith('PUT ')) {
               var path = url.substring(4);
               router.put(path, mapping[url]);
               console.log(`Register URL mapping: PUT ${path}`);
           } else if (url.startsWith('DELETE ')) {
               var path = url.substring(7);
               router.del(path, mapping[url]);
               console.log(`Register URL mapping: DELETE ${path}`);
           } else {
               console.log(`Invalid URL: ${url}`);
           }
   
       }
   }
   
   
   function addControllers(router, dir){
       fs.readdirSync(__dirname + "/" + dir).filter( (f) => {
           return f.endsWith(".js");
       }).forEach( (f) => {
           console.log(`Process controllers:${f}...`);
           let mapping = require(__dirname + "/" + dir + "/" + f);
           addMapping(router,mapping);
       });
   }
   
   module.exports = function(dir){
       let controllers = dir || "controller";
       let router = require("koa-router")();
   
       addControllers(router,controllers);
       return router.routes();
   };
   
   
   ```

   

#### 2.4 前端根据服务端返回的数据逆向解密

  ```javascript
  $("#year").html(getRawData(data.year,log));
  
  // util.js
  var JoinOparatorSymbol = "3.1415926";
  function isNotEmptyStr($str) {
    if (String($str) == "" || $str == undefined || $str == null || $str == "null") {
      return false;
    }
    return true;
  }
  
  function getRawData($json,analisys) {
    $json = $json.toString();
    if (!isNotEmptyStr($json)) {
      return;
    }
    
    var date= new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var datacomponents = $json.split(JoinOparatorSymbol);
    var orginalMessage = "";
    for(var index = 0;index < datacomponents.length;index++){
      var datacomponent = datacomponents[index];
        if (!isNaN(datacomponent) && analisys < 3){
            var currentNumber = parseInt(datacomponent);
            orginalMessage += (currentNumber -  day)/month;
        }
        else if(analisys == 3){
           orginalMessage += datacomponent;
        }
        else{
          //其他情况待续，本 Demo 根据本人在研究反爬方面的技术并实践后持续更新
        }
    }
    return orginalMessage;
  }
  
  ```

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



#### 2.5 根据 ttf 文件 Render 页面

  ![自定义字体文件](https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/WX20180724-184215.png)
  上面计算的到的1773，然后根据ttf文件，页面看到的就是1995

#### 2.6 加密混淆

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

  [JS混淆工具](http://www.javascriptobfuscator.com/Javascript-Obfuscator.aspx)

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




## 　三、反爬升级版

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

1. 组合拳1: 字体文件不要固定，虽然请求的链接是同一个，但是根据当前的时间戳的最后一个数字取模，比如 Demo 中对4取模，有4种值 0、1、2、3。这4种值对应不同的字体文件，所以当爬虫绞尽脑汁爬到1种情况下的字体时，没想到再次请求，字体文件的规则变掉了 😂
2. 组合拳2: 前面的规则是字体问题乱序，但是只是数字匹配打乱掉。比如 **1** -> **4**, **5** -> **8**。接下来的套路就是每个数字对应一个 **unicode 码** ，然后制作自己需要的字体，可以是 .ttf、.woff 等等。

![网页检察元素得到的效果](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180726-161418.png)
![接口返回数据](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180726-161429.png)

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



## 四、反爬手段再升级

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

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

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

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

   本人将方案1实现到 Demo 中了。



#### 关键步骤

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

```css
//style.css
@font-face {
  font-family: "NumberFont";
  src: url('http://127.0.0.1:8080/Util/analysis');
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "CharacterFont";
  src: url('http://127.0.0.1:8080/Util/map');
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2 {
  font-family: "NumberFont";
}

h3,a{
  font-family: "CharacterFont";
}
```


![接口效果](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180810-095006%402x.png)
![审查元素效果](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180810-095124%402x.png)



传送门：[字体制作的步骤](https://blog.csdn.net/fdipzone/article/details/68166388)、[ttf转svg](https://everythingfonts.com/ttf-to-svg)、[字体映射规则](https://icomoon.io/app/#/select/font)

实现效果：

    1. 页面上看到的数据跟审查元素看到的结果不一致
    2. 去查看接口数据跟审核元素和界面看到的三者不一致
    3. 页面每次刷新之前得出的结果更不一致
    4. 对于数字和汉字的处理手段都不一致

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



  ![数字反爬-网页显示效果、审查元素、接口结果情况1](https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/WX20180810-151046@2x.png)
  ![数字反爬-网页显示效果、审查元素、接口结果情况2](https://github.com/FantasticLBP/knowledge-kit/raw/master/assets/WX20180810-151203@2x.png)
  ![数字反爬-网页显示效果、审查元素、接口结果情况3](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180810-151239@2x.png)
  ![数字反爬-网页显示效果、审查元素、接口结果情况4](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180810-151308@2x.png)
  ![汉字反爬-网页显示效果、审查元素、接口结果情况1](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180810-095006%402x.png)
  ![汉字反爬-网页显示效果、审查元素、接口结果情况2](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180810-095124%402x.png)

<hr>


前面的 ttf 转 svg 网站当 ttf 文件太大会限制转换，让你购买，贴出个新链接。[ttf转svg](https://convertio.co/zh/font-converter/)



## [Demo 地址](https://github.com/FantasticLBP/Anti-WebSpider)

  ![效果演示](https://raw.githubusercontent.com/FantasticLBP/Anti-WebSpider/master/Anti-WebSpider.gif)



 运行步骤

```powershell
//客户端。先查看本机 ip 在 Demo/Spider-develop/Solution/Solution1.js 和 Demo/Spider-develop/Solution/Solution2.js  里面将接口地址修改为本机 ip

$ cd Demo
$ ls
REST		Spider-release	file-Server.js
Spider-develop	Util		rule.json
$ node file-Server.js 
Server is runnig at http://127.0.0.1:8080/

//服务端 先安装依赖
$ cd REST/
$ npm install
$ node app.js 
```