很多人对于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-jscrypto-js 是一个纯 javascript 写的加密算法类库 ,可以非常方便地在 javascript 进行 MD5SHA1SHA2SHA3RIPEMD-160 哈希散列,进行 AESDESRabbitRC4Triple 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解密实战小结的更多相关文章

  1. 前端AES解密

    使用插件Crypto.JS 安装 npm install --save_dev crypto-js // 导入 crypto-js 包 import CryptoJS from 'crypto-js/ ...

  2. .NET Core加解密实战系列之——对称加密算法

    简介 加解密现状,编写此系列文章的背景: 需要考虑系统环境兼容性问题(Linux.Windows) 语言互通问题(如C#.Java等)(加解密本质上没有语言之分,所以原则上不存在互通性问题) 网上资料 ...

  3. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  4. js中各种跨域问题实战小结(二)

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

  5. js中各种跨域问题实战小结(一)

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  6. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  7. aes 解密出现 java.lang.NumberFormatException: Invalid int: "ch"

    原因: 将加密/解密的seed 和 加密内容顺序放反.  decrypt(String seed, String encrypted) 附上AES解密/加密代码(android开发): package ...

  8. 公众号第三方平台开发-aes解密失败

    公众号第三方平台开发-aes解密失败 问题:本地启动项目,配置域名,测试微信公众号,系统正常运行:将项目部署到测试环境执行同样的操作,系统报错,错误异常:aes解密失败..... 调试--寻找问题-- ...

  9. 微信小程序AES解密失败

    微信小程序分享群获取群id时后端接口返回"微信AES解密失败",后来定位到原因是服务端用于解密的session_key失效.用户获取到openID存在缓存后,就不会每次login获 ...

随机推荐

  1. VS2010 调试C++项目 fatal error LNK1123 错误解决办法

    最近用VS2010写C++项目,奇怪的是每次生成解决方案都有一个fatal error LNK1123错误,提示生成失败.查阅资料总结解决方案如下: (1)项目——>属性——>连接器——& ...

  2. 转载--Json转换

    JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式.XML也是一种数据交换格式,为什么没 ...

  3. [日常] Go语言圣经--包和文件-包初始化习题

    1.解决包级变量的依赖顺序,然后按照包级变量声明出现的顺序依次初始化 2.包中含有多个.go源文件,它们将按照发给编译器的顺序进行初始化 3.init初始化函数,在每个文件中的init初始化函数,在程 ...

  4. 撩课-Web大前端每天5道面试题-Day35

    1.React 中 refs 的作用是什么? Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄. 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM ...

  5. Cuckoo for Hashing(hash)hunnuoj

    Problem B:Cuckoo for HashingAn integer hash table is a data structure that supports insert, delete a ...

  6. HTML自定义标签与标签自定义属性

    大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当. 自定义HTML标签 在firefox.chrome这种现代浏览器里,自定义标签很简单,就 ...

  7. apicloud 自定义模块引用aar

    apicloud 引入aar包,如果使用apicloud自定义模块的话,如果是一般的jar包,我们需要把jar down到本地然后添加到module的libs中就可以了(不要想着用远程地址了,既然用a ...

  8. ThinkPHP实现登陆功能

    思路:前台输入账号密码,后台自定义一个函数checkNamePwd()用于验证账号密码正确与否,在控制器里调用,其中,checkNamePwd()方法验证账号密码正确性是首先通过账号查找密码,然后把查 ...

  9. 使用ThinkPHP实现生成/校验验证码功能

    首先了解父类Verity.class.php(ThinkPHP/Library/Think/Verity.class.php)中的一些函数 1:check() 校验验证码是否正确 2:entry()输 ...

  10. BZOJ3108 [cqoi2013]图的逆变换

    Description 定义一个图的变换:对于一个有向图\(G=(V, E)\),建立一个新的有向图: \(V'=\{v_e|e \in E\}\),\(E'=\{(v_b, v_e)|b=(u,v) ...