前端加密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 = 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
![](http://upload-images.jianshu.io/upload_images/6633377-381239f35b58ed37.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1077/format/webp)
解密操作: 假设我们请求后端接口,后端返回了我们一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF
, 这让我很蒙蔽啊,这时候就要调用 Decrypt
方法,
通过解密我们可以拿到后端返回的信息其实是:{"name":"Chris","sex":"male"}
![](http://upload-images.jianshu.io/upload_images/6633377-eb7249069436efac.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1080/format/webp)
结语
至此,你已经 get
了前端 AES
加解密的方法,是不是感觉很简单啊,用起来很简单,原理可不简单,况且这也只是其中的一种方案,关于加解密的方法还有很多,感兴趣的小伙伴们可以继续做一些深入的研究哈~