利用font-face实现前端反爬虫

1473 字

7 分钟

利用font-face实现前端反爬虫

2023-11-22

前端

爬虫

什么是爬虫#

网络爬虫，是一个自动提取网页的程序，它为搜索引擎从万维网上下载网页，是搜索引擎的重要组成。

爬取数据主要分为：

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

为什么需要反爬虫？#

网络爬虫会根据特定策略尽可能多的“爬过”网站中的高价值信息，占用服务器带宽，增加服务器的负载
恶意利用网络爬虫对Web服务发动DoS攻击，可能使Web服务资源耗尽而不能提供正常服务
恶意利用网络爬虫将免费查询的资源批量抓走，各种敏感信息，造成网站的核心数据被窃取，导致公司丧失竞争力。
状告爬虫成功的几率小，爬虫在国内还是个擦边球，就是有可能可以起诉成功，也可能完全无效。

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

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

使用 HTTPS 协议
登陆态下，单位时间内限制掉请求次数过多（等级1），则降低频率给账号返回数据
登陆态下，单位时间内限制掉请求次数过多（等级2），则返回错误的数据给该账号
登陆态下，单位时间内限制掉请求次数过多（等级3），则封锁该账号
前端技术限制（接下来是核心技术）

该方案也可以覆盖 OCR 爬取场景。OCR 的前提是页面渲染完毕，页面所需业务数据需要通过接口获取。所以基于用户行为采集分析，基于日志分析用户在时间范围内的请求频次、用户行为是否正常，如果不正常，说明可能是爬虫程序，依据用户单位时间内情况恶略程度，可以采用降频、返回错误数据、封锁账号的策略。

服务端加密#

首先后端与前端约定好数据加密规则

随机映射表（比如 0 -> 3, 1 -> 7, 2 -> 4, 3 -> 5, 4 -> 1, 5 -> 0, 6 -> 6, 7 -> 9, 8 -> 2, 9 -> 8）
约定好的规则加密（根据方程 y = kx + b 其中，k 为当前的月份，b 为当月的号数，线性方程的系数和常数项是根据当前的日期计算得到的。比如当前的日期为“2023-11-22”，那么线性变换的 k 为 11，b 为 22。）
将数字转换为字符串，使用3.1415926拼接（比如数字123 变为1 + ‘3.1415926’ + 2 + ‘3.1415926’ + 3，最终结果为’13.141592623.141592623.1415926’）

客户端解密#

将后端返回的数据以3.1415926为分隔符转换成数组
将数据解密 x = (y - b) / k
将数组转换成字符串
给数据添加对应的字体文件（根据服务端的映射制作的）

实现效果#

接口定义

前端反爬虫.png

接口返回的数据

dom结构中的数据

页面中显示的数据

实现过程#

服务端#

以node.js为例

1
const encodeNumberRule1 = (number) => {
2
  const numMap = {
3
    0: 3,
4
    1: 7,
5
    2: 4,
6
    3: 5,
7
    4: 1,
8
    5: 0,
9
    6: 6,
10
    7: 9,
11
    8: 2,
12
    9: 8,
13
  };
14
  const date = dayjs().format('YYYY-MM-DD');
15
  const k = Number(date.split('-')[1]);
16
  const b = Number(date.split('-')[2]);
17
  const result = String(number).split('').map((item) => {
18
    if (isNaN(item)) {
19
      return item;
20
    }
21
    return numMap[item] * k + b;
22
  }).join('3.1415926');
23
  return result;
24
};
25

26
function encodeNumberRule2(number) {
27
  // numMap 为随机16进制映射表
28
  const numMap = {
29
    0: 0xe6a7,
30
    1: 0xf257,
31
    2: 0xa87e,
32
    3: 0xb2c1,
33
    4: 0xc7b2,
34
    5: 0xa9f2,
35
    6: 0xe2c7,
36
    7: 0xf82b,
37
    8: 0xc1b2,
38
    9: 0xc8f6,
39
  };
40

41
  const date = dayjs().format('YYYY-MM-DD');
42
  const k = Number(date.split('-')[1]);
43
  const b = Number(date.split('-')[2]);
44
  const result = String(number).split('').map((item) => {
45
    if (item === '.' || item === '-') {
46
      return item;
47
    }
48
    return (numMap[item] * k + b).toString(16);
49
  }).join('3.1415926');
50
  console.log('result', result);
51
  return result.toString();
52
}
53

54
app.get('/api/test', (req, res) => {
55
  res.send({
56
    code: 200,
57
    msg: 'test',
58
    data: [
59
      {
60
        x: encodeNumberRule1(123),
61
        y: encodeNumberRule1(-123.2),
62
        rule: 1,
63
      },
64
      {
65
        x: encodeNumberRule2(123),
66
        y: encodeNumberRule2(-123.2),
67
        rule: 2,
68
      }
69
    ],
70
    success: true,
71
  });
72
});

客户端#

制作字体文件

将字体文件转换成svg格式（ttf转svg）
选取对应的字符，根据与后端约定的映射表修改unicode编码

下载改完unicode后的字体并转为woff与woff2，在css中设置对应字体（ttf转woff）

1
@font-face {
2
  font-family: 'icomoon-num-1';
3
  src: url('./assets/font/icomoon-num-1/icomoon.woff2') format('woff2'),
4
    url('./assets/font/icomoon-num-1/icomoon.woff') format('woff');
5
  font-weight: normal;
6
  font-style: normal;
7
  font-display: swap;
8
}
9

10
@font-face {
11
  font-family: 'icomoon-num-2';
12
  src: url('./assets/font/icomoon-num-2/icomoon-num-2.woff2') format('woff2'),
13
    url('./assets/font/icomoon-num-2/icomoon-num-2.woff') format('woff');
14
  font-weight: normal;
15
  font-style: normal;
16
  font-display: swap;
17
}
18

19
.num-font-rule-1 {
20
  font-family: 'icomoon-num-1', sans-serif;
21
}
22
.num-font-rule-2 {
23
  font-family: 'icomoon-num-2', sans-serif;
24
}

编写解密函数

1
const decryptNumRule1 = (num) => {
2
  if (!num) {
3
    return '';
4
  }
5
  // 1. 将字符串转换成数组以3.1415926为分隔符
6
  const arr = num.split('3.1415926');
7
  const date = dayjs().format('YYYY-MM-DD');
8
  const k = Number(date.split('-')[1]);
9
  const b = Number(date.split('-')[2]);
10
  // 2. 将数组中的每一项转换成数字 x = (y - b) / k
11
  const result = arr.map(item => {
12
    if (isNaN(Number(item))) {
13
      return item;
14
    }
15
    const y = Number(item);
16
    return (y - b) / k;
17
  });
18
  // 3. 将数组转换成字符串
19
  return result.join('');
20
};
21

22
const decryptNumRule2 = (num) => {
23
  if (!num) {
24
    return '';
25
  }
26
  // 1. 将字符串转换成数组以3.1415926为分隔符
27
  const arr = num.split('3.1415926');
28
  const date = dayjs().format('YYYY-MM-DD');
29
  const k = Number(date.split('-')[1]);
30
  const b = Number(date.split('-')[2]);
31
  // 2. 将数组中的每一项转换成数字 x = (y - b) / k
32
  const result = arr.map(item => {
33
    if (isNaN(parseInt(item, 16))) {
34
      console.log(item);
35
      return item;
36
    }
37
    const y = parseInt(item, 16);
38
    return `&#x${((y - b) / k).toString(16)};`;
39
  });
40
  // 3. 将数组转换成字符串
41
  return result.join('');
42
};

开发中使用

注意：在使用四位数16进制的unicode编码时需要使用dangerouslySetInnerHTML渲染，否则将会在页面中直接显示对应的字符串，对应Vue中需要使用v-html指令

1
export default function Test() {
2
  return <>
3
    {
4
      testData.map((item, index) => {
5
        return <div key={index}>
6
          {
7
            item.rule === 1 && <>
8
              <p className='num-font-rule-1'>{utils.decryptNumRule1(item.x)}</p>
9
              <p className='num-font-rule-1'>{utils.decryptNumRule1(item.y)}</p>
10
            </>
11
          }
12
          {
13
            item.rule === 2 && <>
14
              <p className='num-font-rule-2' dangerouslySetInnerHTML={{
15
                __html: utils.decryptNumRule2(item.x),
16
              }} />
17
              <p className='num-font-rule-2' dangerouslySetInnerHTML={{
18
                __html: utils.decryptNumRule2(item.y),
19
              }} />
20
            </>
21
          }
22
          <br />
23
        </div>;
24
      })
25
    }
26
  </>
27
}