关于前端加aes加密的这些事儿

作为一位前端，前天昨天接到了一个小需求，就是做一个实名认证的页面出来，给出的接口文档如下。

说实话刚开始一看以上这段话是有点懵逼的，里面有着什么加密模式，填充，数据块等等。不过自己仔细百度了一下，发现并没有想象中那么难。

AES是一种常用的对称加密算法，加解密都用同一个密钥。但是在应用中要注意，如果加解密双方一方用Nodejs，另一方用Java、PHP等其它语言，需要仔细测试。如果无法正确解密，要确认双方是否遵循同样的AES算法，字符串密钥和IV是否相同，加密后的数据是否统一为hex或base64格式。
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字节。
因为上图里没有要求iv，所以查了下是可以忽略的

PADDING
AES块加密说过，PADDING是用来填充最后一块使得变成一整块，所以对于加密解密两端需要使用同一的PADDING模式，大部分PADDING模式为PKCS5, PKCS7, NOPADDING。
PKCS5Padding和PKCS7Padding是一样的

所以思路如下：
一.
因为项目是用vue-clip搭建的，所以利用npm install crypto-js --save-dev或cnpm install crypto-js --save-dev
二
在项目创建一个js,

import CryptoJS from 'crypto-js'
const key = 'xxxxxxxx'
export default {
  encrypt(text) {
    return CryptoJS.AES.encrypt(text, CryptoJS.enc.Utf8.parse(key), {
      // iv: CryptoJS.enc.Utf8.parse(key),
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }).toString()
  },
   decrypt (text) {
    let decrypted = CryptoJS.AES.decrypt(text, CryptoJS.enc.Utf8.parse(key), 
    {
    //iv: CryptoJS.enc.Utf8.parse(iv), 
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7 
    })
    return decrypted.toString(CryptoJS.enc.Utf8)
  }
}

crypto.js 是一个纯 JavaScript 写的加密算法类库，可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。
参考了以下链接
https://www.cnblogs.com/EnSna...
https://blog.csdn.net/lzrit/a...
https://www.liaoxuefeng.com/w...
https://www.npmjs.com/package...
https://www.cnblogs.com/secre...