WEB安全——Javascript實現前端AES加密解密功能
最近由於項目需求做了一次MITM，突然即使發現使用HTTPS，也不能保證數據傳輸過程中的安全性。 通過中間人攻擊，可以直接獲取到Http協議的所有內容。 於是開始嘗試做一些簡單的加密，在一定程度上保證安全性。
本次採用AES加密數據，所以客戶端和服務端使用的相同祕鑰。（僅作為演示，正式環境推薦使用RSA）
首先準備一份明文密碼和加密使用的KEY
var source = "ABCDEFG";
var aesKey = "8NONwyJtHesysWpM";
JS加密 padding和mode 需要與服務端相對應，否則無法解密
//key 為字符串類型，需要處理完再使用 //注:PKCS5Padding 和 PKCS7Padding 是一樣的
上段所示的 encryptedData 即為加密後的結果。
JS解密代碼
//encryptedData 為加密後的數據, //直接通過JS加密後的數據是一個對象，無法直接解密的， 需要轉換為Base64的字符串後才可解密 //服務端應當返回Base64之後的加密數據 encryptedData = encryptedData.ciphertext.toString(); var encryptedHexStr = CryptoJS.enc.Hex.parse(encryptedData);
結果演示
Tip: aes.js N合一
http://react.file.alimmdn.com/aes.js
Demo 控制檯查看
http://react.file.alimmdn.com/aes.html?t=1490179790965
相關推薦
'前端設計- JavaScript驗證碼製作及實例分析'
"在網頁設計中，尤其表單填寫提交過程中，為防止機器自動登錄，很多網頁都採用驗證碼技術，允許用戶輸入而儘量避免自動登錄。驗證碼實現的方法有很多，PHP繪圖技術可以在服務端生成驗證碼併發送客戶端，HTML5技術下可以使用canvas與JS腳本實現在客戶端瀏覽器自動生成驗證碼。本...
'京東前端工程師：10個JavaScript難點+最新JavaScript視頻教程'
"1. 立即執行函數立即執行函數，即Immediately Invoked Function Expression (IIFE)，正如它的名字，就是創建函數的同時立即執行。它沒有綁定任何事件，也無需等待任何異步操作：立即執行函數function(){…}是一個匿名函數，包圍...
'官方：JavaScript可以混前端，太爽了'
"最近不少同學都問我這麼個問題，不會JavaScript能混前端麼？能拿到高薪麼？為什麼這麼說呢，理由很簡單1）有很多企業不注重前端開發，當然也就不會給你高薪了，這樣的企業以小企業居多。他們一般對前端開發的認識很片面，認為前端開發就是做頁面，甚至認為是美工工作的一部分，這種...
'JavaScript web優化系列之執行上下文詳細圖解'
"我們在JS學習初期或者面試的時候常常會遇到考核變量提升的思考題。比如先來一個簡單一點的。console.log(a); // 這裡會打印出什麼？var a = 20;暫時先不管這個例子，我們先引入一個JavaScript中最基礎，但同時也是最重要的一個概念執行上下文（Ex...
'好程序員web前端分享Javascript中函數作為對象'
" 好程序員web前端分享Javascript中函數作為對象，Javascript賦予了函數非常多的特性，其中最重要的特性之一就是將函數作為第一型的對象。那就意味著在javascript中函數可以有屬性，可以有方法， 可以享有所有對象所擁有的特性。我們簡單的試驗一下就可以發...
'Javascript 前端設計模式'
"工具匆匆過，模式永流傳雖然在我們的項目中使用新的框架/庫可能很酷，但我們經常忽略了為什麼使用它們，而是“為了使用它而使用它”。在人們製作桌面/企業應用程序的日子裡，出現了許多設計模式/軟件架構設計。它們由明智的工程師設計，以解決其應用程序中信息流的複雜性。今天，當我們忙於...
'web前端工程師必學函數作用域和塊作用域'
"本文主要給大家簡單介紹關於函數的作用域和塊作用域的相關概念和理解。1.1. 函數作用域和塊作用域1.1.1. 函數中的作用域每聲明一個函數都會為其自身創建一個氣泡，而其他結構都不會創建作用域氣泡。但事實上這並不完全正確，下面我們來看一下。代碼如下：bar(); // 失敗...
'不一樣的JS函數總結，適合前端初學者的JavaScript函數代碼'
"函數允許你在一個代碼塊中存儲一段用於處理一個任務的代碼，然後在任何你需要的時候用一個簡短的命令來調用，而不是把相同的代碼寫很多次。函數在哪？在 JavaScript中, 你將發現函數無處不在 。事實上, 到目前為止，我們一直在使用函數，只是我們還沒很好的討論它們。幾乎任何...
'中級前端工程師必須要掌握的 20 個 JavaScript 技巧，你呢？'
"1.判斷對象的數據類型使用 Object.prototype.toString 配合閉包，通過傳入不同的判斷類型來返回不同的判斷函數，一行代碼，簡潔優雅靈活（注意傳入 type 參數時首字母大寫）不推薦將這個函數用來檢測可能會產生包裝類型的基本數據類型上,因為 call ...
'在瀏覽器中實現GPU加速的JavaScript'
"gpu.jsGPU加速JavaScript GPU.js是用於Web和節點的JavaScript的GPGPU（GPU上的通用計算）的JavaScript加速庫。GPU.js自動將簡單的JavaScript函數轉換為著色器語言並編譯它們，以便它們在GPU上運行。如果GPU不...
'前端進階，你必須要了解的安全問題之XSS攻擊'
"前端安全一直是一個老生常談的話題，但是在實際的工作過程中，我發現大部分的前端同學對此瞭解不多，或者說知道一些但從沒有在意識層面真正重視過。今天我們就來扒一扒前端到底有哪些安全問題，我們到底該以什麼樣的態度怎麼去看待它。在深入分析之前我們還是按照慣例先大概介紹下什麼是XSS...
'JavaScript實現第三方登錄網站原理在這呢'
"點關注，不迷路，每天更新大量前端資料前端實現第三方登錄之OAuth2.0協議OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。授權碼模式（authorization-code）簡化模式（implic...
'前端 JavaScript 的開發知識與技巧你知道多少呢？集錦彙總'
"很多初學的朋友經常問我，前端JavaScript都需要學習哪些東西呀？哪些是JavaScript的重點知識啊？其實做前端開發工程師，所有的知識點都是我們學習必備的東西，只有紮實的技術基礎才是高薪的關鍵！不過JavaScript的知識點比較多，一篇文章的內容沒辦法講完。今天...
'前端JavaScript：20道大公司面試題，全都是經典，你都掌握了嗎？'
"劉小夕:https://juejin.im/post/5d124a12f265da1b9163a28d#comment1. new的實現原理是什麼？new 的實現原理:創建一個空對象，構造函數中的this指向這個空對象這個新對象被執行 [[原型]] 連接執行構造函數方法，...
'Web前端小白瞭解這些學習祕訣，你也能成為大神'
"新手們有一個常見的錯誤就是猶豫於判斷哪種編程語言是做好的、最該先學的。我們有很多的選擇，但你不能說那種語言“最好”。我們應該理解：說到底，什麼語言並不重要。重要的是理解數據結構、控制邏輯和設計模式。任何一種語言—甚至一種簡單的腳本語言—都會具有所有編程語言都共有的各種特徵...
推薦中...