前端电子表数字字体_大前端时代安全性如何做

之前在上家公司的时候做过一些爬虫的工作，也帮助爬虫工程师解决过一些问题。然后我写过一些文章发布到网上，之后有一些人就找我做一些爬虫的外包，内容大概是爬取小红书的用户数据和商品数据，但是我没做。我觉得对于国内的大数据公司没几家是有真正的大数据量，而是通过爬虫工程师团队不断的去各地爬取数据，因此不要以为我们的数据没价值，对于内容型的公司来说，数据是可信竞争力。那么我接下来想说的就是网络和数据的安全性问题。 对于内容型的公司，数据的安全性很重要。对于内容公司来说，数据的重要性不言而喻。比如你一个做在线教育的平台，题目的数据很重要吧，但是被别人通过爬虫技术全部爬走了？如果核心竞争力都被拿走了，那就是凉凉。再比说有个独立开发者想抄袭你的产品，通过抓包和爬虫手段将你核心的数据拿走，然后短期内做个网站和 App，短期内成为你的劲敌。

背景

目前通过 App 中的 网页分析后，我们的数据安全性做的较差，有以下几个点存在问题：

1. 网站的数据通过最早期的前后端分离来实现。稍微学过 Web 前端的工程师都可以通过神器 Chrome 分析网站，进而爬取需要的数据。打开 「Network」就可以看到网站的所有网络请求了，哎呀，不小心我看到了什么？没错就是网站的接口信息都可以看到了。比如 “detail.json?itemId=141529859”。或者你的网站接口有些特殊的判断处理，将一些信息存储到 sessionStorage、cookie、localStorage 里面，有点前端经验的爬虫工程师心想”嘿嘿嘿，这不是在裸奔数据么“。或者有些参数是通过 JavaScript 临时通过函数生成的。问题不大，工程师也可以对网页元素进行查找，找到关键的 id、或者 css 类名，然后在 "Search“ 可以进行查找，找到对应的代码 JS 代码，点击查看代码，如果是早期前端开发模式那么代码就是裸奔的，跟开发者在自己的 IDE 里面看到的内容一样，有经验的爬虫就可以拿这个做事情，因此安全性问题亟待解决。

想知道 Chrome 更多的调试使用技巧，看看这篇文章

1. App 的数据即使采用了 HTTPS，但是对于专业的抓包工具也是可以直接拿到数据的，因此 App 的安全问题也可以做一些提高，具体的策略下文会讲到。 想知道 Charles 的更多使用技巧，可以看看这篇文章

爬虫手段

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

解决方案

制定出Web 端反爬技术方案

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

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

# 比如需要正确显示的数据为“19950220”1. 先按照自己需求利用相应的规则(数字乱序映射，比如正常的0对应还是0，但是乱序就是 0  1，1  9,3  8,...)制作自定义字体(ttf)2. 根据上面的乱序映射规律，求得到需要返回的数据 19950220 -> 177302203. 对于第一步得到的字符串，依次遍历每个字符，将每个字符根据按照线性变换(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.14159264502 -> "0*7+24" + "3.1415926" + "2*7+24" -> 243.14159263820 -> "2*7+24" + "3.1415926" + "0*7+24" -> 383.141592624​```# 前端拿到数据后再解密，解密后根据自定义的字体 Render 页面1. 先将拿到的字符串按照“3.1415926”拆分为数组2. 对数组的每1个数据，按照“线性变换”(y=kx+b，k和b同样按照当前的日期求解得到)，逆向求解到原本的值。3. 将步骤2的的到的数据依次拼接，再根据 ttf 文件 Render 页面上。

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

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

• 首先后端设置接口路由
• 获取路由后面的参数
• 根据业务需要根据 SQL 语句生成对应的数据。如果是数字部分，则需要按照上面约定的方法加以转换。
• 将生成数据转换成 JSON 返回给调用者

// 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);

}

}

//字体映射处理

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 = "";

}

else if (rawNumber == 2) {

mapData = "";

}

else if (rawNumber == 3) {

mapData = "";

}

else if (rawNumber == 4) {

mapData = "";

}

else if (rawNumber == 5) {

mapData = "";

}

else if (rawNumber == 6) {

mapData = "";

}

else if (rawNumber == 7) {

mapData = "";

}

else if (rawNumber == 8) {

mapData = "";

}

else if (rawNumber == 9) {

mapData = "";

}

else if (rawNumber == 0) {

mapData = "";

}

}

else{

mapData = rawNumber;

}

} else if (ruleTypeNumber == 4) {

var sources = ["年