前端AES算法加密解密原理及实现

对代码进行重构，页面跳转的时候总是提示参数错误，仔细检查了好几遍，确定就是那几个参数，最后找出原始页面对比，原来必须要加密传输才可以。

事实上，在平时的项目开发中，经常要考虑到对数据进行加密传输的问题。数据在传输的过程中，如果使用原始数据，就可能会出现被监听、被截获、被篡改的情况，会产生非常大的安全隐患。因此开发人员需要在客户端对传输数据进行加密，然后在服务器端进行解密！

看了看原来的代码，确定了他们用的是AES对称加密算法.

AES加密算法分为3种，分别是AES-128，AES-192，AES-256。AES加密的实现主要由4种操作组成，分别是字节代替、行位移、列混淆、轮密钥加。另外还需要对原始密钥进行扩展，这种加密方式计算量小、速度块，适合对大量数据进行加密的场景。

AES加密整套加密系统包括以下几个部分:

• 明文P

没有经过加密的数据。

• 密钥K

用来加密明文的密码，在对称加密算法中，加密与解密的密钥是相同的。密钥为接收方与发送方协商产生，但不可以直接在网络上传输，否则会导致密钥泄漏，通常是通过非对称加密算法加密密钥，然后再通过网络传输给对方，或者直接面对面商量密钥。密钥是绝对不可以泄漏的，否则会被攻击者还原密文，窃取机密数据。

• 加密函数

设AES加密函数为E，则 C = E(K, P),其中P为明文，K为密钥，C为密文。也就是说，把明文P和密钥K作为加密函数的参数输入，则加密函数E会输出密文C。

• 密文C

经加密函数处理后的数据

• 解密函数

设AES解密函数为D，则 P = D(K, C),其中C为密文，K为密钥，P为明文。也就是说，把密文C和密钥K作为解密函数的参数输入，则解密函数会输出明文P。

AES加密的五个必须了解的关键点:

要理解AES的加密流程，会涉及到AES加密的五个关键词，分别是：分组密码体制、Padding、密钥、初始向量IV和四种加密模式

• 分组密码体制：
  将明文切成一段一段的来加密，然后再把一段一段的密文拼起来形成最终密文的加密方式。
  AES采用分组密码体制，即AES加密会首先把明文切成一段一段的，而且每段数据的长度要求必须是128位16个字节，如果最后一段不够16个字节了，就需要用Padding来把这段数据填满16个字节，然后分别对每段数据进行加密，最后再把每段加密数据拼起来形成最终的密文。

• Padding：
  把不满16个字节的分组数据填满16个字节。
  它有三种模式PKCS5、PKCS7和NOPADDING。

1. PKCS5是指分组数据缺少几个字节，就在数据的末尾填充几个字节的几，比如缺少5个字节，就在末尾填充5个字节的5。
2. PKCS7是指分组数据缺少几个字节，就在数据的末尾填充几个字节的0，比如缺少7个字节，就在末尾填充7个字节的0。
3. NoPadding是指不需要填充，也就是说数据的发送方肯定会保证最后一段数据也正好是16个字节。
   如果在PKCS5模式下，最后一段数据的内容刚好就是16个16怎么办？那解密端就不知道这一段数据到底是有效数据还是填充数据了，因此对于这种情况，PKCS5模式会自动帮我们在最后一段数据后再添加16个字节的数据，而且填充数据也是16个16，这样解密段就能知道谁是有效数据谁是填充数据了。PKCS7最后一段数据的内容是16个0，也是同样的道理。解密端需要使用和加密端同样的Padding模式，才能准确的识别有效数据和填充数据。我们开发通常采用PKCS7 Padding模式。

• 初始向量IV：
  初始向量IV的作用是使加密更加安全可靠，我们使用AES加密时需要主动提供初始向量，而且只需要提供一个初始向量就够了，后面每段数据的加密向量都是前面一段的密文。初始向量IV的长度规定为128位16个字节，初始向量的来源为随机生成。至于为什么初始向量能使加密更安全可靠，会在下面的加密模式中提到。

• 密钥：
  AES要求密钥的长度可以是128位16个字节、192位或者256位，位数越高，加密强度自然越大，但是加密的效率自然会低一些，因此要做好衡量。我们开发通常采用128位16个字节的密钥，我们使用AES加密时需要主动提供密钥，而且只需要提供一个密钥就够了，每段数据加密使用的都是这一个密钥，密钥来源为随机生成。

• 四种加密模式：
  AES一共有四种加密模式，分别是ECB（电子密码本模式）、CBC（密码分组链接模式）、CFB、OFB，我们一般使用的是CBC模式。四种模式中除了ECB相对不安全之外，其它三种模式的区别并没有那么大。

加密解密流程如下:

发送方使用密钥K将明文数据P通过AES加密函数加密成密文C，然后发送出去，接收方收到密文C后，使用同一个密钥文件K将密文解密成明文读取。

image.png

以最常见的AES-128为例,加密流程如下

image.png

加密过程：首先明文进行1次轮密钥加；然后循环9轮字节代替、行位移、列混淆、轮密钥加；注意第10轮没有列混淆。

解密过程：解密过程与加密过程相反，这也是对称加密算法的特点。首先密文进行1次轮密钥加；然后循环9轮逆向行位移、逆向字节代替、轮密钥加、逆向列混淆；注意第10轮没有逆向列混淆。

AES-192和AES-256与AES-128相似，只是密钥长度和加密轮数不一样。AES作为对称加密算法，加密和解密用相同密钥；加密速度快，适合用于经常发送数据的场合。

更加详细的算法过程可移步AES加密算法（带示例）

了解了这些原理其实就简单了，网上有很多封装好的加密算法，直接引用并稍加修改即可，具体代码实现如下：

1. 引入crypto-js

npm install crypto-js --save

2. 在src的utils文件夹下新建一个文件：encrypt.js

const CryptoJS = require('crypto-js');  //引用AES源码js
    
    //加密方法
    var encryptKey = '**********'; //秘钥
    function argEncryptByDES(message) {
        var keyHex = CryptoJS.enc.Utf8.parse(encryptKey);
        var ciphertext = CryptoJS.enc.Utf8.parse(message);
        var encrypted = CryptoJS.DES.encrypt(ciphertext, keyHex, {
            mode:CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        return encrypted.toString();
    }

    // 单个参数des解密
    function argDecryptByDES(message) {
        var keyHex = CryptoJS.enc.Utf8.parse(encryptKey);
        var decrypted = CryptoJS.DES.decrypt(message, keyHex, {
            mode:CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        return decrypted.toString(CryptoJS.enc.Utf8);
    }
    
    export default {
        argEncryptByDES, argDecryptByDES
    }

3.在传参页面引入加密解密文件

import encrypt  from "../../utils/encrypt"

4.最后，在传参时记得给参数加密

encrypt.argEncryptByDES(参数)