前端CryptoJS和Springboot后端(若依框架)数据互相加解密

在现代Web,App应用中，数据安全是一个不可忽视的话题。在前端和后端之间传输敏感数据时，加密技术能够有效保护这些数据不被未经授权的访问。本文将介绍如何在前端使用 CryptoJS 库进行加密，并在后端使用 Springboot进行解密，实现数据的安全传输。

1. 前端CryptoJS 介绍

CryptoJS是一个广泛使用的JavaScript加密库，支持多种加密算法，如AES、DES和SHA等。它使得在浏览器端对信息进行加密变得简单，从而有效保护用户的隐私安全。

2. Java 加解密介绍

在Springboot，我们同样可以使用内置的加密库来进行数据的加密和解密。Java 提供了 各种包，可以处理多种加密算法。

3.前端加密示例(基于Vue Uniapp)

在前端使用 CryptoJS 对数据进行加密。以下代码段展示了如何使用 AES 算法加密字符串：

#安装模块,不要引入最新包,

npm install crypto-js@3.3.0

注意:不要引入最新包,容易出现问题,引入3.3.0即可

Error: Native crypto module could not be used to get secure random number

#引入模块

import CryptoJS from 'crypto-js'

const key = 'ASDF1234=2=f!yV5Z'; // 密钥,自行修改

 export function aesEncrypt(plaintext) {
        try {
            const ciphertext = 'qZief4Y7nr5O2yK5cQxf9z1C5S7g16AP9fNHrHCeNBM='; // 解密字符串
            const keyBytes = CryptoJS.enc.Utf8.parse(key);
            const encrypted = CryptoJS.AES.encrypt(
                CryptoJS.enc.Utf8.parse(plaintext), keyBytes, {
                    mode: CryptoJS.mode.ECB,  //aes加密模式EcB 前后端使用统一的加密模式
                    padding: CryptoJS.pad.Pkcs7  //使用Pkcs7的方式填充
                }
            );
            const hexStr = CryptoJS.enc.Hex.parse(encrypted.ciphertext.toString());
            return CryptoJS.enc.Base64.stringify(hexStr);
        } catch (e) {
            // console.log("===aesEncrypt ", e);
        }
        return plaintext;
    }
    
 export function aesDecrypt(secrecyStr) {
            try {
                const keyBytes = CryptoJS.enc.Utf8.parse(key);
                const decryptedBytes = CryptoJS.AES.decrypt(secrecyStr, keyBytes, {
                    mode: CryptoJS.mode.ECB,// 前后端一致的加解密模式
                    padding: CryptoJS.pad.Pkcs7// 前后端一致的填充方式
                });
                const decryptedText = decryptedBytes.toString(CryptoJS.enc.Utf8);
                return decryptedText;
            } catch (e) {
                return secrecyStr;
            }
}

// 示例
const testData = 'Hello, World!';
const encryptedData = aesEncrypt(testData);
console.log('Encrypted Data:', encryptedData);

const decryptedData = aesDecrypt(encryptedData);
console.log('Decrypted Data:', decryptedData);

4.后端加密示例(基于若依springboot)

package tech.jhbc.utils;

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

import java.nio.charset.StandardCharsets;
import java.security.DigestException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Arrays;
import java.util.Base64;
import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;
import java.security.Key;
import java.util.Base64;
/**
 *
 * 兼容node
 *
 */
public class CryptoUtil {
    private static final String ALGORITHM = "AES/ECB/PKCS5Padding";
    //密钥
    private static final String key = "SDF1234=2=f!yV5Z";

    public static void main(String[] args) throws Exception {
        String aaa = "测试代码";
        System.out.printf("====== 加密 === 明文 [%s] 密文 [%s] \n", aaa, encrypt(aaa));
        String bbb = "aRCbHShtrpNWJnNg25W69g==";
        System.out.printf("====== 解密 === 密文 [%s] 明文 [%s] \n", bbb, decrypt(bbb));
    }

    public static String encrypt(String data)  {
        try{
            Key aesKey = new SecretKeySpec(key.getBytes(), "AES");
            Cipher cipher = Cipher.getInstance(ALGORITHM);
            cipher.init(Cipher.ENCRYPT_MODE, aesKey);
            byte[] encrypted = cipher.doFinal(data.getBytes(StandardCharsets.UTF_8));
            return Base64.getEncoder().encodeToString(encrypted);
        } catch (Exception e) {
        return null;
    }
    }
    public static String decrypt(String encryptedData) {

        try {
            Key aesKey = new SecretKeySpec(key.getBytes(), "AES");
            Cipher cipher = Cipher.getInstance(ALGORITHM);
            cipher.init(Cipher.DECRYPT_MODE, aesKey);
            byte[] decoded = Base64.getDecoder().decode(encryptedData);
            return new String(cipher.doFinal(decoded), StandardCharsets.UTF_8);
        } catch (Exception e) {
            return null;
        }
    }
}

maven 依赖包

1.在主模块pom.xml上添加

<bcprov-jdk15on.version>1.60</bcprov-jdk15on.version>

<!--前端密码解密-->
<dependency>
    <groupId>org.bouncycastle</groupId>
    <artifactId>bcprov-jdk15on</artifactId>
    <version>${bcprov-jdk15on.version}</version>
</dependency>

2.在子模块pom.xml上

<!--前端密码解密-->
<dependency>
    <groupId>org.bouncycastle</groupId>
    <artifactId>bcprov-jdk15on</artifactId>
</dependency>