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

codergarden 發布于2019-08-23 14:21 / 6035人閱讀

摘要：一般情況下，很少會在前端進行加解密的操作，因為沒有太大的必要性，前端的代碼是很容易看到的，即使這樣，我覺得還是有比較處理一下的，至少不讓別人一眼就看到信息我使用存儲了一些用戶的用戶名昵稱等的信息，通過進行加解密處理，這里我選用了加密算法對

一般情況下，很少會在前端進行加解密的操作，因為沒有太大的必要性，前端的代碼是很容易看到的，即使這樣，我覺得還是有比較處理一下的，至少不讓別人一眼就看到信息

我使用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 設計小結對象小結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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