JS加密插件CryptoJS實(shí)現(xiàn)AES加密操作示例
本文實(shí)例講述了JS加密插件CryptoJS實(shí)現(xiàn)AES加密操作。分享給大家供大家參考,具體如下:
最近在做一個(gè)項(xiàng)目,考慮到數(shù)據(jù)的安全性,我們要給數(shù)據(jù)在傳輸過程中加密,防止一些惡意的操作以及爬蟲抓取數(shù)據(jù)。
- 用到的庫:CryptoJS 官方地址:https://code.google.com/archive/p/crypto-js/
首先看看這個(gè)CryptoJS的目錄結(jié)構(gòu)

主要是兩個(gè)文件夾,components和rollups
第一個(gè)是組件,第二個(gè)是匯總。
在匯總文件夾中的文件是在組件一個(gè)或多個(gè)文件夾拼接后壓縮的。
這使得匯總獨(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)目中引入對(duì)應(yīng)的加密文件,我們用的是AES,同時(shí)用RequireJS來加載JS,在配置中聲明路徑:
require.config({
baseUrl: "/Public/Home/Js/lib",
paths: {
hzbAES:'../module/hzb.AES'
}
});
首先把加密解密封裝好為一個(gè)模塊
//模塊初始化
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,這個(gè)是前后臺(tái)約定的,請(qǐng)謹(jǐn)慎。加密秘鑰要求是32位長(zhǎng)字符串(通過md5加密確保32位,算法限制),iv初始化向量是16位長(zhǎng)度的字符串。這兩個(gè)東西不懂的話,看看AES加密的條件。
- 要注意的是,在加密完成后的字符串是經(jīng)過Base64加密的,也就是說,后臺(tái)解密模塊必須要求考慮字符編碼問題,這個(gè)由項(xiàng)目實(shí)際來決定??梢园阉绒D(zhuǎn)出UTF8的然后再傳遞給后臺(tái)。我這里后臺(tái)是介紹Base64加密后的,所以就不用轉(zhuǎn)碼了。
- 解密之后要轉(zhuǎn)成UTF8喔,如果后臺(tái)給的數(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('前臺(tái)發(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('后臺(tái)發(fā)過來的數(shù)據(jù):');//已解密
console.log(decrypt);
}else{
console.log(data['error']);
}
})
});
});
PS:關(guān)于加密解密感興趣的朋友還可以參考本站在線工具:
在線AES加密/解密工具:
http://tools.jb51.net/password/aes_encode
文字在線加密解密工具(包含AES、DES、RC4等):
http://tools.jb51.net/password/txt_encode
在線編碼轉(zhuǎn)換工具(utf-8/utf-32/Punycode/Base64):
http://tools.jb51.net/transcoding/decode_encode_tool
BASE64編碼解碼工具:
http://tools.jb51.net/transcoding/base64
在線MD5/hash/SHA-1/SHA-2/SHA-256/SHA-512/SHA-3/RIPEMD-160加密工具:
http://tools.jb51.net/password/hash_md5_sha
在線sha1/sha224/sha256/sha384/sha512加密工具:
http://tools.jb51.net/password/sha_encode
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript加密解密技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
微信小程序?qū)崿F(xiàn)列表滾動(dòng)頭部吸頂?shù)氖纠a
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)列表滾動(dòng)頭部吸頂?shù)氖纠a,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
JavaScript JSON.stringify()的使用總結(jié)
JSON是一種輕量級(jí)數(shù)據(jù)格式,可以方便地表示復(fù)雜數(shù)據(jù)結(jié)構(gòu)。JSON對(duì)象有兩個(gè)方法:stringify()和parse()。在簡(jiǎn)單的情況下,這兩個(gè)方法分別可以將JavaScript序列化為JSON字符串,以及將JSON解析為原生JavaScript值。本文著重介紹JSON.stringify()的使用方法和注意事項(xiàng)。2021-05-05
處理JavaScript值為undefined的7個(gè)小技巧
這篇文章主要介紹了處理JavaScript值為undefined的7個(gè)小技巧,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見排序(Sort)算法詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見排序(Sort)算法,結(jié)合實(shí)例形式詳細(xì)分析了js常見排序算法中的冒泡排序、選擇排序、插入排序、希爾排序、歸并排序、快速排序等算法相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
JavaScript創(chuàng)建對(duì)象的方式小結(jié)(4種方式)
這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象的方式,結(jié)合實(shí)例形式總結(jié)分析了四種創(chuàng)建對(duì)象的方式,并附帶分析了JavaScript對(duì)象復(fù)制的技巧,需要的朋友可以參考下2015-12-12

