[转帖]前端 crypto-js aes 加解密
前端 crypto-js aes 加解密
https://www.jianshu.com/p/a47477e8126a 原来前端也有那么多加密 工具库
前端 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
加解密的方法,是不是感觉很简单啊,用起来很简单,原理可不简单,况且这也只是其中的一种方案,关于加解密的方法还有很多,感兴趣的小伙伴们可以继续做一些深入的研究哈~
至于我呢。。
对了,代码已上传到 GitHub,有需要的小伙伴自行下载~
[转帖]前端 crypto-js aes 加解密的更多相关文章
- .net mvc 站点自带简易SSL加密传输 Word报告自动生成(例如 导出数据库结构) 微信小程序:动画(Animation) SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法,记录一下 CryptoJS与C#AES加解密互转
.net mvc 站点自带简易SSL加密传输 因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net ...
- cryptoJS AES 加解密简单使用
简单记录一下,前端利用 cryptoJS 如何加解密的.主要是关于 AES 加解密. 需求描述:需要对 url 中的参数进行 AES 解密,然后再把该参数进行 MD5 加密通过接口传递. AES AE ...
- aes加解密前后端-后台
一.web.xml: <filter> <filter-name>fastLoginFilter</filter-name> <filter-class> ...
- Java、C#双语版配套AES加解密示例
这年头找个正经能用的东西那是真难,网上一搜索一大堆,正经能用的没几个,得,最后还是得靠自己,正巧遇上需要AES加解密的地方了,而且还是Java和C#间的相互加解密操作,这里做个备忘 这里采用的加解 ...
- C# RSA加解密与验签,AES加解密,以及与JAVA平台的密文加解密
前言: RSA算法是利用公钥与密钥对数据进行加密验证的一种算法.一般是拿私钥对数据进行签名,公钥发给友商,将数据及签名一同发给友商,友商利用公钥对签名进行验证.也可以使用公钥对数据加密,然后用私钥对数 ...
- 收银台数据库存储AES加解密
高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法加密和解密用到的密钥是相同的,这种加密方式加密速度非常快,适合经常发送数据的场合.缺点是密钥的传输 ...
- 转载:Java、C#双语版配套AES加解密示例
转载,原文出处 http://www.cnblogs.com/lzrabbit/p/3639503.html 这年头找个正经能用的东西那是真难,网上一搜索一大堆,正经能用的没几个,得,最后还是得靠自己 ...
- C#与java中的AES加解密互解算法
一.C#版AES加解密算法 public class AESCode { public string Key { get; set; } public string Encrypt(string va ...
- AES加解密算法在Android中的应用及Android4.2以上版本调用问题
from://http://blog.csdn.net/xinzheng_wang/article/details/9159969 AES加解密算法在Android中的应用及Android4.2以上 ...
随机推荐
- Linux下RabbitMQ的集群
一.RabbitMQ安装 1.1.下载Erlang的rpm包 RabbitMQ是Erlang语言编写,所以Erang环境必须要有,注:Erlang环境一定要与RabbitMQ版本匹配:https:// ...
- java equals 和 == 区别
equals 可以重写, == 不可重写 equals 是方法 equals 是 Object 的方法. 基本作用:判断两个对象是否为引用 public class Object { // 省略部分代 ...
- codeforces193B
CF193B Xor sol:发现好像非常不可做的样子,发现n,u都很小,大胆dfs,因为异或偶数次毫无卵用,只要判每次是否做2操作就是了,复杂度O(可过) #include <bits/std ...
- FOI冬令营 Day4
目录 T1.循环流(flow) 传送门 Code T2.整除分块(mex) 传送门 Code T3.森林(forest) 传送门 Code 咕咕咕 T1.循环流(flow) 传送门 Code /* 特 ...
- 【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目
使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g ...
- Vuex学习心得
最近公司项目中使用Vuex做状态管理,就全面温习了一遍文档,然后在项目使用中遇到一些常见问题就一一总结下. 一.由来 我们知道Vue中数据是自顶向下单向流动的,但是以下两种情况单向数据流实现起来十分繁 ...
- Vue自定义日历组件
今天给大家介绍Vue的日历组件,可自定义样式.日历类型及支持扩展,可自定义事件回调.Props数据传输. 线上demo效果 示例 Template: <Calendar :sundayStart ...
- LeetCode 第 153 场周赛
一.公交站间的距离(LeetCode-5181) 1.1 题目描述 1.2 解题思路 比较简单的一题,顺时针.逆时针两次遍历,就能解决. 1.3 解题代码 class Solution { publi ...
- 制作 ESXI6.7 U盘安装盘并用其安装
工具 UltraISO :软碟通官网下载 EXSI镜像文件:http://ddl6.digiboy.ir/vmware/6.7/VMware-VMvisor-Installer-6.7.0-816 ...
- zabbix 定义触发器,并使用邮件,微信消息报警。
触发器可根据监控项获取到的值来进行一些操作,如监控项获取到的values为0,触发器可判断为正常,如果获取到了1,就触发报警. 定义报警方式比较简单,但是用shell脚本实现起来,总是有格式问题,所以 ...