前端加密JS库--CryptoJS使⽤指南
有时候项⽬涉及到的敏感数据⽐较多，为了信息安全，我们常常需要对⼀些数据进⾏接⼝加密处理，如编码、将明⽂转化为暗⽂、加密⽐对、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 = Utf8.parse("1234567890000000"); //16位
const iv = Utf8.parse("1234567890000000");
export default {
//aes加密
encrypt(word) {
let encrypted = "";
if (typeof word == "string") {
const srcs = Utf8.parse(word);
encrypted = pt(srcs, key, {
iv: iv,
mode: de.CBC,
padding: CryptoJS.pad.Pkcs7
});
} else if (typeof word == "object") {
//对象格式的转成json字符串
const data = JSON.stringify(word);
const srcs = Utf8.parse(data);
encrypted = pt(srcs, key, {
iv: iv,
mode: de.CBC,
padding: CryptoJS.pad.Pkcs7
});
}
return String();
},
// aes解密
decrypt(word) {
const encryptedHexStr = Hex.parse(word);
const srcs = Base64.stringify(encryptedHexStr);
const decrypt = CryptoJS.AES.decrypt(srcs, key, {
iv: iv,
mode: de.CBC,
padding: CryptoJS.pad.Pkcs7
});
const decryptedStr = Utf8);
String();
}
使⽤
js代码加密软件import Crypto from "@/utils/crypto";
Crypto.decrypt(userPwd); // "✓ à la mode"
Crypto.decrypt(userPwd); // "I ♡ Unicode!"
Crypto.decrypt(userPwd); // "我爱中国"
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 = Utf8.parse("0880076B18D7EE81"); // 加密秘钥
let iv = Utf8.parse("CB3EC842D7C69578"); // ⽮量
let encryptResult = pt(endData,key, { // AES加密
iv: iv,
mode: de.CBC,
padding: CryptoJS.pad.Pkcs7 // 后台⽤的是pad.Pkcs5，前台对应为Pkcs7
});
return Base64.stringify(encryptResult.ciphertext)); // Base64加密encode;
}
加密最终的密⽂拼接在接⼝地址后⾯，请求接⼝。后台返回的数据也是密⽂；解密⽅法如下：
function decryption(data) {
let key = Utf8.parse("0880076B18D7EE81"); // 加密秘钥
let iv = Utf8.parse("CB3EC842D7C69578"); // ⽮量
let Base64.parse(data); // Base64解密
let Base64.stringify(baseResult); // Base64解密
let decryptResult = CryptoJS.AES.decrypt(ciphertext,key, { // AES解密
iv: iv,
mode: de.CBC,
padding: CryptoJS.pad.Pkcs7
});
let Utf8).toString();
return JSON.parse(resData);
}
备注：因为后台返回的数据是json格式；所以做种return的时候使⽤JSON.parse()；如果解密的⽬标为字符串，⽐如说需要解密的是⼀个加密的token值。那就要做相应的改动：function decryption(data) {
let key = Utf8.parse("0880076B18D7EE81"); // 加密秘钥
let iv = Utf8.parse("CB3EC842D7C69578"); // ⽮量
let Base64.parse(data); // Base64解密
let Base64.stringify(baseResult); // Base64解密
let decryptResult = CryptoJS.AES.decrypt(ciphertext,key, { // AES解密
iv: iv,
mode: de.CBC,
padding: CryptoJS.pad.Pkcs7
});
Utf8.stringify(decryptResult);
}
前端 crypto-js aes 加解密
前段时间公司做项⽬，该项⽬涉及到的敏感数据⽐较多，经过的⼀波讨论之后，决定前后端进⾏接⼝加密处理，采⽤的是 AES + BASE64 算法加密~
⽹上关于 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 进⾏下载安装，也可以直接去下载源码~
其次我们需要定义两个⽅法，分别是⽤于加密和解密，这⾥我将它放在了 utils ⽂件夹下，命名为 secret.js ，其具体代码如下：
const CryptoJS = require('crypto-js'); //引⽤AES源码js
const key = Utf8.parse("1234123412ABCDEF"); //⼗六位⼗六进制数作为密钥
const iv = Utf8.parse('ABCDEF1234123412'); //⼗六位⼗六进制数作为密钥偏移量
//解密⽅法
function Decrypt(word) {
let encryptedHexStr = Hex.parse(word);
let srcs = Base64.stringify(encryptedHexStr);
let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: de.CBC, padding: CryptoJS.pad.Pkcs7 });
let decryptedStr = Utf8);
String();
}
//加密⽅法
function Encrypt(word) {
let srcs = Utf8.parse(word);
let encrypted = pt(srcs, key, { iv: iv, mode: de.CBC, padding: CryptoJS.pad.Pkcs7 });
return String().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 加解密的⽅法，是不是感觉很简单啊，⽤起来很简单，原理可不简单，况且这也只是其中的⼀种⽅案，关于加解密的⽅法还有很多，感兴趣的⼩伙伴们可以继续做⼀些深⼊的研究哈~
推荐⼀篇使⽤⽂章
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论