前端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获 ...
随机推荐
- 并发编程之 线程协作工具 LockSupport
前言 在前面的文章中,我们介绍了并发工具中的4个,Samephore,CyclicBarrier,CountDownLatch,Exchanger,但是我们漏了一个,非常的好用的工具,楼主在这里必须加 ...
- 微信公众号DOM的一个坑
最近不知道写什么,node的源码有点不知道怎么入手,还在努力学习C++中…… 在写微信公众号的时候遇到了一个小bug,有一个tab栏,在开发者工具.IOS手机上都OK,但是一到我的小米note上就GG ...
- winform窗体 小程序【线程】
线程是进程中执行运算的最小单位,也是执行处理机调度的基本单位.实际上线程是轻量级的进程.那么为什么要使用线程呢? (1)易于调度. (2)提高并发性.通过线程可方便有效地实现并发性.进程可创建多个线程 ...
- ORM--Entity Framework 学习(01)
关键词:Entity Framework:微软官方提供的ORM工具,ORM让开发人员节省数据库访问的代码时间,将更多的时间放到业务逻辑层代码上.EF提供变更跟踪.唯一性约束.惰性加载.查询事物等.开发 ...
- python学习之老男孩python全栈第九期_day009之文件操作总结
# 文件处理# 打开文件# open('路径','打开方式', '指定编码方式')# 打开方式:r w a 可读可写:r+ 可写可读:w+ 可追加可读:a+ b# r+ :打开文件直接写,和读完再写 ...
- inline-block元素间隙处理
要使多个块级元素并行显示,可使用float或者inline-block进行处理 使用inline-block会出现元素之间的间隙 <div class="demo"> ...
- 【代码笔记】iOS-mp3的播放
一,工程图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> //加入AVFoundation.framework头文件 #impor ...
- jQuery复选框全选和全选取消
jQuery(".salaryIds").each(function(){ if(jQuery("#salaryIds").attr("checked ...
- AngularJS图片上传功能实践
逻辑理清楚了:service提供FileReader函数,directive提供点击事件的绑定和监听,controller用来修改html上的ng-src属性值 1.HTML <input ty ...
- 如何解决Your project contains C++ files but it is not using a supported native build system
最近因为项目需要下载Android终端模拟器(Android-Terminal-Emulator)源码进行调试编译,编译过程中出现报错 Error:Execution failed for task ...