CryptoJS 加密算法类库自定义加解密方法(三)

最新推荐文章于 2024-05-25 13:46:03 发布

taoqidejingling

最新推荐文章于 2024-05-25 13:46:03 发布

阅读量902

点赞数

分类专栏：随笔文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/taoqidejingling/article/details/122628311

版权

随笔专栏收录该内容

41 篇文章 1 订阅

订阅专栏

自定义加解密方法

key 密钥和 iv 密钥偏移量，一般是请求接口返回，为了方便直接在这里定义
密钥既可以使用 base64 也可以使用 Utf8，看需求前后端加解密一致即可

const key = CryptoJS.enc.Utf8.parse("密钥") // 十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('偏移量') // 十六位十六进制数作为密钥偏移量

加密方法一：

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.toString()
}

解密方法一：

function Decrypt(word) {
  let decrypt = CryptoJS.AES.decrypt(word, key, { 
    iv: iv, 
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  return decryptedStr.toString()
}

解密方法二：

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()
}

AES 麻烦

AES 包括 ECB、CBC 等模式，有的模式包括 iv 参数和 Padding 参数
不同语言对 AES 加密库设计有区别，导致 AES 加密在不同人之间联调会很麻烦
ECB 由于没有使用 iv 参数而不太安全，其他模式差别没有太明显，大部分区别 iv 和 key 计算密文的方法略有区别

padding 作用

使用各种方式填满最后一块字符串
解密端需要使用同样 padding 找到最后一块真实数据长度。padding 模式有 Pkcs5、Pkcs7 等

iv 作用

iv 称为初始向量，不同 iv 加密后的字符串是不同的
加密、解密需要相同的 iv
iv 看起来和 key 一样，却还要多一个 iv 目的；对于每个块来说，key 是不变的，但是只有第一个块 iv 是用户提供的，其他块 iv 都是自动生成
iv 长度为 16 字节。超过或者不足，可能实现的库都会进行补齐或截断。由于块长度是 16 字节，一般可以认为需要的 iv 是16字节

设计 AES 加密

加密端包括：加密秘钥长度，秘钥，iv 值，加密模式，padding 方式
解密端包括：解密秘钥长度，秘钥，iv 值，解密模式，padding 方式

案例

<template>
  <section style="width: 600px; margin: 0 auto;">
    <el-row>
      <el-col :span="10">
        <el-row>
          <el-col :span="24">明文内容</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-input v-model="content" type="textarea" :rows="8"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <div style="margin-top: 60px;">
          <el-row style="margin-bottom: 10px;">
            <el-col :span="24">
              <el-button type="primary" @click="encryptFunction">加密</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-button type="primary" @click="unEncryptFunction">解密</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="10">
        <el-row>
          <el-col :span="24">密文内容</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-input v-model="encryptContent" type="textarea" :rows="8"></el-input>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </section>
</template>
<script>
  import  CryptoJS from 'crypto-js'
  export default {
    data() {
      return {
        content: null,
        encryptContent: null, // 加密内容
        encryptSecretKey: null // 加密密钥
      }
    },
    methods: {
      /** 加密方法 */
      encryptFunction () {
        this.encryptSecretKey = null;
        let objEncrypt = this.encryptByAES(this.content);
        if (objEncrypt) {
          this.encryptContent = objEncrypt.encryptContent;
          this.encryptSecretKey = objEncrypt.encryptSecretKey;
        }
      },
      /**
       * aes加密
       * @param strEncrypt：需要加密的内容
       * @return 返回加密后的内容与加密密钥
       **/
      encryptByAES (strEncrypt) {
        let aesSecretKey = ''; // 16长度随机字符串
        do {
          // NumberObject.toString(36) 代表36进制，string.substr(2) 下标为2的位置开始截取，Math.random() 返回0~1之间的随机数包含0
          aesSecretKey = Math.random().toString(36).substr(2) + Math.random().toString(36).substr(Math.floor(Math.random() * (12 - 5 + 1) + 5))
        } while (aesSecretKey.length != 16);
        let aesSecretUtf8 = CryptoJS.enc.Utf8.parse(aesSecretKey);
        const iv = CryptoJS.enc.Base64.parse('******KKKKKKKKKKKKKKKKK******'); // iv偏移量，加密解密偏移量需要一致
        let aesEncrypt = CryptoJS.AES.encrypt(strEncrypt, aesSecretUtf8, {
          iv,
          mode: CryptoJS.mode.CBC, // 模式
          padding: CryptoJS.pad.Pkcs7 // 补码方式
        });
        let objReturn = {
          encryptContent: aesEncrypt.toString(),
          encryptSecretKey: aesSecretKey
        };
        return objReturn;
      },
      /** 解密方法 */
      unEncryptFunction () {
        this.content = this.unEncryptByAES( this.encryptContent, this.encryptSecretKey)
      },
      /**
       * aes加密
       * @param strEncrypt:需要解密的内容
       * @param keyEncrypt:加密时用到的密钥
       * @return 返回解密后的内容
       **/
      unEncryptByAES (strEncrypt, keyEncrypt) {
        let aesSecretUtf8 = CryptoJS.enc.Utf8.parse(keyEncrypt);
        const iv = CryptoJS.enc.Base64.parse('******KKKKKKKKKKKKKKKKK******');
        let aesUnEncrypt = CryptoJS.AES.decrypt(strEncrypt, aesSecretUtf8, {
          iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7
        });
        return aesUnEncrypt.toString(CryptoJS.enc.Utf8);
      },
    },    
  }
</script>

参考资料：

CryptoJS 加密算法类库AES(二)_taoqidejingling的博客-CSDN博客AES 加解密都要转换成字符串https://blog.csdn.net/taoqidejingling/article/details/122608930
CryptoJS 加密算法类库MD5、Base64(一)_taoqidejingling的博客-CSDN博客_cryptojsCryptoJS 加密算法类库、MD5和Base64区别、MD5加密、Base64加解密https://blog.csdn.net/taoqidejingling/article/details/121762104