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

有時候項目涉及到的敏感數據比較多，爲了信息安全，咱們經常須要對一些數據進行接口加密處理，如編碼、將明文轉化爲暗文、加密比對、AES + BASE64 算法加密等。
  Base64 編碼 
   爲何要編碼？
    因爲一些網絡通信協議的限制, 又或者是出於信息加密的目的, 咱們就須要將原信息轉換爲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 加密

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);
  }