前端aes解密实战小结
很多人对于AES加密并不是很了解,导致互相之间进行加密解密困难。
本文用简单的方式来介绍AES在使用上需要的知识,而不涉及内部算法。最后给出例子来帮助理解AES加密解密的使用方法。
AES的麻烦
相比于其他加密,AES加密似乎模式很多,包括ECB、CBC等等等等,每个模式又包括IV参数和Padding参数,并且,不同语言对AES加密的库设计有区别。这些导致AES加密在不同人之间联调会很麻烦。
AES属于块加密
不难理解,对越长的字符串进行加密,代价越大,所以通常对明文进行分段,然后对每段明文进行加密,最后再拼成一个字符串。块加密的一个要面临的问题就是如何填满最后一块?所以这就是PADDING的作用,使用各种方式填满最后一块字符串,所以对于解密端,也需要用同样的PADDING来找到最后一块中的真实数据的长度。
加密模式
AES分为几种模式,比如ECB,CBC,CFB等等,这些模式除了ECB由于没有使用IV而不太安全,其他模式差别并没有太明显,大部分的区别在IV和KEY来计算密文的方法略有区别。具体可参考WIKI的说明。
另外,AES分为AES128,AES256等,表示期待秘钥的长度,比如AES256秘钥的长度应该是256/8的32字节,一些语言的库会进行自动截取,让人以为任何长度的秘钥都可以。而这其实是有区别的。
IV的作用
IV称为初始向量,不同的IV加密后的字符串是不同的,加密和解密需要相同的IV,既然IV看起来和key一样,却还要多一个IV的目的,对于每个块来说,key是不变的,但是只有第一个块的IV是用户提供的,其他块IV都是自动生成。
IV的长度为16字节。超过或者不足,可能实现的库都会进行补齐或截断。但是由于块的长度是16字节,所以一般可以认为需要的IV是16字节。
PADDING
AES块加密说过,PADDING是用来填充最后一块使得变成一整块,所以对于加密解密两端需要使用同一的PADDING模式,大部分PADDING模式为PKCS5, PKCS7, NOPADDING。
加密解密端
所以,在设计AES加密的时候
- 对于加密端,应该包括:加密秘钥长度,秘钥,IV值,加密模式,PADDING方式。
- 对于解密端,应该包括:解密秘钥长度,秘钥,IV值,解密模式,PADDING方式。
这里我以 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
将其暴露出去,方便在需要的时候进行引入~
前端aes解密实战小结的更多相关文章
- 前端AES解密
使用插件Crypto.JS 安装 npm install --save_dev crypto-js // 导入 crypto-js 包 import CryptoJS from 'crypto-js/ ...
- .NET Core加解密实战系列之——对称加密算法
简介 加解密现状,编写此系列文章的背景: 需要考虑系统环境兼容性问题(Linux.Windows) 语言互通问题(如C#.Java等)(加解密本质上没有语言之分,所以原则上不存在互通性问题) 网上资料 ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- js中各种跨域问题实战小结(二)
这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...
- js中各种跨域问题实战小结(一)
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
- 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...
- aes 解密出现 java.lang.NumberFormatException: Invalid int: "ch"
原因: 将加密/解密的seed 和 加密内容顺序放反. decrypt(String seed, String encrypted) 附上AES解密/加密代码(android开发): package ...
- 公众号第三方平台开发-aes解密失败
公众号第三方平台开发-aes解密失败 问题:本地启动项目,配置域名,测试微信公众号,系统正常运行:将项目部署到测试环境执行同样的操作,系统报错,错误异常:aes解密失败..... 调试--寻找问题-- ...
- 微信小程序AES解密失败
微信小程序分享群获取群id时后端接口返回"微信AES解密失败",后来定位到原因是服务端用于解密的session_key失效.用户获取到openID存在缓存后,就不会每次login获 ...
随机推荐
- [转]本地 Windows 计算机密码登录 登录 腾讯云 Linux 实例
本文转自:https://cloud.tencent.com/document/product/213/5436? 登录工具 使用 远程登录软件 ,采用密码登录 Linux 实例(本例中选择使用 Pu ...
- Jquery自定义动画与动画队列
animate:自定义动画 $(selector).animate({params},[speed],[easing],[callback]); params:要执行动画的css属性,它是一个对象可以 ...
- mybatis-generator-maven逆向工程
在idea 中使用 mybatis的 mybatis-generator-maven-plugin 可以根据数据库 生成 dao层,pojo类,Mapper文件. 一: 在 pom.xml ...
- 【ibatis】IBatis的动态SQL的写法
Ⅰ .动态SQL的写法 开始 <dynamic 条件成立时前面要加的字符串 prepend ="字符串"> prepend="字符串" 判断条件的对 ...
- 码云创建maven工程
码云创建maven工程步骤 1.现在码云上创建工程2.拉取到本地3.使用"touch .gitignore"命令创建.gitignore文件4.在文件中添加过滤文件: .setti ...
- oracle上机实验内容
这是oracle实验的部分代码,我花了一中午做的. 第一次上机内容 实验目的:熟悉ORACLE11G的环境 实验内容: 第二次上机内容 实验目标:掌握oracle体系结构,掌握sqlplus的运行环境 ...
- Navicat11全系列激活工具和使用方法
Navicat特别好使,但是就是得注册,在网上看到了一个激活工具,成功激活了Navicat...工具链接地址是.. https://files.cnblogs.com/files/miantiaoan ...
- stylus常用写法
带参数 border-radius(val) -webkit-border-radius: val -moz-border-radius: val border-radius: val button ...
- 【读书笔记】iOS-网络-HTTP-URL百分号编码
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ty ...
- CSS布局之——对齐方式
一.水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本.图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的display设置为inline ...