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」のようなエラーを回避するには、環境間で一貫してテストすることが重要です。

ソルトや初期化ベクトルなどの暗号化設定を調整し、データ交換をシミュレートするツールを使用することで、クロスプラットフォーム互換性を実現できます。単体テストを追加すると、すべてのシナリオが確実に検証され、数え切れないほどのデバッグ時間を節約できます。忍耐強く適切に調整すれば、暗号化ワークフローはシームレスに機能します。 🚀