加密基礎(chǔ)知識(shí)四 前端JS加密傳輸 crypto-js

圖片發(fā)自簡(jiǎn)書(shū)App

原文地址

一飘痛、使用HTTP簡(jiǎn)單加密

對(duì)系統(tǒng)安全性要求比較高,那么需要選擇https協(xié)議來(lái)傳輸數(shù)據(jù)。當(dāng)然很多情況下一般的web網(wǎng)站,如果安全要求不是很高的話证九,用http協(xié)議就可以了。在這種情況下共虑,密碼的明文傳輸顯然是不合適的愧怜,因?yàn)槿绻?qǐng)求在傳輸過(guò)程中被截了,就可以直接拿明文密碼登錄網(wǎng)站了妈拌。

對(duì)于使用http協(xié)議的web前端的加密拥坛,只能防君子不能防小人。前端是完全暴露的,包括你的加密算法猜惋。 知道了加密算法丸氛,密碼都是可以破解的,只是時(shí)間問(wèn)題著摔。所以加密是為了增加破解的時(shí)間成本缓窜,如果破解需要花費(fèi)的時(shí)間讓人難以接受,這也就達(dá)到了目的梨撞。

而為了保證數(shù)據(jù)庫(kù)中存儲(chǔ)的密碼更安全雹洗,則需要在后端用多種單向(非對(duì)稱)加密手段混合進(jìn)行加密存儲(chǔ)香罐。前端加密后端又需要解密卧波,所以需要對(duì)稱加密算法,即前端使用 encrypted = encrypt(password+key)庇茫,后端使用 password = decrypt(encrypted +key) 港粱,前端只傳輸密碼與key加密后的字符串encrypted ,這樣即使請(qǐng)求被攔截了旦签,也知道了加密算法查坪,但是由于缺少key所以很難破解出明文密碼。所以這個(gè)key很關(guān)鍵宁炫。而這個(gè)key是由后端控制生成與銷毀的偿曙,用完即失效,所以即使可以模擬用加密后的密碼來(lái)發(fā)請(qǐng)求模擬登錄羔巢,但是key已經(jīng)失效了望忆,后端還是驗(yàn)證不過(guò)的。

注意竿秆,如果本地環(huán)境本就是不安全的启摄,key被知道了,那就瞬間就可以用解密算法破解出密碼了幽钢。這里只是假設(shè)傳輸?shù)倪^(guò)程中被截獲的情形歉备。所以前端加密是防不了小人的。如果真要防匪燕,可以將加密算法的js文件進(jìn)行壓縮加密蕾羊,不斷更新的手段來(lái)使js文件難以獲取,讓黑客難以獲取加密算法帽驯。變態(tài)的google就是這么干的肚豺,自己實(shí)現(xiàn)一個(gè)js虛擬機(jī),通過(guò)不斷更新加密混淆js文件讓加密算法難以獲取界拦。這樣黑客不知道加密算法就無(wú)法破解了吸申。

二、GOOGLE的JS加密算法庫(kù)crypto-js

https://github.com/brix/crypto-js下載,develop和master下載稍有區(qū)別截碴。以MD5測(cè)試為例梳侨,只引入md5.js(未壓縮前為9K)會(huì)報(bào)錯(cuò),需要先引入core.js(未壓縮前為22K)日丹。而在master分支下載的crypto-js走哺,是所有加密算法合集(未壓縮前為188K),只需要引入這一個(gè)JS文件即可哲虾。

<head>
    <script type="text/javascript" src="core.js"></script>
    <script src="md5.js"></script>
</head>
<body>
</body>
<script>
var hash = CryptoJS.MD5("Message");
console.log("test:",hash.toString());
</script>

打印結(jié)果是test: 4c2a8fe7eaf24721cc7a9f0175115bd4丙躏,與網(wǎng)站上對(duì)照結(jié)果一致。

1.再來(lái)測(cè)試一下AES加密

var encrypt = getAES("Message");
console.log("encrypt:",encrypt);
var decrypt = getDAes(encrypt);
console.log("decrypt:",decrypt);

function getAesString(data,key,iv){//加密
    var key  = CryptoJS.enc.Utf8.parse(key);
    var iv   = CryptoJS.enc.Utf8.parse(iv);
    var encrypted =CryptoJS.AES.encrypt(data,key,
        {
            iv:iv,
            mode:CryptoJS.mode.CBC,
            padding:CryptoJS.pad.Pkcs7
        });
    return encrypted.toString();    //返回的是base64格式的密文
}
function getDAesString(encrypted,key,iv){//解密
    var key  = CryptoJS.enc.Utf8.parse(key);
    var iv   = CryptoJS.enc.Utf8.parse(iv);
    var decrypted =CryptoJS.AES.decrypt(encrypted,key,
        {
            iv:iv,
            mode:CryptoJS.mode.CBC,
            padding:CryptoJS.pad.Pkcs7
        });
    return decrypted.toString(CryptoJS.enc.Utf8);     
}

function getAES(data){ //加密
    var key  = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';  //密鑰
    var iv   = '1234567812345678';
    var encrypted =getAesString(data,key,iv); //密文
    var encrypted1 =CryptoJS.enc.Utf8.parse(encrypted);
    return encrypted;
}

function getDAes(data){//解密
    var key  = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';  //密鑰
    var iv   = '1234567812345678';
    var decryptedStr =getDAesString(data,key,iv);
    return decryptedStr;
}

輸出結(jié)果

encrypt: GtV+06AIR7HQ8Bm4pRHdGw==
decrypt: Message

key和iv我們都可以更換束凑,但是需要保證的是加解密的key和vi保持一致

2.參考前端crypto-js AES加密 PHP后端解密

前端js

<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/aes.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/components/pad-zeropadding.js"></script>
<script>
    var key_hash = CryptoJS.MD5("Message");
    var key = CryptoJS.enc.Utf8.parse(key_hash);
    var iv  = CryptoJS.enc.Utf8.parse('1234567812345678');
    var encrypted = CryptoJS.AES.encrypt("Message", key, { iv: iv,mode:CryptoJS.mode.CBC,padding:CryptoJS.pad.ZeroPadding});
    document.write("encode:"+encrypted);
</script>

php代碼

<?php
$text = "Message";
$key = md5($text);  //key的長(zhǎng)度必須16晒旅,32位,這里直接MD5一個(gè)長(zhǎng)度為32位的key
$iv='1234567812345678';
$crypttext = mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $key, $text, MCRYPT_MODE_CBC, $iv);
$decode = mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $key, $crypttext, MCRYPT_MODE_CBC, $iv);
echo base64_encode($crypttext);
echo "<br/>";
echo $decode;
echo "<br/>";
?>

3.實(shí)戰(zhàn)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市课竣,隨后出現(xiàn)的幾起案子嘉赎,更是在濱河造成了極大的恐慌,老刑警劉巖稠氮,帶你破解...
    沈念sama閱讀 218,036評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件曹阔,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡隔披,警方通過(guò)查閱死者的電腦和手機(jī)赃份,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)奢米,“玉大人抓韩,你說(shuō)我怎么就攤上這事△蕹ぃ” “怎么了谒拴?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,411評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)涉波。 經(jīng)常有香客問(wèn)我英上,道長(zhǎng)炭序,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,622評(píng)論 1 293
  • 正文 為了忘掉前任苍日,我火速辦了婚禮惭聂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘相恃。我一直安慰自己辜纲,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布拦耐。 她就那樣靜靜地躺著耕腾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪杀糯。 梳的紋絲不亂的頭發(fā)上扫俺,一...
    開(kāi)封第一講書(shū)人閱讀 51,521評(píng)論 1 304
  • 那天,我揣著相機(jī)與錄音火脉,去河邊找鬼牵舵。 笑死柒啤,一個(gè)胖子當(dāng)著我的面吹牛倦挂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播担巩,決...
    沈念sama閱讀 40,288評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼方援,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了涛癌?” 一聲冷哼從身側(cè)響起犯戏,我...
    開(kāi)封第一講書(shū)人閱讀 39,200評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拳话,沒(méi)想到半個(gè)月后先匪,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡弃衍,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評(píng)論 3 336
  • 正文 我和宋清朗相戀三年呀非,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片镜盯。...
    茶點(diǎn)故事閱讀 39,953評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡岸裙,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出速缆,到底是詐尸還是另有隱情降允,我是刑警寧澤,帶...
    沈念sama閱讀 35,673評(píng)論 5 346
  • 正文 年R本政府宣布艺糜,位于F島的核電站剧董,受9級(jí)特大地震影響幢尚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜翅楼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評(píng)論 3 329
  • 文/蒙蒙 一侠草、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧犁嗅,春花似錦边涕、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,889評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至宠蚂,卻和暖如春式撼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背求厕。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,011評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工著隆, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人呀癣。 一個(gè)月前我還...
    沈念sama閱讀 48,119評(píng)論 3 370
  • 正文 我出身青樓美浦,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親项栏。 傳聞我的和親對(duì)象是個(gè)殘疾皇子浦辨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評(píng)論 2 355