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

codergarden 发布于2019-08-23 14:21 / 5791人阅读

摘要：一般情况下，很少会在前端进行加解密的操作，因为没有太大的必要性，前端的代码是很容易看到的，即使这样，我觉得还是有比较处理一下的，至少不让别人一眼就看到信息我使用存储了一些用户的用户名昵称等的信息，通过进行加解密处理，这里我选用了加密算法对

一般情况下，很少会在前端进行加解密的操作，因为没有太大的必要性，前端的代码是很容易看到的，即使这样，我觉得还是有比较处理一下的，至少不让别人一眼就看到信息

我使用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运行没问题

云服务器 GPU云服务器解密报错 malformed 设计小结对象小结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100464.html

使用crypto-js进行128位AES/ECB/PKCS7Padding加密/解密

摘要：支持多种加解密方案这里主要记录一下使用进行位的加解密前端加密是不安全的不安全的不安全的初始化一个文件直接全部回车就行啦安装在同级目录下新建一个文件写入以下内容导入包定义加解密的都放这里了加密还有啥意义设置数据块长度生成密钥字节数 crypto-js支持多种加/解密方案, 这里主要记录一下使用 crypto-js 进行 AES 128位的加/解密; 前端加密是不安全的, 不安全的, 不...

jas0n 2019-08-21 16:19 评论0 收藏0
一套简单的基于 RSA + AES 加密机制的前端解决方案

摘要：前言因公司现有后台管理系统项目需对部分网络请求接口的重要数据进行加密，整合了一套简单的基于加密机制的前端解决方案。用户已登录成功，页面刷新后将会重新生成，这时候需从中获取并和上传后端，后端重新绑定和。前言因公司现有后台管理系统项目需对部分网络请求接口的重要数据进行加密，整合了一套简单的基于 RSA + AES 加密机制的前端解决方案。参考文献： crypto 廖雪峰 crypt...

Travis 2019-08-23 17:58 评论0 收藏0
JavaScript基于crypto-js的加密和PHP对此加密的解密及相同加密方式

摘要：合适和够用是最完美的追求。个人网站最近刚写了一个手机在线播放的电影站基于的加密和对此加密的解密及相同加密方式最近使用做了一个电影电视剧在线播放的的小站，使用到的是的进行实时抓取，其中遇到了加密的问题，遂解决之，才有了这篇总结。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是...

xuhong 2019-06-27 16:24 评论0 收藏0
JavaScript基于crypto-js的加密和PHP对此加密的解密及相同加密方式

摘要：合适和够用是最完美的追求。个人网站最近刚写了一个手机在线播放的电影站基于的加密和对此加密的解密及相同加密方式最近使用做了一个电影电视剧在线播放的的小站，使用到的是的进行实时抓取，其中遇到了加密的问题，遂解决之，才有了这篇总结。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是...

saucxs 2019-08-22 11:03 评论0 收藏0
vue中使用cookies和crypto-js实现记住密码和加密

摘要：最后要在狗子函数内判断用户是否记住了密码来执行相关的操作判断是否记住密码注意这里的是字符串格式，因为存进中会变成判断是否记住密码最后，界面贴上，其中是记住密码按钮的值，是第一个框的值，就是第二个框的值啦。不多BB，搞快、搞快、使用crypto-js加解密第一步，安装 npm install crypto-js 第二步，在你需要的vue组件内import import Crypto...

khs1994 2019-08-26 12:19 评论0 收藏0