A. 前端js 加密解密方式
一、base64加密
使用JS函数的window.btoa()和 window.atob()，分别是中腊编码和解码
二、编码和解码字符串
使用JS函巧羡数卖宽滑的escape()和unescape()，分别是编码和解码
三、AES加密解密
四、RSA加密解密
B. 前端网络高级篇（一）HTTPS
HTTP是Web中常见的通信方式，无状态，简单易用。当然，它的不足之处也非常明显：
为了解决HTTP协议的痛点，采用通信加密的方式，继而出现HTTPS协议。
HTTPS其实是有两部分组成： HTTP + SSL / TLS ，也就是在HTTP上又加了一层处理加密信息的模块。
服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据都是加密后的数据。
加密技术有两种：
https采用共享密钥加密和公开密钥加密两者并用的混合加密机制 ，具体加密方式参考第二节。
SSL不仅提供加密处理，而且使用证书，来确定对方的非伪装的。
证书是由值得信任的第三方机构颁发，用以证明服务器和客户端是实际存在的。
HTTP+加密+认证+完整性保护=HTTPS 。上节提到，“https采用共享密钥加密和公开密钥加密两者并用的混合加密机制”，解释一下，就是用公开密钥加密 传递密钥 ，用共享密钥加密算法 加密报文内容 。
为什么HTTPS要采用混合加密呢？
因为公开密钥加密的处理速度要远远慢于共享密钥加密，所以，在通信最频繁的环节 - “报文加密”，采用了共享密钥。那么，更加安全的公开密钥加密，就非常适合“报文密钥”的传递来。
具体加密，解密，验证步骤如下：
C. URL请求对参数前端JS加密，后台JAVA解密
数字的话可以使用 Base62 算法，不过这只是表面的转换，因为算法是写在Js里的，稍加分析就能知道怎么去翻转。
如果要有效加密的话，可以使用js调用RSA算法进行加密，这样js中只会暴露公钥，可以实现安全的加密。
网上多得很。
D. 前端加密、解密数据
首先，为了更好的加密，我们不能用简单的加密，因为很有可能会被轻松破解掉，我之前实现的加密只是简单的把数据加密，在测试过程中（安全数伏性测试），通过一些技巧还是可以解密成功。
所以，对于一些重要的信息可能需要非对称加密。
所谓的非对称加密解密，在我的理解的，就是前端用一把钥匙解密/加密，而后台用另一把钥匙来做同样的操作。
也就是，薯乱携前端加密用特定的钥匙，解密的钥匙只在陪雀后端那里。这样在传输过程中就不会把钥匙丢掉。
同样，后端加密数据用一把钥匙，解密的时候，前端自己有规定的钥匙，这样数据也不会在过程中解密截取。
1、我这里是用vue
所以，第一步 npm install jsencrypt
2、安装完之后，开始定义一个专门用来加密解密的文件，我放到utils文件里面。
引入JSEncrypt
3、重点来了加密解密
首先，我这里使用公钥加密（由后台来给你公钥）
全局引用，使用
这样加密就完成了。
通常由后台加密，前端负责加密
由后台生成私钥，然后前端用来解密。
引用和加密一样
E. 前后端交互数据加解密
本文提供了一种前后端交互数据的加解密方法，主要涉及了AES和RSA两种加密方式。
AES加密是一种对称式加密，即加密和解密所需秘钥是相同的。后端生成一组秘钥，并利用该秘钥加密数据，然后发给前端，同时也需要把秘钥发送给前端，这样前端才能解密。这样就会有风险，一旦秘钥被泄露，你的加密将不存在任何意义。同时，相比RSA加密来说，好处是不会限制加密字符串的长度。
RSA加密，是一种非对称式加密，相比AES加密，这个就安全多了。后端生成一对秘钥，自己拿着私钥，公钥可以公开。这样前端拿公钥进行加密，后端拿私钥进行解密，私钥掌握在自己手里，被泄露的风险就小了很多。当然也有不好的地方，就是被加密字符串的长度不能过长，1024的秘钥只能加密117字节以内的明文，这就比较尴尬了，可能稍微长一点的数据就会超出了，当然可以通过2048或者4096的秘钥来延长加密长度，但总会被超出。所以适合需要加密长度不长的数据，最好是已知长度的数据，这样 就不会因长度问题报错。
RSA+AES混合加密，即后端通过RSA算法生成一对公私钥，并把公钥提供给前端。前端通过AES算法生成密钥，利用公钥进行加密并送给后端，后端根据私钥进行解密，得到与前端相同的AES密钥。然后，前后端就可以利用AES密钥对称加密进行数据交互。
详细步骤如图所示。
RSA+AES混合加密，结合了两种加密方式的优点。另外，前端每次启动都会随机生成AES密钥，后端增加token失效机制（前端设置了定时任务请求token），增加了前后端数据交互的安全性。
https://www.cnblogs.com/huanzi-qch/p/10913636.html
https://blog.csdn.net/weixin_38342534/article/details/94582656
F. 前端加密与后端解密
请看demo， 用前请npm install crypto-js
创建一个js文件
import CryptoJS from 'crypto-js';
const encryptByDES = (message, key)=>{
let keyHex = CryptoJS.enc.Utf8.parse(key);
let encrypted = CryptoJS.DES.encrypt(message, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.ZeroPadding
});
return encrypted.ciphertext.toString();
}
/**
* 对userId加密
激伏世* @param {String} userId
*/
export const encryption = (userId) => {
let _userId = userId.toString() || ''
let encryptedResult = encryptByDES(_userId, '')
return encryptedResult
}
html部分
import React, 明肢{Component} from 'react';
import CryptoJS from 'crypto-js';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props){
super(props)
this.state={
userId: 123,
encryptedResult: ''
}
}
_handleChange = (event) => {
this.setState(() => ({
userId: event.target.value
}))
}
des = () => {
let data = this.encryptByDES('111', '')
this.setState(() => ({
encryptedResult: data
}))
}
encryptByDES = (message, key) => {
console.log(CryptoJS.pad)
let keyHex = CryptoJS.enc.Utf8.parse(key);
let encrypted = CryptoJS.DES.encrypt(message, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.ZeroPadding
});
return encrypted.ciphertext.toString();
}
render() {
return (
<div className="App">
厅庆 <input type="text" value={this.state.userId} onChange={this._handleChange}/>
<button type="button" onClick={this.des}>加密</button><br/>
<span>结果：{this.state.encryptedResult}</span>
</div>
);
}
}
export default App;
G. web前端的数据如何加密
前端数据一般都需要在后台使用的所以必须要用可逆的加密方式 现在比较流行的就是非对称的加密方式比如RSA 具体方法是生成两个秘钥 公钥 私钥 前端使用js（可以网络下载）把数据利用公钥进行加密 加密结果传给后端 后端利用私钥解密方法对数据进行解密