一种web前端数据保护实现方法与流程

1.本发明涉及前端信息处理技术领域，具体涉及一种web前端数据保护实现方法。


背景技术：

2.当前很多web应用和网站开发都是基于web技术，都会涉及脚本语言；客户端使用浏览器访问页面时自动下载并运行javascript脚本语言完成特定的功能，而javascript是一种直译式脚本语言，代码是以明文形式显示的，而且基于javascript的ajax技术通常也是通过请求后台接口，以形如json、xml和text等格式的明文数据实现的。而这一整个过程，对于客户端来说，其javascript代码和接口数据都是透明的可见的，很容易被盗用。
3.当前对javascript代码保护一般都是通过代码混淆方式来实现，即对代码中的局部变量和局部函数进行随机名称替换，并去除空白符从而使代码可读性变差，然而此保护方法对于该专业的技术人员来说几乎起不到保护作用，甚至是没有任何保护作用。


技术实现要素：

4.本发明的目的在于提供一种web前端数据保护实现方法，以期解决背景技术中存在的问题。
5.为了实现上述目的，本发明采用以下技术方案：
6.一种web前端数据保护实现方法，包括以下步骤：
7.使用代码混淆方式对待保护站点涉及用户数据处理和收发的js模块进行代码混淆；
8.将混淆后的代码用于前端部署服务，保证前端浏览器下载的js模块相关资源是经过代码混淆后的；
9.构建加密服务接口用于处理js模块发出的用户数据加密请求，接收明文数据并在服务端加密后，返回密文数据，以api的形式提供服务；
10.前端框架处理用户请求时，js模块从前端输入框获取到用户数据，将数据格式化后，调用远程的加密服务接口对数据进行加密处理，请求中需要带上系统当前时间戳；
11.加密服务接口收到数据加密请求后，验证时间戳是否处于正常的误差范围内，超过误差表明存在请求重放风险，返回错误信息；未超过误差范围则返回加密后的用户请求数据；
12.js模块收到加密的用户数据后，判断返回结果是否正常，结果异常表明存在请求重放攻击，终止本次请求；结果正常则继续执行相关的业务流程，将加密后的用户数据发送至后端业务服务；
13.业务服务收到用户数据后，将加密的用户数据发送至加密服务接口进行解密，如果解密失败直接终止请求流程，否则将得到解密后的用户数据后按业务逻辑进行处理。
14.在一些实施例中，所述代码混淆方式包括：变量和字符串混淆，所述变量和字符串混淆为通过编码或加密的方式将代码中的字符串和变量名转化为可读性差的无规则字符
串。
15.在一些实施例中，所述代码混淆方式包括：花指令注入，所述花指令注入为在代码中的随机位置插入不会被执行或执行后对整体代码逻辑没有影响的僵尸代码。
16.在一些实施例中，所述代码混淆方式包括：代码调试保护，所述代码调试保护为在代码中通过debugger使调试进入死循环。
17.在一些实施例中，所述代码混淆方式包括：代码压缩和防止格式化，所述代码压缩和防止格式化为将js模块压缩为一整行，同时通过构造无限递归使得代码在格式化过程中陷入无限递归。
18.本技术所提供的一种web前端数据保护实现方法具有的有益效果包括但不限于：
19.本方案采用代码混淆的方式对js模块做保护，大幅降低代码的可读性和可调试性，基大增加了攻击者根据代码分析数据处理逻辑的难度；提供的第三方加密服务将关键的数据保护逻辑放到了外部，避免了加密算法和密钥的泄露，进一步保证了用户数据的安全。
具体实施方式
20.为使本技术的目的、技术方案和优点更加清楚，对本技术实施例中的技术方案进行更加详细的描述。所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
21.以下将对本技术实施例所涉及的一种web前端数据保护实现方法进行详细说明。值得注意的是，以下实施例仅仅用于解释本技术，并不构成对本技术的限定。
22.一种web前端数据保护实现方法，包括以下步骤：
23.步骤1：使用代码混淆方式对待保护站点涉及用户数据处理和收发的js模块进行代码混淆；
24.步骤2：将混淆后的代码用于前端部署服务，保证前端浏览器下载的js模块相关资源是经过代码混淆后的；
25.步骤3：构建加密服务接口用于处理js模块发出的用户数据加密请求，接收明文数据并在服务端加密后，返回密文数据，以api的形式提供服务；
26.步骤4：前端框架处理用户请求时，js模块从前端输入框获取到用户数据，将数据格式化后，调用远程的加密服务接口对数据进行加密处理，请求中需要带上系统当前时间戳；
27.步骤5：加密服务接口收到数据加密请求后，验证时间戳是否处于正常的误差范围内，超过误差表明存在请求重放风险，返回错误信息；未超过误差范围则返回加密后的用户请求数据；
28.步骤6：js模块收到加密的用户数据后，判断返回结果是否正常，结果异常表明存在请求重放攻击，终止本次请求；结果正常则继续执行相关的业务流程，将加密后的用户数据发送至后端业务服务；
29.步骤7：业务服务收到用户数据后，将加密的用户数据发送至加密服务接口进行解密，如果解密失败直接终止请求流程，否则将得到解密后的用户数据后按业务逻辑进行处
理。
30.对于前端的js模块，首先采用以下方式对代码进行混淆保护：
31.1.变量和字符串混淆：通过编码或加密的方式将代码中的字符串和变量名转化为可读性差的无规则字符串。
32.2.花指令注入：在代码中的随机位置插入不会被执行或执行后对整体代码逻辑没有影响的僵尸代码，达到干扰阅读的目的。
33.3.代码调试保护：在代码中通过debugger使调试进入死循环，达到防止调试的目的。
34.4.代码压缩和防止格式化；将js模块压缩为一整行，同时通过构造无限递归使得代码在格式化过程中陷入无限递归，防止代码格式化。
35.构造外部api用于处理用户数据加密和解密请求：接口接收post请求方法，接收base64编码的用户数据字符串，同时验证请求的当前时间戳，验证通过后对用户数据进行base64解码，并采用aes算法对用户数据加密或解密操作，加解密密钥需要进行提前协商并保存在加密服务中，不直接在前端代码中出现以保护密钥安全；接口返回加密并编码后的密文用户数据。
36.在前端用户数据处理流程中，在用户数据发送前，调用外部加密接口将用户数据进行加密处理，收到加密接口返回的密文数据后，再通过ajax发送给后端服务进行处理；后端服务收到用户数据后，调用解密接口得到解密后的用户数据，再进行后续的业务逻辑流程。
37.该方案相比传统的对用户数据进行base64编码、数据对称加密的方式，在保证前端代码保密性的基础上实现了用户数据的保护，安全性更高，数据破解难度更大，提升了页面传输数据的安全性。
38.本发明可以保证用户数据传输到后端接口的安全性，采用代码混淆的方式对前端数据处理逻辑进行了保护，同时采用第三方加密接口的方式隐藏了加密密钥和数据加密逻辑，实现了前端数据加密整体的安全性；可应用于绝大多数需要对前端用户传输数据保密的场景。
39.以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。