Web开发-JS应用原生代码前端数据加密CryptoJS库jsencrypt库代码混淆

知识点：
1、安全开发-原生JS-数据加密&代码混淆
2、安全开发-原生JS-数据解密安全案例

一、演示案例-WEB开发-原生JS&第三方库-数据加密

前端技术JS实现：
1、非加密数据大致流程：
客户端发送->明文数据传输-服务端接受数据->处理数据2、加密数据大致流程：
客户端发送->明文加密->密文数据传输-服务端接受数据->解密数据->处理数据

前端加密-Crypto库

项目地址：https://github.com/brix/crypto-js
参考文章：https://juejin.cn/post/7382893339181613068
使用Crypto库进行MD5/SHA1/HMAC/AES/DES等加密

下载到本地调用：
<script src="crypto-js.js"></script>在线远程调用：
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>

base64编码-JS原生

MD5

SHA1

HMAC

AES

http://tool.chacuo.net/cryptaes

DES

http://tool.chacuo.net/cryptaes

前端加密-jsencrypt库

项目地址：https://github.com/travist/jsencrypt
参考文章：https://www.cnblogs.com/Lrn14616/p/10154529.html

使用jsencrypt库进行RSA等加密

下载本地调用：
<script src="jsencrypt.js"></script>在线远程调用：
<script src="https://cdn.bootcdn.net/ajax/libs/jsencrypt/3.3.2/jsencrypt.js"></script>

http://tool.chacuo.net/cryptaes

公钥加密，私钥解密(反之私钥加密，公钥解密)

安全测试–AES-DEMO

一个登录页面，密码被加密对安全测试的影响。

如果用户传输的密码是加密的，那么在进行爆破的时候也要对应加密传输，如果直接传明文过去，对方一接收解密就会出错，从而造成干扰。

从加密数据逆向代码分析加密逻辑

如果要本地调试

安全测试-MD5-某真实博客

如果要本地调试

安全测试-AES-某真实系统

二、演示案例-WEB开发-在线混淆-代码混淆

混淆代码的主要目的是保护源代码，防止未经授权的复制、篡改或逆向工程。通过对变量名、字符串和控制流的修改，混淆代码看似毫无逻辑，但本质功能未变。混淆技术常用于商业应用和恶意软件中。

压缩

去除js代码中的不必要的空格、换行等内容。使源码压缩为几行内容，降低代码可读性，提高网站的加载速度。

混淆

使用变量替换、僵尸函数、字符串阵列化、控制流平坦化、调试保护等手段，使代码变得难以阅读和分析，达到最终保护的目的，不影响代码原有功能，是理想、实用的javascript保护方案。

在线混淆

https://obfuscator.io/ //国外的js混淆网站