前端加密JS庫--CryptoJS 使用指南

有時候項目涉及到的敏感數據比較多，為了信息安全，我們常常需要對一些數據進行接口加密處理，如編碼、將明文轉化為暗文、加密比對、AES + BASE64 算法加密等。
接下來我們就分別說一下 CryptoJS 常用的一些方法。

CryptoJS文檔

為什么要編碼？

由於一些網絡通訊協議的限制, 又或者是出於信息加密的目的, 我們就需要將原信息轉換為base64編碼,然后才能進行傳輸.例如，發送某些含有 ASCII 碼表中0到31之間的控制字符的數據。

window.btoa 對字符串進行 base64編碼（注意不能編碼中文）;
winodw.atob 對 base64字符串 進行解碼（對於包含中文的 base64編碼，不能正確解碼）;

通常的方法是通過 window.btoa() 方法對源數據進行編碼, 然后接收方使用 window.atob() 方法對其進行解碼, 從而得到原數據。但是這種方法存在的問題是：window.btoa() 不支持中文, window.atob() 轉換含有中文的 base64編碼 的時候中文部分會變為亂碼。另一個存在的問題是解碼github的readme數據的時候也是亂碼。經過查找相關資料發現了 Base64的編碼與解碼轉的最優方案:

// 編碼
function utf8_to_b64(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}

// 解碼
function b64_to_utf8(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

// Usage:
utf8_to_b64('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"

utf8_to_b64('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
b64_to_utf8('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"

utf8_to_b64('我愛中國'); // 5oiR54ix5Lit5Zu9
b64_to_utf8('SSDimaEgVW5pY29kZSE='); // "我愛中國"

utf8_to_b64(123456); // MTIzNDU2
b64_to_utf8("MTIzNDU2"); // 123456

AES 加密

安裝

$ npm install crypto-js

aes加密: crypto.js

 

import CryptoJS from "crypto-js";

const key = CryptoJS.enc.Utf8.parse("1234567890000000"); //16位
const iv = CryptoJS.enc.Utf8.parse("1234567890000000");

export default {
  //aes加密
  encrypt(word) {
    let encrypted = "";
    if (typeof word == "string") {
      const srcs = CryptoJS.enc.Utf8.parse(word);
      encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
    } else if (typeof word == "object") {
      //對象格式的轉成json字符串
      const data = JSON.stringify(word);
      const srcs = CryptoJS.enc.Utf8.parse(data);
      encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
    }
    return encrypted.ciphertext.toString();
  },
  // aes解密
  decrypt(word) {
    const encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    const decrypt = CryptoJS.AES.decrypt(srcs, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    });
    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  }
};

使用

import Crypto from "@/utils/crypto";

Crypto.encrypt("✓ à la mode"); // b915bf40c4795227488da86978f55fce
Crypto.decrypt(userPwd); // "✓ à la mode"

Crypto.encrypt("✓ à la mode"); // 6317313288b32bf1909f165ec530d60a
Crypto.decrypt(userPwd); // "I ♡ Unicode!"

Crypto.encrypt("我愛中國"); // 1898a34273855f55255437aa22f87504
Crypto.decrypt(userPwd); // "我愛中國"

Crypto.encrypt("123456"); // dd7a6c4edc68e683b700a7a2846a2bc6
Crypto.decrypt(userPwd); // "123456"

前后端數據通信參數加密

加密代碼實現:

項目中需要將所有傳到后台的參數分5個步驟處理：

第一步：排序

第二步：將排序好的參數進行MD5加密作為接口的簽名

第三步：將排序好的參數和接口簽名拼接上進行AES加密

第四部：將AES加密后的密文Base64加密

第五步：將最終的密文encodeURIComponent；

代碼如下：

function encryption(data) {
    let strs=[];
    for(let i in data){
        strs.push(i+'='+data[i]);
    }
    strs.sort();  // 數組排序
    strs=strs.join('&'); // 數組變字符串
    let endData=strs+'&sign='+CryptoJS.MD5(strs+'ADfj3kcadc2349akvm1CPFFCD84f').toString(); // MD5加密
    let key = CryptoJS.enc.Utf8.parse("0880076B18D7EE81"); // 加密秘鑰
    let iv = CryptoJS.enc.Utf8.parse("CB3EC842D7C69578");  //  矢量
    let encryptResult = CryptoJS.AES.encrypt(endData,key, {   //  AES加密
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7  // 后台用的是pad.Pkcs5,前台對應為Pkcs7
    });
    return encodeURIComponent(CryptoJS.enc.Base64.stringify(encryptResult.ciphertext));  // Base64加密encode;
}

加密最終的密文拼接在接口地址后面，請求接口。后台返回的數據也是密文；解密方法如下：

function decryption(data) {
    let key = CryptoJS.enc.Utf8.parse("0880076B18D7EE81");  // 加密秘鑰
    let iv = CryptoJS.enc.Utf8.parse("CB3EC842D7C69578");   //  矢量
    let baseResult=CryptoJS.enc.Base64.parse(data);   // Base64解密
    let ciphertext=CryptoJS.enc.Base64.stringify(baseResult);     // Base64解密
    let decryptResult = CryptoJS.AES.decrypt(ciphertext,key, {    //  AES解密
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    let resData=decryptResult.toString(CryptoJS.enc.Utf8).toString();

    return JSON.parse(resData);
}

備注：因為后台返回的數據是json格式；所以做種return的時候使用JSON.parse();如果解密的目標為字符串，比如說需要解密的是一個加密的token值。那就要做相應的改動：

function decryption(data) {
    let key = CryptoJS.enc.Utf8.parse("0880076B18D7EE81");  // 加密秘鑰
    let iv = CryptoJS.enc.Utf8.parse("CB3EC842D7C69578");   //  矢量
    let baseResult=CryptoJS.enc.Base64.parse(data);   // Base64解密
    let ciphertext=CryptoJS.enc.Base64.stringify(baseResult);     // Base64解密
    let decryptResult = CryptoJS.AES.decrypt(ciphertext,key, {    //  AES解密
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return CryptoJS.enc.Utf8.stringify(decryptResult);
}

 

 

 

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

 

 推薦一篇使用文章  https://www.cnblogs.com/June2005/p/11429442.html