摘要:一般情況下,很少會在前端進行加解密的操作,因為沒有太大的必要性,前端的代碼是很容易看到的,即使這樣,我覺得還是有比較處理一下的,至少不讓別人一眼就看到信息我使用存儲了一些用戶的用戶名昵稱等的信息,通過進行加解密處理,這里我選用了加密算法對
一般情況下,很少會在前端進行加解密的操作,因為沒有太大的必要性,前端的代碼是很容易看到的,即使這樣,我覺得還是有比較處理一下的,至少不讓別人一眼就看到信息
我使用localStorage存儲了一些用戶的用戶名昵稱等的信息,通過crypto-js進行加解密處理,這里我選用了AES加密算法對json對象數(shù)據(jù)進行處理
按照官方的例子,如下
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
可能是前端加解密的場景比較少,搜到若干報這個錯的,但是鮮有解決方法,其中有一個說加密數(shù)據(jù)不是8的整數(shù)倍就會報上述錯誤
解決方法:將數(shù)據(jù)加密后,再進行base64進行處理
let newUserInfo = {nickname:"hello",email:"[email protected]"}; //加密數(shù)據(jù) let encJson = cryptoJS.AES.encrypt(JSON.stringify(newUserInfo), "aes").toString(); //對加密數(shù)據(jù)進行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運行沒問題
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/100464.html
摘要:支持多種加解密方案這里主要記錄一下使用進行位的加解密前端加密是不安全的不安全的不安全的初始化一個文件直接全部回車就行啦安裝在同級目錄下新建一個文件寫入以下內(nèi)容導(dǎo)入包定義加解密的都放這里了加密還有啥意義設(shè)置數(shù)據(jù)塊長度生成密鑰字節(jié)數(shù) crypto-js支持多種加/解密方案, 這里主要記錄一下使用 crypto-js 進行 AES 128位 的加/解密; 前端加密是不安全的, 不安全的, 不...
摘要:前言因公司現(xiàn)有后臺管理系統(tǒng)項目需對部分網(wǎng)絡(luò)請求接口的重要數(shù)據(jù)進行加密,整合了一套簡單的基于加密機制的前端解決方案。用戶已登錄成功,頁面刷新后將會重新生成,這時候需從中獲取并和上傳后端,后端重新綁定和。 前言 因公司現(xiàn)有后臺管理系統(tǒng)項目需對部分網(wǎng)絡(luò)請求接口的重要數(shù)據(jù)進行加密,整合了一套簡單的基于 RSA + AES 加密機制的前端解決方案。 參考文獻: crypto 廖雪峰 crypt...
摘要:合適和夠用是最完美的追求。個人網(wǎng)站最近剛寫了一個手機在線播放的電影站基于的加密和對此加密的解密及相同加密方式最近使用做了一個電影電視劇在線播放的的小站,使用到的是的進行實時抓取,其中遇到了加密的問題,遂解決之,才有了這篇總結(jié)。 關(guān)于作者 程序開發(fā)人員,不拘泥于語言與技術(shù),目前主要從事PHP和前端開發(fā),使用Laravel和VueJs,App端使用Apicloud混合式開發(fā)。合適和夠用是...
摘要:合適和夠用是最完美的追求。個人網(wǎng)站最近剛寫了一個手機在線播放的電影站基于的加密和對此加密的解密及相同加密方式最近使用做了一個電影電視劇在線播放的的小站,使用到的是的進行實時抓取,其中遇到了加密的問題,遂解決之,才有了這篇總結(jié)。 關(guān)于作者 程序開發(fā)人員,不拘泥于語言與技術(shù),目前主要從事PHP和前端開發(fā),使用Laravel和VueJs,App端使用Apicloud混合式開發(fā)。合適和夠用是...
摘要:最后要在狗子函數(shù)內(nèi)判斷用戶是否記住了密碼來執(zhí)行相關(guān)的操作判斷是否記住密碼注意這里的是字符串格式,因為存進中會變成判斷是否記住密碼最后,界面貼上,其中是記住密碼按鈕的值,是第一個框的值,就是第二個框的值啦。 不多BB,搞快、搞快、 使用crypto-js加解密 第一步,安裝 npm install crypto-js 第二步,在你需要的vue組件內(nèi)import import Crypto...
閱讀 1339·2019-08-30 15:44
閱讀 1391·2019-08-29 18:42
閱讀 446·2019-08-29 13:59
閱讀 782·2019-08-28 17:58
閱讀 2823·2019-08-26 12:02
閱讀 2424·2019-08-23 18:40
閱讀 2414·2019-08-23 18:13
閱讀 3116·2019-08-23 16:27