前端crypto-js解密報malformed utf-8 data小結

通常狀況下，不多會在前端進行加解密的操做，由於沒有太大的必要性，前端的代碼是很容易看到的，即便這樣，我以爲仍是有比較處理一下的，至少不讓別人一眼就看到信息

我使用localStorage存儲了一些用戶的用戶名暱稱等的信息，經過crypto-js進行加解密處理，這裏我選用了AES加密算法對json對象數據進行處理

按照官方的例子，以下

var CryptoJS = require("crypto-js");
 
var data = [{id: 1}, {id: 2}]
 
// Encrypt
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret key 123');
 
// Decrypt
var bytes  = CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
 
console.log(decryptedData);

以上代碼在chrome裏運行沒什麼問題，但是在Safari的時候報了malformed utf-8 data

多是前端加解密的場景比較少，搜到若干報這個錯的，可是鮮有解決方法，其中有一個說加密數據不是8的整數倍就會報上述錯誤
解決方法：將數據加密後，再進行base64進行處理

let newUserInfo = {nickname:'hello',email:'abc123@qq.com'};
  //加密數據
  let encJson = cryptoJS.AES.encrypt(JSON.stringify(newUserInfo), 'aes').toString();
  //對加密數據進行base64處理, 原理：就是先將字符串轉換爲utf8字符數組，再轉換爲base64數據
  let encData = cryptoJS.enc.Base64.stringify(cryptoJS.enc.Utf8.parse(encJson));
  localStorage.setItem('userInfo', encData);

  //將數據先base64還原，再轉爲utf8數據
  let decData = cryptoJS.enc.Base64.parse(localStorage.getItem('userInfo')).toString(cryptoJS.enc.Utf8);
  //解密數據
  let decJson = cryptoJS.AES.decrypt(decData, 'aes').toString(cryptoJS.enc.Utf8);
  userInfo = JSON.parse(decJson);
  
  console.log(userInfo);

以上，在safari，chrome，firefox運行沒問題