前端 crypto-js aes 加解密
背景
前段時(shí)間公司做項(xiàng)目，該項(xiàng)目涉及到的敏感數(shù)據(jù)比較多，經(jīng)過的一波討論之后，決定前后端進(jìn)行接口加密處理，采用的是 AES + BASE64 算法加密~
網(wǎng)上關(guān)于 AES 對(duì)稱加密的算法介紹挺多的，對(duì)這一塊還不是特別理解的小伙伴可自行百度，這里我推薦一篇AES加密算法的詳細(xì)介紹與實(shí)現(xiàn)，講的還是蠻詳細(xì)的~
具體實(shí)現(xiàn)
其實(shí)搞懂了是怎么一回事，做起來還是挺簡(jiǎn)單的，因?yàn)閹於际乾F(xiàn)成的，我們只需要會(huì)用就好啦，這里我在推薦一篇理解AES加密解密的使用方法，加深大家對(duì) AES 算法的理解~
這里我以 Vue 作為例子，其他的也就大同小異了~
要用
AES算法加密，首先我們要引入crypto-js，crypto-js是一個(gè)純javascript寫的加密算法類庫 ，可以非常方便地在javascript進(jìn)行MD5、SHA1、SHA2、SHA3、RIPEMD-160哈希散列，進(jìn)行AES、DES、Rabbit、RC4、Triple DES加解密，我們可以采用npm install crypto-js --save進(jìn)行下載安裝，也可以直接去 GitHub下載源碼~其次我們需要定義兩個(gè)方法 ，分別是用于加密和解密，這里我將它放在了
utils文件夾下，命名為secret.js，其具體代碼如下：
const CryptoJS = require('crypto-js'); //引用AES源碼js
const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六進(jìn)制數(shù)作為密鑰
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六進(jìn)制數(shù)作為密鑰偏移量
//解密方法
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 是密鑰偏移量，這個(gè)一般是接口返回的，為了方便，我們這里就直接在這里定義了。
值得注意的是密鑰的長(zhǎng)度，由于對(duì)稱解密使用的算法是 AES-128-CBC算法，數(shù)據(jù)采用 PKCS#7 填充 ， 因此這里的 key 需要為16位！
接著我們定義了 解密方法Decrypt 和 加密方法 Encrypt ，最后通過 export default 將其暴露出去，方便在需要的時(shí)候進(jìn)行引入~
ok，核心代碼就這么多，是不是很簡(jiǎn)單啊，其實(shí)也么有你想的那么復(fù)雜哈，剩下的就是展示一下如何使用咯~
示例
這里我定義了一個(gè) index.vue 用來展示數(shù)據(jù)加解密的操作~
加密操作： 假設(shè)我們現(xiàn)在要給后端發(fā)送一段文字，暫且定義為 This is a clear text ， 在發(fā)送之前我們需要對(duì)其進(jìn)行加密操作，這時(shí)候我們可以調(diào)用上面介紹的 Encrypt 方法，通過加密后我們可以得到密文為：4ACEA01505ADAF9FB59A03B22FC1EF1B244AE28DDACFDFAEFA7E263655C44357
解密操作： 假設(shè)我們請(qǐng)求后端接口，后端返回了我們一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF , 這讓我很蒙蔽啊，這時(shí)候就要調(diào)用 Decrypt 方法，
通過解密我們可以拿到后端返回的信息其實(shí)是：{"name":"Chris","sex":"male"}
結(jié)語
至此，你已經(jīng) get 了前端 AES 加解密的方法，是不是感覺很簡(jiǎn)單啊，用起來很簡(jiǎn)單，原理可不簡(jiǎn)單，況且這也只是其中的一種方案，關(guān)于加解密的方法還有很多，感興趣的小伙伴們可以繼續(xù)做一些深入的研究哈~
至于我呢。。
對(duì)了，代碼已上傳到 GitHub，有需要的小伙伴自行下載~
作者：Cryptic
鏈接：http://www.lxweimin.com/p/a47477e8126a
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
