按需使用CryptoJS之AES加密(CFB)模式


一、需求

應業務要求,需對請求數據進行AES加密,常用框架為CryptoJS。

二、CryptoJS

git地址:https://github.com/brix/crypto-js

API: https://cryptojs.gitbook.io/docs/#hmac

CryptoJS官方:https://code.google.com/archive/p/crypto-js/(需FQ)

三、使用

仔細閱讀CryptoJS項目的readME就可以獲取到該插件的使用方法。我剛開始使用的是ES6模式全部引入CryptoJS,打包之后發現有點大,而后端要求使用AES的CFB模式,padding為Nopadding,並要求加密輸出為HEX格式,所以我選擇按需引入。

1、從readme里獲取信息

readMe當中很明確地寫了使用方法,如下圖

在readME的List of modules中列出了所有的模塊,可根據需要自行引入使用(框起來的就是我需要用到的模塊),如下:

 

 

2、demo-js文件引入

從官網(https://code.google.com/archive/p/crypto-js/)下載資源文件

 

 

 解壓縮后得到如下文件

我們使用rollups里的aes.js文件,並根據需要使用component文件夾下的相關文件,拷貝出來使用即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數據加密</title>
</head>

<body>
    <button id="btnSub">點擊測試</button><span style="color: red;">需打開控制台,查看輸出</span>
    <script src="./aes.js"></script>
    <script src="./format-hex-min.js"></script>
    <script src="./pad-nopadding-min.js"></script>
    <script src="./mode-cfb-min.js"></script>

    <script>
        let oBtn = document.getElementById('btnSub');
        console.log(CryptoJS, CryptoJS.pad)

        function test(data, key, iv) {
            data = CryptoJS.enc.Utf8.parse(JSON.stringify(data))
            key = CryptoJS.enc.Utf8.parse(key)
            iv = CryptoJS.enc.Utf8.parse(iv)

            // Encrypt
            var ciphertext = CryptoJS.AES.encrypt(data, key, {
                iv: iv,
                mode: CryptoJS.mode.CFB,
                padding: CryptoJS.pad.NoPadding
            });
            console.log(ciphertext.toString(), ciphertext.ciphertext.toString());
            // Decrypt
            var bytes = CryptoJS.AES.decrypt(ciphertext, key, {
                iv: iv,
                mode: CryptoJS.mode.CFB,
                padding: CryptoJS.pad.NoPadding
            });
            var originalText = bytes.toString(CryptoJS.enc.Utf8);
            console.log(originalText);
        }

        oBtn.onclick = function () {
            let key = 'bzKvXm8iDXuPT15n', iv = '8392839dje837uji', data = { "name": '用腦袋行走的人', "age": "18" }
            test(data, key, iv);
        }
    </script>
</body>

</html>

 加解密測試,控制台輸出如下:

提示:只引入aes.js之后mode下只有CBC,pad下只有Pkcs7,也就是默認值。如果有不同需求可引入相應的component,就如我引入的CFB一樣。

3、我的使用-ES6引入

以上是我起的小demo,而項目使用的是vue,我這里選擇使用ES6模式的引用,,步驟及代碼如下

A、安裝CryptoJS

npm install crypto-js --save

B、引用

// 按需引入
import CFB from 'crypto-js/mode-cfb'//CFB模式 import UTF8 from 'crypto-js/enc-utf8' import Nopadding from 'crypto-js/pad-nopadding' //這里使輸出HEX格式 ... // 加密函數 function encrypt (data, key, iv) { data = UTF8.parse(JSON.stringify(data)) key = UTF8.parse(key) iv = UTF8.parse(iv) // 加密 var ciphertext = AES.encrypt(data, key, { iv: iv, mode: CFB, padding: Nopadding }) let result = ciphertext.ciphertext.toString() //這里返回的是HEX格式 return result }

你可以根據自身需求,按上述方式實現按需引入,就會使打包之后的文件小很多啦~

3、總結

因為之前簡單看了下CryptoJS插件git官方文件,沒有詳細研究,然后根據需求在網上盲目查找相關資源,走了不少彎路,也浪費了不少時間,結果踏破鐵鞋無覓處,答案就在readme中。所以一定要學會使用官方文件!!!

轉載請注明出處,謝謝啦~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM