内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

前端crypto-js aes加解密

2018-04-14 19:01 出处:清屏网 人气: 评论(0

前段时间公司做项目,该项目涉及到的敏感数据比较多,经过的一波讨论之后,决定前后端进行接口加密处理,采用的是 AES + BASE64 算法加密~

网上关于 AES 对称加密的算法介绍挺多的,对这一块还不是特别理解的小伙伴可自行百度,这里我推荐一篇 AES加密算法的详细介绍与实现 ,讲的还是蛮详细的~

具体实现

其实搞懂了是怎么一回事,做起来还是挺简单的,因为库都是现成的,我们只需要会用就好啦,这里我在推荐一篇 理解AES加密解密的使用方法 ,加深大家对 AES 算法的理解~

这里我以 Vue 作为例子,其他的也就大同小异了~

  • 要用 AES 算法加密,首先我们要引入 crypto-jscrypto-js 是一个纯 javascript 写的加密算法类库 ,可以非常方便地在 javascript 进行 MD5SHA1SHA2SHA3RIPEMD-160 哈希散列,进行 AESDESRabbitRC4Triple 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 ,有需要的小伙伴自行下载~

分享给小伙伴们:
本文标签: aescryptojs

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号