溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS加密插件CryptoJS如何實(shí)現(xiàn)AES加密操作

發(fā)布時間:2021-04-20 10:35:14 來源:億速云 閱讀:500 作者:小新 欄目:web開發(fā)

這篇文章主要介紹了JS加密插件CryptoJS如何實(shí)現(xiàn)AES加密操作,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

js的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

本文實(shí)例講述了JS加密插件CryptoJS實(shí)現(xiàn)AES加密操作。分享給大家供大家參考,具體如下:

最近在做一個項(xiàng)目,考慮到數(shù)據(jù)的安全性,我們要給數(shù)據(jù)在傳輸過程中加密,防止一些惡意的操作以及爬蟲抓取數(shù)據(jù)。

  • 用到的庫:CryptoJS 官方地址:https://code.google.com/archive/p/crypto-js/

首先看看這個CryptoJS的目錄結(jié)構(gòu)

JS加密插件CryptoJS如何實(shí)現(xiàn)AES加密操作

主要是兩個文件夾,components和rollups

第一個是組件,第二個是匯總。

在匯總文件夾中的文件是在組件一個或多個文件夾拼接后壓縮的。

這使得匯總獨(dú)立的文件夾在你的項(xiàng)目納入項(xiàng)目文件,而無需擔(dān)心它的依賴。

你可以在這里查看匯總文件和組件之間的關(guān)系:

https://code.google.com/p/crypto-js/source/browse/tags/3.1.2/builder/build.yml

首先在項(xiàng)目中引入對應(yīng)的加密文件,我們用的是AES,同時用RequireJS來加載JS,在配置中聲明路徑:

require.config({
  baseUrl: "/Public/Home/Js/lib",
  paths: {
    hzbAES:'../module/hzb.AES'
  }
});

首先把加密解密封裝好為一個模塊

//模塊初始化
var init=function () {
    key = CryptoJS.enc.Utf8.parse(CryptoJS.MD5(ym.hezubao).toString());
    iv = CryptoJS.enc.Utf8.parse(CryptoJS.MD5(key).toString().substr(0,16));
}
function encrypt(data) {
    var encrypted='';
    if(typeof(data)=='string')
    {
      encrypted = CryptoJS.AES.encrypt(data,key,{
        iv : iv,
        mode : CryptoJS.mode.CBC,
        padding : CryptoJS.pad.ZeroPadding
      });
    }else if(typeof(data)=='object'){
      data = JSON.stringify(data);
      encrypted = CryptoJS.AES.encrypt(data,key,{
        iv : iv,
        mode : CryptoJS.mode.CBC,
        padding : CryptoJS.pad.ZeroPadding
      })
    }
    return encrypted.toString();
}
/*AES解密
* param : message 密文
* return : decrypted string 明文
*/
function decrypt(message) {
    decrypted='';
    decrypted=CryptoJS.AES.decrypt(message,key,{
      iv : iv,
      mode : CryptoJS.mode.CBC,
      padding : CryptoJS.pad.ZeroPadding
    });
    return decrypted.toString(CryptoJS.enc.Utf8);
}

解釋一下代碼:

  • 我們加密的模式選的是CBC的,然后填充模式是填充0,這個是前后臺約定的,請謹(jǐn)慎。加密秘鑰要求是32位長字符串(通過md5加密確保32位,算法限制),iv初始化向量是16位長度的字符串。這兩個東西不懂的話,看看AES加密的條件。

  • 要注意的是,在加密完成后的字符串是經(jīng)過Base64加密的,也就是說,后臺解密模塊必須要求考慮字符編碼問題,這個由項(xiàng)目實(shí)際來決定。可以把他先轉(zhuǎn)出UTF8的然后再傳遞給后臺。我這里后臺是介紹Base64加密后的,所以就不用轉(zhuǎn)碼了。

  • 解密之后要轉(zhuǎn)成UTF8喔,如果后臺給的數(shù)據(jù)是JSON的話,要用JSON.parse()一下才能用。

在代碼中調(diào)用

require(['hzbAES'], function(hzbAES){
  var jsonData={'id':2,'username':'春天的熊'};//json格式數(shù)據(jù)(加密支持json格式和字符串格式)
  $('#btn_test').click(function () {
    var encrypt=hzbAES.encrypt(jsonData);
      console.log('前臺發(fā)過去的數(shù)據(jù):'+encrypt);//已加密
    $.getJSON(UrlGenerator.url(2,'Home','Index','test'),{'data':encrypt},function (data) {
      if(!data['error'])
      {
        var decrypt=JSON.parse(hzbAES.decrypt(data['data']));
        console.log('后臺發(fā)過來的數(shù)據(jù):');//已解密
        console.log(decrypt);
      }else{
        console.log(data['error']);
      }
    })
  });
});

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JS加密插件CryptoJS如何實(shí)現(xiàn)AES加密操作”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI