文章插图
场景在开发过程中 , 我们会经常会从当前系统跳转别的系统进行访问或者页面嵌套使用 。
那一般都会给到一个地址进行参数拼接 , 然后去访问 。那么会存在一个问题 , 就是地址暴露在外面参数使用明文的话会被篡改 , 极度不安全 。
这个时候我们就考虑到加密 , 前端和后端协定好一种加密方式 , 然后前端进行参数加密传到后端 , 后端再去解密(可逆) 。
加密方式也有很多种 , 今天我推荐的是一款强大的前端加密/解密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="https://www.520longzhigu.com/shenghuo/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)
以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助:
- 家教机h8s破解方法最新 步步高家教机h8s
- 无限内购破解版游戏大全 ipad游戏修改器哪个好
- 苹果微信怎么加密码锁 苹果手机微信能上锁吗
- 漫放
- 八字中有灾之年的破解的方法
- 十二生肖婚姻不合的破解秘诀及大利月
- QQ音乐QMC解码器 qq音乐qmc0格式破解
- 如何突破考研英语词汇
- 新年得防熊孩子 几种文件加密的方法盘点
- 什么是最良心的安全加密软件 什么加密软件比较好安全防护