【Vue】使用CryptoJS进行加密解密

前言

业务需求： 由于公司项目为了确保数据传输的安全性，防止别人的抓包和数据泄露，需要对敏感数据进行加密传输。
实现思路： 使用CryptoJS实现对称加密解密。

---

一、对称加密和非对称加密

1、对称加密

1. 定义：对称加密（Symmetric Encryption）使用相同的密钥来进行加密和解密。
2. 使用场景：相对于大一点的数据量或关键数据的加密，如请求参数。
3. 常见的对称加密算法有：DES（Data Encryption Standard）、3DES（Triple DES）、AES（Advanced Encryption Standard）和RC4（Rivest Cipher 4）等。AES是DES的升级版，密钥长度更长，选择更多，也更灵活，安全性更高。
   • AES使用固定长度的密钥（128位、192位或256位）对数据进行加密和解密，相较于DES和3DES更为安全。
   • AES使用代替、置换和混淆等操作来实现高强度的加密。
   • AES的加密速度较快，因为它使用了高度优化的算法，目前被广泛应用于各种安全领域。
4. 优点：算法公开、计算量小、加解密速度快、适合对大量数据进行加密处理。
5. 缺点：发送方和接收方必须商定好密钥，并使用该密钥进行加密和解密操作。密钥管理困难，需要事先共享密钥，并确保密钥的安全传递。

2、非对称加密

1. 定义：非对称加密（Asymmetric Encryption）使用一对不同但相关的密钥，分别称为公钥（Public Key）和私钥（Private Key），公钥用于加密数据，而私钥用于解密数据或者进行数字签名。公钥可以被公开传播，而私钥则必须私密保存。
2. 使用场景：对安全性要求很高的场景，适合加密少量数据，如支付数据、CA数字证书、身份验证等。
3. 常见的对称加密算法有：RSA（Rivest, Shamir, Adleman）、DSA（Digital Signature Algorithm）和ECC（Elliptic Curve Cryptography）。RSA2比RSA有更强的安全能力。
4. 优点：密钥管理较为方便，不需要事先共享密钥。
5. 缺点：加解密速度较慢，不适合对大量数据进行加密处理。

二、使用CryptoJS实现对称加密

1、安装crypto-js

1. 直接使用：引入crypto-js文件，下载对称加密AES js库
2. 安装依赖：npm install crypto-js ，再引入：import 或 require

import CryptoJS from 'crypto-js'
// const CryptoJS = require('crypto-js')
1
2

2、AES对称加密/解密

(1).CryptoJS相关属性说明

CryptoJS.AES，CryptoJS.AES.encrypt加密、CryptoJS.AES.decrypt解密：

1. value：加密/解密的字符串
2. key：密钥
3. iv：密钥偏移量
4. mode加密模式，使用 CryptoJS.mode.xxx，有如下参数：
   • CBC（Cipher Block Chaining） (the default)加密块链模式
   • CFB（Cipher Feedback block）加密反馈模式
   • CTR/CTRGladman（Counter block）
   • OFB（Output Feedback block）输出反馈模式
   • ECB（Electronic Codebook block）电子密码本模式
5. padding填充方式，使用方 CryptoJS.pad.xxx，有如下参数：
   • Pkcs7 (the default)
   • AnsiX923
   • Iso10126
   • Iso97971
   • ZeroPadding
   • NoPadding
6. encoding编码格式，从编码格式转换为WordArray对象，反之亦然。使用CryptoJS.enc.xxx.parse、CryptoJS.enc.xxx.stringify，有如下参数：
   • Hex
   • Latin1
   • Utf8
   • Utf16
   • Base64

附上官网文档链接

(2).代码示例一

由于对称加密使用AES-128-CBC算法，采用的PKCS7填充的，因此密钥key的长度为16位。下面示例使用CryptoJS.mode.CBC和CryptoJS.pad.Pkcs7

const CryptoJS = require('crypto-js')
// AES对称加密
export function encryptionValue(value, key = 'thanks66', iv = 'thanks88') {
  value = value.toString() // 数字加密会报错，转成字符串
  // value = CryptoJS.enc.Utf8.parse(value)
  key = CryptoJS.enc.Utf8.parse(key)
  iv = CryptoJS.enc.Utf8.parse(iv)
  // key = CryptoJS.enc.Latin1.parse(key)
  // iv = CryptoJS.enc.Latin1.parse(iv)
  const encrypted = CryptoJS.AES.encrypt(value, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return encrypted.toString()
}
// AES对称解密
export function decryptionValue(value, key = 'thanks66', iv = 'thanks88') {
  // value = CryptoJS.enc.Utf8.parse(value)
  key = CryptoJS.enc.Utf8.parse(key)
  iv = CryptoJS.enc.Utf8.parse(iv)
  // key = CryptoJS.enc.Latin1.parse(key)
  // iv = CryptoJS.enc.Latin1.parse(iv)
  const decrypt = CryptoJS.AES.decrypt(value, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return decrypt.toString(CryptoJS.enc.Utf8)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    console.log('2===', phone);
    const phone1 = encryptionValue(phone)
    console.log('加密===', encryptionValue(phone));
    console.log('解密===', decryptionValue(phone1));
1
2
3
4

加密解密结果：
使用iv: key，同一个字符串多次加密，保持加密值不变。

加密解密结果：

(3).代码示例二

encrypted.ciphertext 形式的加密结果怎么解密呢？

const CryptoJS = require('crypto-js')
// AES对称加密
export function encryptionValue(value, key = 'thanks66', iv = 'thanks88') {
  value = value.toString() // 数字加密会报错，转成字符串
  // value = CryptoJS.enc.Utf8.parse(value)
  key = CryptoJS.enc.Utf8.parse(key)
  iv = CryptoJS.enc.Utf8.parse(iv)
  // key = CryptoJS.enc.Latin1.parse(key)
  // iv = CryptoJS.enc.Latin1.parse(iv)
  const encrypted = CryptoJS.AES.encrypt(value, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return encrypted.ciphertext.toString()
}
// AES对称解密
export function decryptionValue(value, key = 'thanks66', iv = 'thanks88') {
  // value = CryptoJS.enc.Utf8.parse(value)
  key = CryptoJS.enc.Utf8.parse(key)
  iv = CryptoJS.enc.Utf8.parse(iv)
  // key = CryptoJS.enc.Latin1.parse(key)
  // iv = CryptoJS.enc.Latin1.parse(iv)
  const encryptedHexStr = CryptoJS.enc.Hex.parse(value);
  const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  const decrypt = CryptoJS.AES.decrypt(srcs, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return decrypt.toString(CryptoJS.enc.Utf8)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

---

总结

注意：前后端的密钥、偏移量、加密模式、填充方式和编码格式等需保持一致。

---