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（可以網路下載）把數據利用公鑰進行加密 加密結果傳給後端 後端利用私鑰解密方法對數據進行解密