事件
在开发过程中，我们会经常从当前系统跳转到其他系统进行访问或页面嵌套。
一般会给一个地址进行参数拼接，然后访问。那么就会出现一个问题，就是如果暴露了地址，参数是明文，就会被篡改，这是极不安全的。
这个时候，我们考虑加密。前端和后端商定一个加密方法，然后前端加密参数传到后端，后端解密(可逆)。
加密方法有很多种。今天给大家推荐一个强大的前端加密/解密js库——crypto-js。
什么是加密js
Crypto-js是一个纯javascript编写的加密算法类库，可以用javascript非常方便地对MD5，SHA1，SHA2，SHA3，RIPEMD-160进行哈希运算，对AES，DES，Rabbit，RC4，Triple DES进行加密解密。
吉图布:https://github.com/brix/crypto-js
固定
npm install crypto-js
使用
ES6模块引入方法:
import sha256 from 'crypto-js/sha256';import h***cSHA512 from 'crypto-js/h***c-sha512';import Base*** from 'crypto-js/enc-base***';
模块加载介绍方法:
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为例，其他都差不多。
步骤1:封装工具类
我们可以编写一个专门封装加密和解密方法的工具类。例如，我创建了一个新的cryptoAES.js文件，并将其放在utils目录中(放在哪里并不重要)。代码如下:
const CryptoJS = require('crypto-js'); //引用AES源码js const 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.Base***.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是key，而iv是key offset。这两个参数的前后是约定一致的，这也算是我们的小秘密了。我们不能告诉别人，否则加密的意义就失去了。
注意钥匙的长度。因为对称解密用的算法是AES-128-CBC算法，数据用PKCS#7填充，所以这里的密钥需要16位！
然后我们定义了解密方法Decrypt和加密方法Encrypt，最后通过export和default暴露出来，方便需要时引入…。
类写好了，很简单，然后怎么用~
步骤2:使用工具类。
我们有一个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地址加密的场景。简单总结一下:
步骤1:安装crypto-js
步骤2:引入crypto-js
第三步:封装工具类(当然也可以直接使用)
第四步:调用工具类。
第五步:用encodeURIComponent的方法转码拼接。
当然，这是最基本的用法。如果想深入了解，可以查一下公文！
End:希望范晓的每一篇文章对你有帮助！
本文来自卿尘投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/542633.html
微信扫一扫 
