Memperbaiki Kesalahan UTF-8 yang Rusak di Proyek React dan Spring Boot Setelah Peningkatan Crypto-JS

Saat Peningkatan Terputus: Menangani Tantangan Migrasi Crypto-JS

Meningkatkan ketergantungan dalam suatu proyek sering kali terasa seperti pedang bermata dua. Di satu sisi, Anda mendapat manfaat dari fitur baru, peningkatan keamanan, dan perbaikan bug. Di sisi lain, perubahan yang dapat menyebabkan gangguan dapat menyebabkan aplikasi Anda kacau. Baru-baru ini, saat melakukan peningkatan Kripto-JS dari versi 3.1.9-1 ke 4.2.0, saya mengalami masalah aneh ketika kode enkripsi dan dekripsi saya berhenti berfungsi sama sekali. 🛠️

Bayangkan ini: aplikasi React frontend Anda mengenkripsi data dengan sempurna, tetapi tiba-tiba, backend Spring Boot Anda tidak dapat mendekripsinya. Lebih buruk lagi, string yang dienkripsi di backend memicu kesalahan di frontend! Kesalahan "UTF-8 cacat" yang ditakuti sudah cukup untuk menghentikan pengembangan. Inilah yang terjadi dalam proyek saya ketika saya menangani peningkatan ini.

Meskipun telah dilakukan proses debug selama berjam-jam, masalahnya tidak segera teratasi. Apakah itu pembaruan perpustakaan? Apakah pengaturan enkripsi berubah? Apakah metode derivasi kunci menyebabkan hasil yang tidak sesuai? Setiap hipotesis menemui jalan buntu. Itu adalah perjalanan yang membuat frustrasi namun mendidik yang memaksa saya untuk meninjau kembali dokumentasi dan kode saya. 📜

Dalam artikel ini, saya akan membagikan pembelajaran yang saya peroleh saat menyelesaikan masalah ini. Baik Anda menghadapi enkripsi yang tidak cocok atau kesulitan mengatasi perubahan, wawasan ini mungkin dapat menyelamatkan Anda dari berjam-jam proses debug. Mari selami dan jelaskan misteri di balik kesalahan "format UTF-8" ini! 🔍

Memahami Peningkatan Crypto-JS dan Mengatasi Masalah Enkripsi

Langkah pertama dalam menyelesaikan masalah kompatibilitas antar Kripto-JS 4.2.0 dan versi sebelumnya memahami cara kerja proses enkripsi dan dekripsi. Dalam skrip frontend yang disediakan, fungsi `generateKey` menggunakan algoritma PBKDF2 untuk membuat kunci enkripsi yang aman. Algoritme ini dikonfigurasi dengan garam tertentu dan jumlah iterasi, memastikan perlindungan yang kuat terhadap serangan brute force. Ketika perpustakaan diperbarui, perubahan halus dalam cara kerja derivasi atau pengkodean kunci mungkin telah menyebabkan kesalahan "format UTF-8 yang salah". Memastikan bahwa jumlah garam dan iterasi yang sama digunakan secara konsisten antara frontend dan backend sangatlah penting. 🔑

Fungsi `enkripsi` dalam skrip bertanggung jawab untuk mengubah data teks biasa menjadi teks sandi berkode Base64 menggunakan algoritma AES. Ini menggunakan RKT mode untuk enkripsi, yang berfungsi dengan baik untuk aliran data. Berbeda dengan mode lainnya, CTR tidak memerlukan data yang harus diisi, sehingga ideal untuk sistem yang memerlukan efisiensi. Namun, bahkan ketidakcocokan kecil dalam format vektor inisialisasi (IV) antara frontend dan backend dapat mengakibatkan kesalahan selama dekripsi. Kesalahan umum adalah kesalahpahaman bagaimana IV direpresentasikan (misalnya, string hex versus array byte). Men-debug langkah ini memerlukan validasi input dan output yang cermat pada setiap tahap.

Fungsi `decrypt` melengkapi proses enkripsi dengan mengubah ciphertext kembali menjadi plaintext yang dapat dibaca. Untuk mencapai hal ini, kunci dan IV yang sama yang digunakan selama enkripsi harus diterapkan, bersama dengan konfigurasi mode dan padding yang konsisten. Kesalahan "UTF-8 cacat" sering muncul di sini ketika byte yang didekripsi disalahartikan karena perbedaan dalam pengkodean atau modifikasi tak terduga pada data dalam perjalanan. Misalnya, proyek yang saya kerjakan sebelumnya menghadapi masalah serupa ketika backend mengirimkan data terenkripsi dengan pengkodean karakter berbeda dari yang diharapkan frontend. Menguji enkripsi lintas platform dengan format yang konsisten menyelesaikan masalah. 💡

Terakhir, memastikan kompatibilitas antara frontend React dan backend Spring Boot melibatkan lebih dari sekadar menyelaraskan konfigurasi perpustakaan. Backend menggunakan perpustakaan kriptografi bawaan Java, yang memerlukan pemformatan khusus untuk input seperti garam dan IV. Fungsi pembantu seperti `hexStringToByteArray` di skrip backend menjembatani kesenjangan tersebut dengan mengubah representasi heksadesimal menjadi array byte yang dapat diproses oleh kelas Cipher Java. Pengujian unit penulisan untuk enkripsi dan dekripsi pada frontend dan backend memastikan semua kasus edge tercakup. Pendekatan ini menghemat waktu berjam-jam bagi tim saya untuk melakukan debug selama proyek migrasi baru-baru ini. Dengan pembuatan kunci dan strategi pengkodean yang konsisten, Anda dapat mengintegrasikan enkripsi dengan lancar antara kerangka kerja dan bahasa modern. 🚀

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);

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;
}

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);
});

Memecahkan Masalah Enkripsi Lintas Perpustakaan Antara Frontend dan Backend

Salah satu aspek penting yang perlu dipertimbangkan ketika menangani masalah enkripsi antar bagian depan Dan bagian belakang adalah memahami peran pengkodean. Perpustakaan seperti Crypto-JS di JavaScript dan perpustakaan kriptografi Java sering kali memiliki perbedaan halus dalam cara mereka menangani pengkodean data. Misalnya, Crypto-JS mungkin menghasilkan keluaran dalam heksadesimal atau Base64, sementara Java mengharapkan format array byte. Ketidakcocokan di sini dapat menyebabkan kesalahan "UTF-8 salah format" yang terkenal saat mencoba dekripsi. Memastikan bahwa kedua sistem menggunakan format yang konsisten, seperti mengubah string menjadi heksadesimal atau Base64, dapat mengurangi kesalahan ini secara efektif. 🔍

Masalah umum lainnya muncul dari perbedaan skema padding. Secara default, beberapa perpustakaan menggunakan metode padding seperti PKCS7, sementara yang lain, seperti dalam skenario dengan mode CTR ini, menghindari padding sama sekali. Hal ini menjadikan konsistensi konfigurasi sebagai prioritas utama. Misalnya, dalam mode CTR, ukuran blok harus selaras sempurna antara kedua lingkungan, karena tidak ada padding untuk menangani ukuran masukan yang tidak cocok. Proyek dunia nyata sering kali gagal karena kesalahan konfigurasi, yang menyebabkan teks sandi tidak kompatibel dan pengembang frustrasi. Menambahkan pengujian unit untuk enkripsi dan dekripsi di kedua sisi aplikasi sangat berharga untuk mendeteksi masalah ini sejak dini. 💡

Terakhir, jangan mengabaikan pentingnya variabel lingkungan seperti kunci dan garam. Jika proyek Anda menggunakan garam yang dihasilkan secara dinamis, pastikan garam tersebut diteruskan dengan aman antar sistem. Ketidakcocokan dalam algoritma derivasi kunci (misalnya, PBKDF2 di Crypto-JS dan Java) dapat mengakibatkan kunci enkripsi yang sangat berbeda, sehingga dekripsi menjadi tidak mungkin dilakukan. Alat seperti klien REST dapat menyimulasikan permintaan dengan garam dan IV yang telah ditentukan sebelumnya untuk men-debug interaksi ini. Dengan menstandardisasi parameter enkripsi, proyek Anda dapat menghindari kerusakan fungsi setelah peningkatan perpustakaan. 🚀