前端 crypto-js aes 加解密

背景

前段時間公司做項目,該項目涉及到的敏感數據比較多,經過的一波討論之后,決定前后端進行接口加密處理,采用的是 AES + BASE64 算法加密~

網上關于 AES 對稱加密的算法介紹看上一篇!

具體實現

其實搞懂了是怎么一回事,做起來還是挺簡單的,因為庫都是現成的,我們只需要會用就好啦,這里我在推薦一篇理解AES加密解密的使用方法,加深大家對 AES 算法的理解~

這里我以 Vue 作為例子,其他的也就大同小異了~

  • 要用 AES 算法加密,首先我們要引入 crypto-jscrypto-js 是一個純 javascript 寫的加密算法類庫 ,可以非常方便地在 javascript 進行 MD5SHA1SHA2SHA3RIPEMD-160 哈希散列,進行 AESDESRabbitRC4Triple DES 加解密,我們可以采用 npm install crypto-js --save 進行下載安裝,也可以直接去 GitHub下載源碼~

  • 其次我們需要定義兩個方法 ,分別是用于加密和解密,這里我將它放在了 utils 文件夾下,命名為 secret.js ,其具體代碼如下:

    const CryptoJS = require('crypto-js');  //引用AES源碼jsconst key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六進制數作為密鑰const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六進制數作為密鑰偏移量//解密方法function Decrypt(word) {let encryptedHexStr = CryptoJS.enc.Hex.parse(word);let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);return decryptedStr.toString();}//加密方法function Encrypt(word) {let srcs = CryptoJS.enc.Utf8.parse(word);let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });return encrypted.ciphertext.toString().toUpperCase();}export default {Decrypt ,Encrypt}

上面的代碼中的 key 是密鑰 ,iv 是密鑰偏移量,這個一般是接口返回的,為了方便,我們這里就直接在這里定義了。

值得注意的是密鑰的長度,由于對稱解密使用的算法是 AES-128-CBC算法,數據采用 PKCS#7 填充 , 因此這里的 key 需要為16位!

接著我們定義了 解密方法Decrypt加密方法 Encrypt ,最后通過 export default 將其暴露出去,方便在需要的時候進行引入~

ok,核心代碼就這么多,是不是很簡單啊,其實也么有你想的那么復雜哈,剩下的就是展示一下如何使用咯~

示例

這里我定義了一個 index.vue 用來展示數據加解密的操作~

加密操作: 假設我們現在要給后端發送一段文字,暫且定義為 This is a clear text , 在發送之前我們需要對其進行加密操作,這時候我們可以調用上面介紹的 Encrypt 方法,通過加密后我們可以得到密文為:4ACEA01505ADAF9FB59A03B22FC1EF1B244AE28DDACFDFAEFA7E263655C44357

Encrypt

解密操作: 假設我們請求后端接口,后端返回了我們一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF , 這讓我很蒙蔽啊,這時候就要調用 Decrypt 方法,通過解密我們可以拿到后端返回的信息其實是:{"name":"Chris","sex":"male"}

結語

至此,你已經 get 了前端 AES 加解密的方法,是不是感覺很簡單啊,用起來很簡單,原理可不簡單,況且這也只是其中的一種方案,關于加解密的方法還有很多,感興趣的小伙伴們可以繼續做一些深入的研究哈~

對了,代碼已上傳到 GitHub,有需要的小伙伴自行下載~

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247552.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247552.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247552.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

對排序算法的研究

算法是什么?、 算法(Algorithm) 代表著用系統的方法描述解決問題的策略機制,可以通過一定規范的 輸入,在有限時間內獲得所需要的 輸出。 一個算法的好壞是通過 時間復雜度 與 空間復雜度 來衡量的。 簡單來說&#xff…

js實用算法

判斷文本是否為回文 定義:如果將一個文本翻轉過來,能和原文本完全相等,那么就可以稱之為“回文”。 方法一(字符串、數組內置方法)123456789101112131415/** 判斷文字是否為回文* param {string|number} val 需要判斷的…

stylus

stylus格式 指將css中{} ;去掉即可

隨筆記錄(2019.7.10)

1、ISO/OSI 網絡七層參考模型 物理層 數據鏈路層 網絡層 傳輸層 會話層 表示層 應用層 2、 TCP/IP 網絡四層模型和五層模型 四層模型: 網絡接口層 網絡層 傳輸層 應用層 五層模型: 物理層 數據鏈路層 網絡層 傳輸層 應用層 3、 協議簇 (1&a…

轉發:Ajax動態畫EChart圖表

本人由于項目需要,在狀態變化的時候需要動態繪制對應數據的EChart圖表,并且不刷新整個網頁。 所以就用Ajax動態畫EChart圖表,下面是開發過程中遇到的一些坑的總結。 流程:頁面首次加載時展示一幅原始的圖形,若后臺數據…

如果硬盤不顯示可以這么處理

http://www.zhuangjiba.com/soft/9574.html轉載于:https://www.cnblogs.com/braveheart007/p/11167311.html

Highcharts的餅圖大小的控制

在Highcharts中,餅圖的大小是Highcharts自動計算并進行繪制。餅圖的大小受數據標簽大小、數據標簽到切片的距離影響。當數據標簽內容較多,并且距離切片較遠時,餅圖就會被壓縮的很小。解決這個問題,有以下幾種方法:&…

轉:谷歌離線地圖基礎

一.需要文件 gapi3文件夾&#xff1a;存放接口等tilemap文件夾&#xff1a;存放圖片gapi.js文件maptool.js文件 二.html配置 <script type"text/javascript" src"gapi.js"></script> <script type"text/javascript" src"map…

HTTP Header 詳解

搜集資料 HTTP&#xff08;HyperTextTransferProtocol&#xff09;即超文本傳輸協議&#xff0c;目前網頁傳輸的的通用協議。HTTP協議采用了請求/響應模型&#xff0c;瀏覽器或其他客戶端發出請求&#xff0c;服務器給與響應。就整個網絡資源傳輸而言&#xff0c;包括message-h…

Windows CE 6.0中斷處理過程(轉載)

這里我們主要討論的是CE的中斷建立和中斷相應的大概流程以及所涉及的代碼位置。這里所講述的&#xff0c;是針對ARM平臺的。在CE的中斷處理里面&#xff0c;有一部分工作是CE Kernel完成的&#xff0c;有一部分工作是要由OEM完成的。 Kernel代碼工作 ExVector.s&#xff1a;中斷…

document.createDocumentFragment 以及創建節點速度比較

document.createDocumentFragment document.createDocumentFragment()方法創建一個新空白的DocumentFragment對象。 DocumentFragments是DOM節點。它們不是主DOM樹的一部分。通常的用例是創建文檔片段&#xff0c;將元素附加到文檔片段&#xff0c;然后將文檔片段附加到DOM樹。…

Javascript重溫OOP之原型與原型鏈

prototype原型對象 每個函數都有一個默認的prototype屬性&#xff0c;其實際上還是一個對象&#xff0c;如果被用在繼承中&#xff0c;姑且叫做原型對象。 在構造函數中的prototype中定義的屬性和方法&#xff0c;會被創建的對象所繼承下來。舉個栗子&#xff1a; function F()…

webpack超詳細配置

在這里就不詳細介紹webpack來源以及作用了, 本篇博文面向新手主要說明如何配置webpack, 以及webpack的使用方法, 直到創建出一個合理的屬于自己webpack項目; 流程 webpack安裝 Step 1: 首先安裝Node.js, 可以去Node.js官網下載.Step2: 在Git或者cmd中輸入下面這段代碼, 通過全局…

小白十分鐘-推薦導航欄

大腿繞道&#xff0c;給小白學習用&#xff0c;上代碼 <div class"list"><div class"infor"><ul class"left"><li><a href"">限時特價</a></li><li><a href"">熱門推…

Underscore.js常用方法介紹

Underscore.js是一個很精干的庫&#xff0c;壓縮后只有4KB。它提供了幾十種函數式編程的方法&#xff0c;彌補了標準庫的不足&#xff0c;大大方便了JavaScript的編程。MVC框架Backbone.js就將這個庫作為自己的工具庫。除了可以在瀏覽器環境使用&#xff0c;Underscore.js還可以…

掌握ES6/ES2015核心內容

ECMAScript 6&#xff08;以下簡稱ES6&#xff09;是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發布的&#xff0c;所以又稱ECMAScript 2015。 也就是說&#xff0c;ES6就是ES2015。 雖然目前并不是所有瀏覽器都能兼容ES6全部特性&#xff0c;但越來越多的程序員…

express-generator——Express應用生成器賊快!

通過應用生成器工具 express 可以快速創建一個應用的骨架。 通過如下命令安裝&#xff1a; $ npm install express-generator -g-h 選項可以列出所有可用的命令行選項&#xff1a; $ express -hUsage: express [options] [dir]Options:-h, --help output usage inform…

轉:canvas--放大鏡效果

<!DOCTYPE html><html><head><meta charset"UTF-8"><title>鼠標事件</title></head><body><canvas id"canvas"></canvas><canvas id"offCanvas" style" display: none;&qu…

MON

早上5點,咪咪牛就醒了,開始跳到我邊上,用白毛毛把我弄醒,在我身上走來走去,把她按住撫摸也不能讓她停止.....只能拎起來扔到邊上了 ;)看起來還的確是很調皮的貓咪呢昨天晚上就開始不太怕我了,走到我的椅子邊上喵喵叫,直到把她放在身上,才慢慢睡覺,滿可愛的早上出門叫車,一車正停…

CSS做個Switch開關

Switch開關&#xff1a;根據需求可知&#xff0c;Switch開關只有兩種選擇&#xff0c;true或false。所以我們想到HTML的checkbox控件&#xff0c;用它來做。  <input id"switch" type"checkbox" class"switch" />但是在瀏覽器中&#xf…