[轉帖]前端 crypto-js aes 加解密

前端 crypto-js aes 加解密

2018.04.13 11:37:21字數 891閱讀 59767

https://www.jianshu.com/p/a47477e8126a

原來前端也有那麼多加密 工具庫

 

前端 crypto-js aes 加解密

背景

前段時間公司作項目，該項目涉及到的敏感數據比較多，通過的一波討論以後，決定先後端進行接口加密處理，採用的是 AES + BASE64 算法加密~

網上關於 AES 對稱加密的算法介紹挺多的，對這一塊還不是特別理解的小夥伴可自行百度，這裏我推薦一篇AES加密算法的詳細介紹與實現，講的仍是蠻詳細的~

具體實現

其實搞懂了是怎麼一回事，作起來仍是挺簡單的，由於庫都是現成的，咱們只須要會用就好啦，這裏我在推薦一篇理解AES加密解密的使用方法，加深你們對 AES 算法的理解~

 

這裏我以 Vue 做爲例子，其餘的也就大同小異了~

• 要用 AES 算法加密，首先咱們要引入 crypto-js ，crypto-js 是一個純 javascript 寫的加密算法類庫 ，能夠很是方便地在 javascript 進行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，進行 AES、DES、Rabbit、RC4、Triple DES 加解密，咱們能夠採用 npm install crypto-js --save 進行下載安裝，也能夠直接去 GitHub下載源碼~

• 其次咱們須要定義兩個方法 ，分別是用於加密和解密，這裏我將它放在了 utils 文件夾下，命名爲 secret.js ，其具體代碼以下：

const CryptoJS = require('crypto-js'); //引用AES源碼js const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六進制數做爲密鑰 const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六進制數做爲密鑰偏移量 //解密方法 function Decrypt(word) { let encryptedHexStr = CryptoJS.enc.Hex.parse(word); let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr); let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8); return decryptedStr.toString(); } //加密方法 function Encrypt(word) { let srcs = CryptoJS.enc.Utf8.parse(word); let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encrypted.ciphertext.toString().toUpperCase(); } export default { Decrypt , Encrypt } 

上面的代碼中的 key 是密鑰 ，iv 是密鑰偏移量，這個通常是接口返回的，爲了方便，咱們這裏就直接在這裏定義了。

值得注意的是密鑰的長度，因爲對稱解密使用的算法是 AES-128-CBC算法，數據採用 PKCS#7 填充 ， 所以這裏的 key 須要爲16位！

接着咱們定義了 解密方法Decrypt 和 加密方法 Encrypt ，最後經過 export default 將其暴露出去，方便在須要的時候進行引入~

ok，核心代碼就這麼多，是否是很簡單啊，其實也麼有你想的那麼複雜哈，剩下的就是展現一下如何使用咯~

 

示例

這裏我定義了一個 index.vue 用來展現數據加解密的操做~

加密操做： 假設咱們如今要給後端發送一段文字，暫且定義爲 This is a clear text ， 在發送以前咱們須要對其進行加密操做，這時候咱們能夠調用上面介紹的 Encrypt 方法，經過加密後咱們能夠獲得密文爲：4ACEA01505ADAF9FB59A03B22FC1EF1B244AE28DDACFDFAEFA7E263655C44357

 

解密操做： 假設咱們請求後端接口，後端返回了咱們一堆以下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF , 這讓我很矇蔽啊，這時候就要調用 Decrypt 方法，
經過解密咱們能夠拿到後端返回的信息實際上是：{"name":"Chris","sex":"male"}

 

結語

至此，你已經 get 了前端 AES 加解密的方法，是否是感受很簡單啊，用起來很簡單，原理可不簡單，何況這也只是其中的一種方案，關於加解密的方法還有不少，感興趣的小夥伴們能夠繼續作一些深刻的研究哈~

至於我呢。。

 

對了，代碼已上傳到 GitHub，有須要的小夥伴自行下載~