前端crypto-js解密报malformed utf-8 data小结

2023年4月27日 3,782次阅读 来源: dragonishare

平常情况下，很少会在前端举行加解密的操纵，由于没有太大的必要性，前端的代码是很轻易看到的，纵然如许，我以为照样有比较处置惩罚一下的，最少不让他人一眼就看到信息

我运用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运转没题目

    原文作者：dragonishare
    原文地址: https://segmentfault.com/a/1190000017540855
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞