[转帖]前端 crypto-js aes 加解密

前端 crypto-js aes 加解密

2018.04.13 11:37:21字数 891阅读 59767

https://www.jianshu.com/p/a47477e8126a

原来前端也有那么多加密 工具库

 

前端 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 加解密的方法，是否是感受很简单啊，用起来很简单，原理可不简单，何况这也只是其中的一种方案，关于加解密的方法还有不少，感兴趣的小伙伴们能够继续作一些深刻的研究哈~

至于我呢。。

 

对了，代码已上传到 GitHub，有须要的小伙伴自行下载~