Sửa lỗi UTF-8 không đúng định dạng trong các dự án React và Spring Boot sau khi nâng cấp Crypto-JS

Khi quá trình nâng cấp bị gián đoạn: Xử lý các thách thức di chuyển tiền điện tử-JS

Việc nâng cấp các phần phụ thuộc trong một dự án thường có thể giống như một con dao hai lưỡi. Một mặt, bạn được hưởng lợi từ các tính năng mới, bảo mật nâng cao và sửa lỗi. Mặt khác, việc vi phạm các thay đổi có thể khiến ứng dụng của bạn rơi vào tình trạng hỗn loạn. Gần đây, trong khi nâng cấp Tiền điện tử-JS từ phiên bản 3.1.9-1 ĐẾN 4.2.0, tôi gặp phải một vấn đề đặc biệt khi mã hóa và giải mã của tôi ngừng hoạt động hoàn toàn. 🛠️

Hãy tưởng tượng điều này: ứng dụng React giao diện người dùng của bạn mã hóa dữ liệu một cách hoàn hảo, nhưng đột nhiên, phần phụ trợ Spring Boot của bạn không thể giải mã được dữ liệu đó. Tệ hơn nữa, các chuỗi được mã hóa trong phần phụ trợ sẽ gây ra lỗi ở giao diện người dùng! Lỗi "không đúng định dạng UTF-8" đáng sợ đã đủ để ngăn chặn quá trình phát triển của nó. Đây chính xác là những gì đã xảy ra trong dự án của tôi khi tôi thực hiện nâng cấp này.

Mặc dù đã gỡ lỗi nhiều giờ nhưng vấn đề vẫn chưa rõ ràng ngay lập tức. Đó có phải là bản cập nhật thư viện không? Cài đặt mã hóa có thay đổi không? Phương pháp phái sinh chính có gây ra kết quả không khớp không? Mỗi giả thuyết đều dẫn đến ngõ cụt. Đó là một hành trình đầy bực bội nhưng mang tính giáo dục buộc tôi phải xem lại tài liệu và mã của mình. 📜

Trong bài viết này, tôi sẽ chia sẻ những bài học tôi đã học được khi giải quyết vấn đề này. Cho dù bạn đang xử lý vấn đề mã hóa không khớp hay đang gặp khó khăn với những thay đổi có thể xảy ra, thì những thông tin chi tiết này có thể giúp bạn tiết kiệm được nhiều giờ gỡ lỗi. Hãy cùng đi sâu tìm hiểu và giải mã bí ẩn đằng sau lỗi "UTF-8 không đúng định dạng" này nhé! 🔍

Tìm hiểu về nâng cấp Crypto-JS và giải quyết các vấn đề về mã hóa

Bước đầu tiên trong việc giải quyết vấn đề tương thích giữa Tiền điện tử-JS Phiên bản 4.2.0 trở về trước đang hiểu cách hoạt động của quá trình mã hóa và giải mã. Trong tập lệnh giao diện người dùng được cung cấp, hàm `generateKey` sử dụng thuật toán PBKDF2 để tạo khóa mã hóa an toàn. Thuật toán này được cấu hình với một loại muối và số lần lặp cụ thể, đảm bảo khả năng bảo vệ mạnh mẽ trước các cuộc tấn công vũ phu. Khi thư viện được cập nhật, những thay đổi nhỏ về cách thức hoạt động của mã hóa hoặc dẫn xuất khóa có thể đã dẫn đến lỗi "UTF-8 không đúng định dạng". Việc đảm bảo rằng cùng một lượng muối và số lần lặp được sử dụng nhất quán giữa giao diện người dùng và phần phụ trợ là rất quan trọng. 🔑

Hàm `encrypt` trong tập lệnh có nhiệm vụ biến dữ liệu văn bản gốc thành văn bản mã hóa Base64 bằng thuật toán AES. Nó sử dụng TLB chế độ mã hóa, hoạt động tốt cho các luồng dữ liệu. Không giống như các chế độ khác, CTR không yêu cầu đệm dữ liệu, khiến chế độ này trở nên lý tưởng cho các hệ thống cần tính hiệu quả. Tuy nhiên, ngay cả một sự không khớp nhỏ trong định dạng vectơ khởi tạo (IV) giữa giao diện người dùng và phụ trợ cũng có thể dẫn đến lỗi trong quá trình giải mã. Một sai lầm phổ biến là hiểu sai cách biểu diễn IV (ví dụ: chuỗi hex so với mảng byte). Việc gỡ lỗi ở bước này yêu cầu xác thực cẩn thận các đầu vào và đầu ra ở mỗi giai đoạn.

Hàm `decrypt` bổ sung cho quá trình mã hóa bằng cách chuyển đổi văn bản mã hóa trở lại thành văn bản gốc có thể đọc được. Để đạt được điều này, phải áp dụng cùng một khóa và IV được sử dụng trong quá trình mã hóa, cùng với các cấu hình nhất quán cho chế độ và phần đệm. Lỗi "UTF-8 không đúng định dạng" thường phát sinh ở đây khi các byte được giải mã bị hiểu sai do sự khác biệt trong cách mã hóa hoặc những sửa đổi không mong muốn đối với dữ liệu đang truyền. Ví dụ: một dự án mà tôi đã thực hiện trước đây đã gặp phải một vấn đề tương tự trong đó phần phụ trợ gửi dữ liệu được mã hóa có mã hóa ký tự khác với giao diện người dùng dự kiến. Việc thử nghiệm mã hóa đa nền tảng với các định dạng nhất quán đã giải quyết được vấn đề. 💡

Cuối cùng, việc đảm bảo khả năng tương thích giữa giao diện người dùng React và phụ trợ Spring Boot không chỉ liên quan đến việc căn chỉnh cấu hình thư viện. Phần phụ trợ sử dụng các thư viện mật mã tích hợp sẵn của Java, thư viện này yêu cầu định dạng cụ thể cho các đầu vào như muối và IV. Các hàm trợ giúp như `hexStringToByteArray` trong tập lệnh phụ trợ thu hẹp khoảng cách bằng cách chuyển đổi biểu diễn thập lục phân thành mảng byte mà lớp Cipher của Java có thể xử lý. Viết bài kiểm tra đơn vị cho cả mã hóa và giải mã trên giao diện người dùng và phụ trợ để đảm bảo tất cả các trường hợp biên đều được xử lý. Cách tiếp cận này đã giúp nhóm của tôi tiết kiệm vô số giờ gỡ lỗi trong một dự án di chuyển gần đây. Với các chiến lược mã hóa và tạo khóa nhất quán, bạn có thể tích hợp liền mạch mã hóa giữa các khung và ngôn ngữ hiện đại. 🚀

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

Khắc phục sự cố mã hóa chéo thư viện giữa Frontend và Backend

Một khía cạnh quan trọng cần xem xét khi xử lý các vấn đề mã hóa giữa lối vào Và phụ trợ là hiểu vai trò của mã hóa. Thư viện như Crypto-JS trong thư viện mật mã của JavaScript và Java thường có những khác biệt nhỏ về cách chúng xử lý mã hóa dữ liệu. Ví dụ, Crypto-JS có thể tạo ra kết quả đầu ra ở dạng thập lục phân hoặc Base64, trong khi Java mong đợi định dạng mảng byte. Sự không khớp ở đây có thể dẫn đến lỗi "UTF-8 không đúng định dạng" khét tiếng khi cố gắng giải mã. Việc đảm bảo rằng cả hai hệ thống đều sử dụng các định dạng nhất quán, chẳng hạn như chuyển đổi chuỗi thành hệ thập lục phân hoặc Base64, có thể giảm thiểu các lỗi này một cách hiệu quả. 🔍

Một vấn đề phổ biến khác phát sinh từ sự khác biệt trong sơ đồ đệm. Theo mặc định, một số thư viện sử dụng các phương pháp đệm như PKCS7, trong khi các thư viện khác, như trong trường hợp này với chế độ CTR, tránh hoàn toàn việc đệm. Điều này làm cho tính nhất quán của cấu hình được ưu tiên hàng đầu. Ví dụ: ở chế độ CTR, kích thước khối phải căn chỉnh hoàn hảo giữa hai môi trường vì không có phần đệm để xử lý các kích thước đầu vào không khớp. Các dự án trong thế giới thực thường thất bại ở đây do giám sát cấu hình, dẫn đến văn bản mã hóa không tương thích và khiến các nhà phát triển thất vọng. Việc thêm các bài kiểm tra đơn vị để mã hóa và giải mã trên cả hai mặt của ứng dụng là vô cùng hữu ích trong việc phát hiện sớm những vấn đề này. 💡

Cuối cùng, đừng bỏ qua tầm quan trọng của các biến môi trường như chìa khóa và muối. Nếu dự án của bạn sử dụng muối được tạo động, hãy đảm bảo chúng được truyền an toàn giữa các hệ thống. Sự không khớp trong các thuật toán phái sinh khóa (ví dụ: PBKDF2 trong Crypto-JS và Java) có thể dẫn đến các khóa mã hóa hoàn toàn khác nhau, khiến việc giải mã không thể thực hiện được. Các công cụ như máy khách REST có thể mô phỏng các yêu cầu bằng muối và IV được xác định trước để gỡ lỗi các tương tác này. Bằng cách chuẩn hóa các tham số mã hóa, dự án của bạn có thể tránh được chức năng bị hỏng sau khi nâng cấp thư viện. 🚀