前端加密解密之Crypto.js

樑青竹發表於2019-03-04
前端加密解密JS

前端js加密概述

對系統安全性要求比較高，那麼需要選擇https協議來傳輸資料。當然很多情況下一般的web網站，如果安全要求不是很高的話，用http協議就可以了。在這種情況下，密碼的明文傳輸顯然是不合適的，因為如果請求在傳輸過程中被截了，就可以直接拿明文密碼登入網站了。

HTTPS（443）在HTTP（80）的基礎上加入了，SSL（Secure Sockets Layer 安全套接層）協議，SSL依靠證照來驗證伺服器的身份，併為瀏覽器和伺服器之間的通訊加密。傳輸前用公鑰加密，伺服器端用私鑰解密。

對於使用http協議的web前端的加密，只能防君子不能防小人。前端是完全暴露的，包括你的加密演算法。知道了加密演算法，密碼都是可以破解的，只是時間問題。而為了保證資料庫中儲存的密碼更安全，則需要在後端用多種單向（非對稱）加密手段混合進行加密儲存。

前端加密後端又需要解密，所以需要對稱加密演算法，即前端使用 encrypted = encrypt(password+key)，後端使用 password = decrypt(encrypted +key) ，前端只傳輸密碼與key加密後的字串encrypted ，這樣即使請求被攔截了，也知道了加密演算法，但是由於缺少key所以很難破解出明文密碼。所以這個key很關鍵。而這個key是由後端控制生成與銷燬的，用完即失效，所以即使可以模擬用加密後的密碼來發請求模擬登入，但是key已經失效了，後端還是驗證不過的。

注意，如果本地環境本就是不安全的，key被知道了，那就瞬間就可以用解密演算法破解出密碼了。這裡只是假設傳輸的過程中被截獲的情形。所以前端加密是防不了小人的。如果真要防，可以將加密演算法的js檔案進行壓縮加密，不斷更新的手段來使js檔案難以獲取，讓黑客難以獲取加密演算法。變態的google就是這麼幹的，自己實現一個js虛擬機器，通過不斷更新加密混淆js檔案讓加密演算法難以獲取。這樣黑客不知道加密演算法就無法破解了。

常用的對稱加密演算法有 DES、3DES（TripleDES）、AES、RC2、RC4、RC5和Blowfis。可以參考：常用加密演算法的Java實現總結

前端加密解密

//這裡是require的一個元件 Tripledes是Crpto.js庫
define([`jquery`,`Tripledes`], function ($,Tripledes){
    var groupCrypto = {};
    var fn={
        key:`huakangdashen`//Ĭ祕鑰
    }
    CryptoJS.mode.ECB = (function () {
        var ECB = CryptoJS.lib.BlockCipherMode.extend();
        ECB.Encryptor = ECB.extend({
            processBlock: function (words, offset) {
                this._cipher.encryptBlock(words, offset);
            }
        });
        ECB.Decryptor = ECB.extend({
            processBlock: function (words, offset) {
                this._cipher.decryptBlock(words, offset);
            }
        });
        return ECB;
    }());
    /**加密方法**/
    groupCrypto.encryptByDES=function(message, key) {
        /**判斷傳參型別**/
        if(message===""||message===null||message===undefined){
            return "";
        }
        if(typeof(message)!="string"){
            message=message.toString();
        }
        var keyHex = CryptoJS.enc.Utf8.parse(key||fn.key);
        var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        return encrypted.toString();
    }
    /**解密方法**/
    groupCrypto.decryptByDES=function(ciphertext, key) {
        if(ciphertext===""||ciphertext===null||ciphertext===undefined){
            return "";
        }
        if(typeof(ciphertext)!="string"){
            ciphertext=ciphertext.toString();
        }
        var keyHex = CryptoJS.enc.Utf8.parse(key||fn.key);
        var decrypted = CryptoJS.DES.decrypt({
            ciphertext: CryptoJS.enc.Base64.parse(ciphertext)
        }, keyHex, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        return decrypted.toString(CryptoJS.enc.Utf8);
    }
    return groupCrypto;
});

複製程式碼

這裡是require的一個元件 Tripledes是Crpto.js庫 這裡用的是DES加密 本程式碼只是示例 祕鑰位置需要自己根據專案例項進行規劃放什麼地方。也可以請求介面由後端生成 每次生成不同的key。

之後入參的時候進行加密入參 後端返回的重要引數可以是加密後的 前端進行解密處理

相關文章