前端AES加密详解

似辰亦心 2024-08-02 10:33:01 阅读 88

项目里来来回回一直在用aes,有些时候总会出现和别人加解密不一致的情况,也没看到具体说明很详细的文章,自己花时间研究搜集整理了一下。

一、编码格式

要弄懂aes加解密,首先得先清除编码格式。简单列举说明几种编码格式。

1.base64编码

Base64 编码是通过使用一组 64 个不同的字符表示二进制数据来实现的,包括小写字母a-z、大写字母A-Z、数字0-9、符号"+"、"/"一共64个字符的字符集。

2.Hex编码(十六进制编码)

Hex编码(也称为十六进制编码)是一种将数据转换为十六进制表示形式的编码方法。与base64编码不同,Hex编码使用16个字符来表示数据,这16个字符分别是0-9的数字和A-F的字母(不区分大小写,即a-f和A-F是等价的)。

3.Unicode编码

Unicode编码是一个用于表示字符的编码标准,它允许使用16位或32位的整数序列来表示字符,具体取决于使用的Unicode编码格式。Unicode编码包括但不限于、UTF-8和UTF-7等,每种编码方式都有其特定的应用场景和优缺点。

二、AES前端加密方法

首先要用到crypto-js库,里面包含很多加密方法,我们使用其中的aes加密方法。

1.安装前端加密库crypto-js

npm install crypto-js

2.引入crypto-js

import CryptoJS from 'crypto-js'

3.密钥

aes属于对称加密,加密解密都使用同一个密钥。这里不详细解释,对加密感兴趣的可以自己学习密码学相关知识。aes的密钥长度可以是16字节,24字节,32字节。(1字节=8位,可以使用16位base64编码,32位Hex编码)

4.crypto-js的加密方法

CryptoJS.AES.encrypt(data, key, {

iv:iv,

mode: CryptoJS.mode.ECB,

padding: CryptoJS.pad.Pkcs7

});

该方法接受三个参数,第一个是加密的数据(data),第二个是加密的秘钥(key),第三个是加密方法对象,该对象能接受三个值:iv表示偏移量(CBC模式特有),mode表示加密模式,padding表示填充方式(加解密数据不满16位用于填充的方法)

这是crypto-js提供的加密方法,理论上如果传入字符串类型的参数,方法内部会自动转为WordArray格式。但是为保证规范,我们将上述传入参数都转换为WordArray格式。下面是官网提供各种编码转化方式:

CryptoJS.AES.encrypt方法加密后的结果是一个对象,其中包含了加密后的数据。这个对象通常包含以下属性:

<code>ciphertext: 加密后的数据,以WordArray对象的形式存储。

key: 加密使用的密钥,以WordArray对象的形式存储。

iv: 加密使用的初始化向量(IV),以WordArray对象的形式存储。

所以根据需要加密的编码格式这边可以得到最简单的一个加密过程,下面方法中默认传入的为utf-8编码格式数据,结果输出的是bsae64格式密文。这边注意还有个比较常用的密文输出是Hex编码,通常可以用toString()方法代替CryptoJS.enc.Hex.stringify(),即encrypted.ciphertext.toString()就是将WordArray对象格式转化为Hex编码返回。

function aesEncryptCBC(key,data,iv) {

//将key,data,iv都转化为wordarry格式,根据传入的编码格式选择对应的方法

key = CryptoJS.enc.Utf8.parse(key);

iv = CryptoJS.enc.Utf8.parse(iv);

data= CryptoJS.enc.Utf8.parse(data)

var encrypted = CryptoJS.AES.encrypt(data, key, {

iv:iv,

mode: CryptoJS.mode.CBC,

padding: CryptoJS.pad.Pkcs7

});

//这里返回的是Base64的密文

return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);

}

5.crypto-js的解密方法

同加密方法提到的一些注意点,不再赘述,以下代码中的toString(CryptoJS.enc.Utf8)等同于CryptoJS.enc.Utf8.stringify(encrypted.ciphertext),都是将WardArray转化为utf8编码格式,可以自行选择。

function aesDecrypt(key,encrypted,iv) {

key = CryptoJS.enc.Utf8.parse(key);

encrypted = CryptoJS.enc.Base64.parse(encrypted);

iv = CryptoJS.enc.Utf8.parse(iv);

var decrypted = CryptoJS.AES.decrypt(encrypted, key, {

iv:iv,

mode: CryptoJS.mode.CBC,

padding: CryptoJS.pad.Pkcs7

});

return decrypted.toString(CryptoJS.enc.Utf8);

}

三、总结

主要还是搞清楚各种编码的格式以及CryptoJS提供的WordArray格式转化的方法。其他都是一些基础的传参及取值问题。最后提一个注意点,AES是对称加密,前端加密秘钥总还是没有那么安全,建议采用非对称加密。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。