大前端时代安全性如何做

之前在上家公司的时候做过一些爬虫的工作，也帮助爬虫工程师解决过一些问题。然后我写过一些文章发布到网上，之后有一些人就找我做一些爬虫的外包，内容大概是爬取小红书的用户数据和商品数据，但是我没做。我觉得对于国内的大数据公司没几家是有真正的大数据量，而是通过爬虫工程师团队不断的去各地爬取数据，因此不要以为我们的数据没价值，对于内容型的公司来说，数据是可信竞争力。那么我接下来想说的就是网络和数据的安全性问题。

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

背景

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

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

App 的数据即使采用了 HTTPS，但是对于专业的抓包工具也是可以直接拿到数据的，因此 App 的安全问题也可以做一些提高，具体的策略下文会讲到。

爬虫手段

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

解决方案

制定出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，因为对数字伪造反爬，所以拼接的文本肯定是数字的话不太会引起研究者的注意，但是数字长度太短会误伤正常的数据，所以用所熟悉的 Π) 
 
​``` 
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 
​``` 
 
# 前端拿到数据后再解密，解密后根据自定义的字体 Render 页面 
1. 先将拿到的字符串按照“3.1415926”拆分为数组 
2. 对数组的每1个数据，按照“线性变换”（y=kx+b，k和b同样按照当前的日期求解得到），逆向求解到原本的值。 
3. 将步骤2的的到的数据依次拼接，再根据 ttf 文件 Render 页面上。 

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

（编辑：青岛站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!