-
前端你得会——加密解密之crypto-js(建议收藏)
- 网站名称:前端你得会——加密解密之crypto-js(建议收藏)
- 网站分类:技术文章
- 收录时间:2025-07-17 16:35
- 网站地址:
“前端你得会——加密解密之crypto-js(建议收藏)” 网站介绍
场景
在开发过程中,我们会经常会从当前系统跳转别的系统进行访问或者页面嵌套使用。
那一般都会给到一个地址进行参数拼接,然后去访问。那么会存在一个问题,就是地址暴露在外面参数使用明文的话会被篡改,极度不安全。
这个时候我们就考虑到加密,前端和后端协定好一种加密方式,然后前端进行参数加密传到后端,后端再去解密(可逆)。
加密方式也有很多种,今天我推荐的是一款强大的前端加密/解密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源码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.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方法转码,然后拼接
当然,这个是最基础的用法,想深入可查看官方文档!
结尾:希望小凡的每篇文章对你都有所帮助!
关注我,一起学习进步
更多相关网站
- 这13个前端库,帮我在工作中赢得了不少摸鱼时间
- 实例讲解vue实现CBC加密/解密(vue数据加密)
- 鸿蒙NEXT开发中如何确保使用 PersistentStorage 存储的数据安全?
- 如何利用CryptoJS对请求参数进行MD5/AES加解密—ApiPost
- 【验证码逆向专栏】最新某度旋转验证码 v2 逆向分析
- 不得不知的网络安全知识(网络 安全知识)
- 基于Vue.js的http网站如何实现帐号密码加密传输?
- 加解密的艺术(加密艺术百度百科)
- 更好搜索体验,火狐Firefox33.0.0.5397官方下载
- JavaScript学习 -- AES加密算法(aes加密算法原理及步骤)
- Go进阶AES对称 Crypto-JS 加密和Go解密
- 前端js加密解密常用的六种方法(前端加密技术)
- 前端开发遇上新挑战,如何巧妙应对?
- 实现前端传递参数进行加密,Java后端接收数据解密
- 绿联NAS私有云安装青龙面板实现自动化任务
- crypto-js加解密库使用-环境部署及测试
- 最近发表
- 标签列表
-
- mydisktest_v298 (35)
- sql 日期比较 (33)
- document.appendchild (35)
- 头像打包下载 (35)
- 二调符号库 (23)
- acmecadconverter_8.52绿色版 (25)
- 梦幻诛仙表情包 (36)
- 魔兽模型 (23)
- java面试宝典2019pdf (26)
- disk++ (30)
- vncviewer破解版 (20)
- word文档批量处理大师破解版 (19)
- pk10牛牛 (20)
- 加密与解密第四版pdf (29)
- iteye (26)
- parsevideo (22)
- ckeditor4中文文档 (20)
- centos7.4下载 (32)
- cuda10.1下载 (22)
- intouch2014r2sp1永久授权 (33)
- usb2.0-serial驱动下载 (24)
- 魔兽争霸全图 (21)
- jdk1.8.0_191下载 (27)
- axure9注册码 (30)
- gitlab日志 (20)