有时候项目涉及到的敏感数据比较多，为了信息安全，我们常常需要对一些数据进行接口加密处理，如编码、将明文转化为暗文、加密比对、AES + BASE64 算法加密等。
接下来我们就分别说一下 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"
- 其次我们需要定义两个方法 ，分别是用于加密和解密，这里我将它放在了
utils文件夹下，命名为secret.js，其具体代码如下：
**
const CryptoJS = require('crypto-js'); //引用AES源码js
const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六进制数作为密钥偏移量
/**
* iv 是密钥偏移量，这个一般是接口返回的，或者前后端协定一致。
*由于对称解密使用的算法是 AES-128-CBC算法，数据采用 PKCS#7 填充 ， 因此这里的 key 需要为16位
*/
//解密方法
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 将其暴露出去，方便在需要的时候进行引入~
