修复 Crypto-JS 升级后 React 和 Spring Boot 项目中格式错误的 UTF-8 错误

使用模块化解决方案解决 Crypto-JS 格式错误的 UTF-8 错误

解决方案 1：使用带有更新方法的 Crypto-JS 实现 React 前端

const CryptoJS = require('crypto-js');
const iterationCount = 1000;
const keySize = 128 / 32;
// Generate encryption key
function generateKey(salt, passPhrase) {
  return CryptoJS.PBKDF2(passPhrase, CryptoJS.enc.Hex.parse(salt), {
    keySize: keySize,
    iterations: iterationCount
  });
}
// Encrypt text
function encrypt(salt, iv, plainText) {
  const passPhrase = process.env.REACT_APP_ENCRYPT_SECRET;
  const key = generateKey(salt, passPhrase);
  const encrypted = CryptoJS.AES.encrypt(plainText, key, {
    iv: CryptoJS.enc.Hex.parse(iv),
    mode: CryptoJS.mode.CTR,
    padding: CryptoJS.pad.NoPadding
  });
  return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
}
// Decrypt text
function decrypt(salt, iv, cipherText) {
  const passPhrase = process.env.REACT_APP_DECRYPT_SECRET;
  const key = generateKey(salt, passPhrase);
  const decrypted = CryptoJS.AES.decrypt({
    ciphertext: CryptoJS.enc.Base64.parse(cipherText)
  }, key, {
    iv: CryptoJS.enc.Hex.parse(iv),
    mode: CryptoJS.mode.CTR,
    padding: CryptoJS.pad.NoPadding
  });
  return decrypted.toString(CryptoJS.enc.Utf8);
}
// Example usage
const salt = 'a1b2c3d4';
const iv = '1234567890abcdef1234567890abcdef';
const text = 'Sensitive Data';
const encryptedText = encrypt(salt, iv, text);
console.log('Encrypted:', encryptedText);
const decryptedText = decrypt(salt, iv, encryptedText);
console.log('Decrypted:', decryptedText);

Spring Boot后端解决方案：处理Crypto-JS加密数据

解决方案 2：使用 JDK 加密库实现 Spring Boot Java 后端

import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import javax.crypto.spec.IvParameterSpec;
import java.util.Base64;
// Generate encryption key
public static SecretKeySpec generateKey(String passPhrase, String salt) throws Exception {
  byte[] keyBytes = passPhrase.getBytes("UTF-8");
  byte[] saltBytes = hexStringToByteArray(salt);
  return new SecretKeySpec(keyBytes, "AES");
}
// Encrypt text
public static String encrypt(String plainText, String passPhrase, String salt, String iv) throws Exception {
  SecretKeySpec key = generateKey(passPhrase, salt);
  IvParameterSpec ivSpec = new IvParameterSpec(hexStringToByteArray(iv));
  Cipher cipher = Cipher.getInstance("AES/CTR/NoPadding");
  cipher.init(Cipher.ENCRYPT_MODE, key, ivSpec);
  byte[] encrypted = cipher.doFinal(plainText.getBytes("UTF-8"));
  return Base64.getEncoder().encodeToString(encrypted);
}
// Decrypt text
public static String decrypt(String cipherText, String passPhrase, String salt, String iv) throws Exception {
  SecretKeySpec key = generateKey(passPhrase, salt);
  IvParameterSpec ivSpec = new IvParameterSpec(hexStringToByteArray(iv));
  Cipher cipher = Cipher.getInstance("AES/CTR/NoPadding");
  cipher.init(Cipher.DECRYPT_MODE, key, ivSpec);
  byte[] decodedBytes = Base64.getDecoder().decode(cipherText);
  byte[] decrypted = cipher.doFinal(decodedBytes);
  return new String(decrypted, "UTF-8");
}
// Helper function to convert hex to byte array
public static byte[] hexStringToByteArray(String s) {
  int len = s.length();
  byte[] data = new byte[len / 2];
  for (int i = 0; i < len; i += 2) {
    data[i / 2] = (byte) ((Character.digit(s.charAt(i), 16) << 4)
                     + Character.digit(s.charAt(i+1), 16));
  }
  return data;
}

前端加密和解密的单元测试

解决方案 3：React 加密/解密函数的 Jest 单元测试

const { encrypt, decrypt } = require('./cryptoUtils');
test('Encrypt and decrypt text correctly', () => {
  const salt = 'a1b2c3d4';
  const iv = '1234567890abcdef1234567890abcdef';
  const text = 'Sensitive Data';
  const encryptedText = encrypt(salt, iv, text);
  expect(encryptedText).not.toBe(text);
  const decryptedText = decrypt(salt, iv, encryptedText);
  expect(decryptedText).toBe(text);
});

有关跨库加密挑战的常见问题

1. “格式错误的 UTF-8”错误的最常见原因是什么？
2. 这些错误通常是由于编码格式不匹配而发生的。确保前端和后端同时使用 Base64 或者 hexadecimal 一致的加密输出。
3. 为什么我的后端不解密来自前端的数据？
4. 这可能是密钥生成方法不匹配。使用 PBKDF2 两端具有相同的迭代和盐格式。
5. 不同的 AES 模式会导致解密问题吗？
6. 是的。例如，使用 CTR 模式在前端但是 CBC 在后端会导致密文不兼容。
7. 如何测试加密兼容性？
8. 使用具有相同内容的模拟数据创建单元测试 salt, IV，以及跨前端和后端的明文。
9. 哪些工具可以帮助调试加密问题？
10. 像 Postman 这样的工具可以测试加密请求，同时记录像 log4j 或者 winston 可以在加密期间跟踪值。

解决 Crypto-JS 和 Spring Boot 问题的关键要点

升级 Crypto-JS 等库时，处理加密和密钥派生方式的细微差别可能会导致严重问题。迁移旧版本时经常会出现这种情况，因为编码和填充默认值可能会发生变化。跨环境进行一致的测试对于避免“格式错误的 UTF-8”等错误至关重要。

通过调整盐和初始化向量等加密设置，并使用工具模拟数据交换，可以实现跨平台兼容性。添加单元测试可确保每个场景都得到验证，从而节省无数时间的调试时间。只要有耐心并进行正确的调整，加密工作流程就可以无缝运行。 🚀