前端crypto-js解密報(bào)malformed utf-8 data小結(jié)

codergarden 發(fā)布于2019-08-23 14:21 / 6097人閱讀

摘要：一般情況下，很少會(huì)在前端進(jìn)行加解密的操作，因?yàn)闆](méi)有太大的必要性，前端的代碼是很容易看到的，即使這樣，我覺(jué)得還是有比較處理一下的，至少不讓別人一眼就看到信息我使用存儲(chǔ)了一些用戶(hù)的用戶(hù)名昵稱(chēng)等的信息，通過(guò)進(jìn)行加解密處理，這里我選用了加密算法對(duì)

一般情況下，很少會(huì)在前端進(jìn)行加解密的操作，因?yàn)闆](méi)有太大的必要性，前端的代碼是很容易看到的，即使這樣，我覺(jué)得還是有比較處理一下的，至少不讓別人一眼就看到信息

我使用localStorage存儲(chǔ)了一些用戶(hù)的用戶(hù)名昵稱(chēng)等的信息，通過(guò)crypto-js進(jìn)行加解密處理，這里我選用了AES加密算法對(duì)json對(duì)象數(shù)據(jù)進(jìn)行處理

按照官方的例子，如下

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里運(yùn)行沒(méi)什么問(wèn)題，可是在Safari的時(shí)候報(bào)了malformed utf-8 data

可能是前端加解密的場(chǎng)景比較少，搜到若干報(bào)這個(gè)錯(cuò)的，但是鮮有解決方法，其中有一個(gè)說(shuō)加密數(shù)據(jù)不是8的整數(shù)倍就會(huì)報(bào)上述錯(cuò)誤
解決方法：將數(shù)據(jù)加密后，再進(jìn)行base64進(jìn)行處理

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

  //將數(shù)據(jù)先base64還原，再轉(zhuǎn)為utf8數(shù)據(jù)
  let decData = cryptoJS.enc.Base64.parse(localStorage.getItem("userInfo")).toString(cryptoJS.enc.Utf8);
  //解密數(shù)據(jù)
  let decJson = cryptoJS.AES.decrypt(decData, "aes").toString(cryptoJS.enc.Utf8);
  userInfo = JSON.parse(decJson);
  
  console.log(userInfo);

以上，在safari，chrome，firefox運(yùn)行沒(méi)問(wèn)題