CryptoJS中AES实现前后端通用加解密技术

CryptoJS是一个流行的JavaScript加密库，提供了诸如AES、SHA-1、SHA-256等常用的加密算法。在前后端通信过程中，为了增加数据的安全性，我们常常需要对数据进行加密。本文将详细介绍如何使用CryptoJS中AES实现前后端通用加解密技术。

1. CryptoJS简介

CryptoJS是一种纯JavaScript库，可用于各种加密算法和解密算法，也可用于哈希函数。它支持两种加密模式：流加密模式和块加密模式。加密算法包括AES、DES、TripleDES、RC4等。

2. 前端加密实现

首先，我们需要引入CryptoJS的核心库和AES模块，如下所示：

<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/enc-base64.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/aes.min.js"></script>

接下来，我们可以使用如下的AES加密和解密函数：

// AES加密
function aesEncrypt(data, secretKey) {
    let key = CryptoJS.enc.Utf8.parse(secretKey);
    let iv = CryptoJS.enc.Utf8.parse(secretKey);
    let encrypted = CryptoJS.AES.encrypt(data, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
}

// AES解密
function aesDecrypt(data, secretKey) {
    let key = CryptoJS.enc.Utf8.parse(secretKey);
    let iv = CryptoJS.enc.Utf8.parse(secretKey);
    let decrypted = CryptoJS.AES.decrypt(data, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return decrypted.toString(CryptoJS.enc.Utf8);
}

其中，data为要加密或解密的数据，secretKey为密钥。

3. 后端加密实现

在后端的加密过程中，我们可以使用Java的CryptoJS库。首先，我们需要将前端的AES加密函数所使用的密钥转换为Java中的密钥格式，示例如下：

// 将前端密钥进行转换
private static SecretKeySpec getKey(String key) throws Exception {
    byte[] rawKey = key.getBytes(StandardCharsets.UTF_8);
    byte[] keyBytes = new byte[16];
    int len = rawKey.length;
    if (len > keyBytes.length) {
        len = keyBytes.length;
    }
    System.arraycopy(rawKey, 0, keyBytes, 0, len);
    return new SecretKeySpec(keyBytes, "AES");
}

然后，我们可以使用如下的Java函数进行AES加密和解密：

// AES加密
public static String aesEncrypt(String data, String secretKey) throws Exception {
    SecretKeySpec key = getKey(secretKey);
    byte[] iv = secretKey.getBytes(StandardCharsets.UTF_8);
    IvParameterSpec ivSpec = new IvParameterSpec(iv);
    Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
    cipher.init(Cipher.ENCRYPT_MODE, key, ivSpec);
    byte[] encrypted = cipher.doFinal(data.getBytes());
    return Base64.getEncoder().encodeToString(encrypted);
}

// AES解密
public static String aesDecrypt(String data, String secretKey) throws Exception {
    SecretKeySpec key = getKey(secretKey);
    byte[] iv = secretKey.getBytes(StandardCharsets.UTF_8);
    IvParameterSpec ivSpec = new IvParameterSpec(iv);
    Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
    cipher.init(Cipher.DECRYPT_MODE, key, ivSpec);
    byte[] decrypted = cipher.doFinal(Base64.getDecoder().decode(data));
    return new String(decrypted, StandardCharsets.UTF_8);
}

其中，data为要加密或解密的数据，secretKey为密钥。

4. 示例说明

下面，我们分别以前端React框架和后端Spring Boot框架为例，演示如何使用CryptoJS中AES实现前后端通用加解密技术。

前端示例

import CryptoJS from 'crypto-js';

const secretKey = '123456';

// 加密数据
const data = 'hello world';
const encryptedData = aesEncrypt(data, secretKey);
console.log('encryptedData:', encryptedData);

// 解密数据
const decryptedData = aesDecrypt(encryptedData, secretKey);
console.log('decryptedData:', decryptedData);

后端示例

import java.nio.charset.StandardCharsets;
import java.util.Base64;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

public class CryptoUtil {

    private static SecretKeySpec getKey(String key) throws Exception {
        byte[] rawKey = key.getBytes(StandardCharsets.UTF_8);
        byte[] keyBytes = new byte[16];
        int len = rawKey.length;
        if (len > keyBytes.length) {
            len = keyBytes.length;
        }
        System.arraycopy(rawKey, 0, keyBytes, 0, len);
        return new SecretKeySpec(keyBytes, "AES");
    }

    public static String aesEncrypt(String data, String secretKey) throws Exception {
        SecretKeySpec key = getKey(secretKey);
        byte[] iv = secretKey.getBytes(StandardCharsets.UTF_8);
        IvParameterSpec ivSpec = new IvParameterSpec(iv);
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
        cipher.init(Cipher.ENCRYPT_MODE, key, ivSpec);
        byte[] encrypted = cipher.doFinal(data.getBytes());
        return Base64.getEncoder().encodeToString(encrypted);
    }

    public static String aesDecrypt(String data, String secretKey) throws Exception {
        SecretKeySpec key = getKey(secretKey);
        byte[] iv = secretKey.getBytes(StandardCharsets.UTF_8);
        IvParameterSpec ivSpec = new IvParameterSpec(iv);
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
        cipher.init(Cipher.DECRYPT_MODE, key, ivSpec);
        byte[] decrypted = cipher.doFinal(Base64.getDecoder().decode(data));
        return new String(decrypted, StandardCharsets.UTF_8);
    }

    public static void main(String[] args) throws Exception {
        String secretKey = "123456";

        // 加密数据
        String data = "hello world";
        String encryptedData = aesEncrypt(data, secretKey);
        System.out.println("encryptedData:" + encryptedData);

        // 解密数据
        String decryptedData = aesDecrypt(encryptedData, secretKey);
        System.out.println("decryptedData:" + decryptedData);
    }
}

在以上两个示例中，我们都使用了123456作为密钥对hello world进行加解密，并输出了加密和解密的结果。

总结

本文介绍了CryptoJS中AES实现前后端通用加解密技术的完整攻略，包括前端和后端的加密实现方法以及示例说明。通过本文的学习，我们可以更好地保障数据的安全性，在前后端通信过程中更加安全可靠地传输数据。