crypto-js aes 加解密

前端 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 加解密的方法，是不是感覺很簡單啊，用起來很簡單，原理可不簡單，況且這也只是其中的一種方案，關於加解密的方法還有很多，感興趣的小伙伴們可以繼續做一些深入的研究哈~