前端你得会——加密解密之crypto-js（建议收藏）

作者：测不准

原文地址：https://mp.weixin.qq.com/s/cKl3XUZtuA3syDh6WrPZGA

场景

在开发过程中，我们会经常会从当前系统跳转别的系统进行访问或者页面嵌套使用。

那一般都会给到一个地址进行参数拼接，然后去访问。那么会存在一个问题，就是地址暴露在外面参数使用明文的话会被篡改，极度不安全。

这个时候我们就考虑到加密，前端和后端协定好一种加密方式，然后前端进行参数加密传到后端，后端再去解密（可逆）。

加密方式也有很多种，今天我推荐的是一款强大的前端加密/解密 js 库—— crypto-js。

crypto-js 是什么

crypto-js 是一个纯 javascript 写的加密算法类库 ，可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。

GitHub：https://github.com/brix/crypto-js

安装

npm install crypto-js

使用

ES6模块引入方法：

import sha256 from 'crypto-js/sha256';
import hmacSHA512 from 'crypto-js/hmac-sha512';
import Base64 from 'crypto-js/enc-base64';

模块加载引入方法：

var AES = require("crypto-js/aes");
var SHA256 = require("crypto-js/sha256");

页面标签引入方法：

<script type="text/javascript" src="path-to/bower_components/crypto-js/crypto-js.js"></script>
<script type="text/javascript">var encrypted = CryptoJS.AES(...);var encrypted = CryptoJS.SHA256(...);
</script>

项目中使用实例

这里我以 React 作为例子，其他的也就大同小异了。

• 第一步：封装工具类

我们可以写一个工具类，专门封装加密解密的方法，比如我新建一个 cryptoAES.js 的文件，放在 utils 目录下（放哪无所谓），代码如下：

const CryptoJS = require('crypto-js');  //引用AES源码jsconst key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量//解密方法
function (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 将其暴露出去，方便在需要的时候进行引入....

工具类写好了，很简单，然后是怎么使用了~

• 第二步：使用工具类

我们有一个 index.tsx 文件，在这里面使用加密和解密的方法。

这里我只演示加密，解密同理。

import { Decrypt, Encrypt } from '/utils /cryptoAES.js';
.
.
//比如我组装好了拼接的参数
const str = '103170,112425366,253.00,20210428173700'
Encrypt(str)

加密后的结果是：

hoDfJ9U+uY+v8wYKdudbTUR+Z7g1Ui9YraVhfD9g2fMipYlFxnoLE0qbf+YsnEuk

这里有个问题，加密后的字符串里面是包含了+号，发送的话，在进行地址解析时，会把 + 号转换为 空格， 直接导致参数不能正确传输，所以我们用到了 JS 的 encodeURIComponent()，将所有的 + 号 手动转换为 %2B 即可正常传输。

encodeURIComponent(str)
//返回新结果
hoDfJ9U%2BuY%2Bv8wYKdudbTUR%2BZ7g1Ui9YraVhfD9g2fMipYlFxnoLE0qbf%2BYsnEuk

好了，一个简单的前端加密的过程就写完了。

总结

• 使用加密的场景有很多，我这里只讲述了URL地址加密的场景，简单总结下：

• 第一步：安装 crypto-js

• 第二步：引入 crypto-js

• 第三步：封装工具类（当然也可以直接使用）

• 第四步：调用工具类

• 第五步：使用 encodeURIComponent 方法转码，然后拼接

当然，这个是最基础的用法，想深入可查看官方文档！

❤️爱心三连击

1.看到这里了就点个在看支持下吧，你的「点赞，在看」是我创作的动力。
2.关注公众号程序员成长指北，回复「1」加入高级前端交流群！「在这里有好多 前端 开发者，会讨论 前端 Node 知识，互相学习」！
3.也可添加微信【ikoala520】，一起成长。“在看转发”是最大的支持