浅尝 Vue —— 笔记一五前端使用的加密算法 HmacSHA256

需要安装 cnpm install crypto-js --save-dev

创建 secret.js

    /**
      * 对 token 进行加密传输给后台进行验证
      */
     let CryptoJS = require('crypto-js'); // 引入AES源码js
     export default {


            /*
         * 对 token 加密，传输给后台进行验证
         * @param  {String}     token    需要加密的文本
         * @param  {String}     keyStr    秘钥
         * @return {String}     加密的密文
         * */
         digest(word, keyStr) { // 加密
		...
		return  hashInHex;
	    }
	};

将 scret.js 引入需要调用加密算法方法的组件 <script> 中使用。

需要注意

后端同样使用了 crypto 相关 jar 包 + 进行加密算法
xxx

.
.
.
.
.
.
.

前端加密 JS 库--CryptoJS 使用指南

有时候项目涉及到的敏感数据比较多，为了信息安全，我们常常需要对一些数据进行接口加密处理，如编码、将明文转化为暗文、加密比对、AES + BASE64 算法加密等。
接下来我们就分别说一下 CryptoJS 常用的一些方法。

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

解密操作： 假设我们请求后端接口，后端返回了我们一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF , 这让我很蒙蔽啊，这时候就要调用 Decrypt 方法，
通过解密我们可以拿到后端返回的信息其实是：{"name":"Chris","sex":"male"}

结语

至此，你已经 get 了前端 AES 加解密的方法，是不是感觉很简单啊，用起来很简单，原理可不简单，况且这也只是其中的一种方案，关于加解密的方法还有很多，感兴趣的小伙伴们可以继续做一些深入的研究哈~

推荐一篇使用文章 : 前端加密控件 CryptoJS 的使用

.
.
.
.
.
.
.
.
.

参考：

前端加密 JS 库--CryptoJS 使用指南
 java 生成 HMACSHA256 的方法

浅尝 Vue —— 笔记一五前端使用的加密算法 HmacSHA256

前端加密 JS 库--CryptoJS 使用指南

AES 加密

前后端数据通信参数加密

前端 crypto-js aes 加解密

背景

具体实现

示例

结语

相关帖子

基于 SpringBoot+Vue 框架实现前后端分离【企业级】项目，欢迎大家体验 [看]......

基于 SpringBoot+Vue 框架实现前后端分离【企业级】项目，欢迎大家体验......

.vue 文件在插件里如何正确导入？

弹出按钮点击不工作的问题

请会 vue3 的朋友帮忙看看怎么回事

业务组件库 vue2.7 行动目录

Vue 事件总线（EventBus）

欢迎来到这里！

浅尝 Vue —— 笔记一五 前端使用的加密算法 HmacSHA256

AES 加密

前后端数据通信参数加密

前端 crypto-js aes 加解密

背景

具体实现

示例

结语

相关帖子

欢迎来到这里！

浅尝 Vue —— 笔记一五前端使用的加密算法 HmacSHA256