前言

Web前端安全是個(gè)新概念，可以理解為它是Web安全防護(hù)領(lǐng)域的一部分。

早些時(shí)候，曾被狹義的認(rèn)為前端安全即JS安全。倒是沒(méi)有錯(cuò)，但不全面。目前來(lái)看，應(yīng)該說(shuō)：前端代碼安全(JS代碼安全)+ 前端攻擊入侵防護(hù)功能 = Web前端安全。

也可以通俗的解釋為：Web前端安全，包含：JS代碼安全、Web前端安全防護(hù)兩個(gè)方面。

[[261415]]

為什么要做Web前端安全工作?

簡(jiǎn)短的概述而言：做好Web前端安全，可以防止很多Web安全事件的發(fā)生。比如：Web頁(yè)面功能被分析、JS\H5應(yīng)用被復(fù)制或盜用、正常功能被篡改;還比如：防止爬蟲、防止自動(dòng)化攻擊、防止SQL注入、防止XSS攻擊、防止CRSF等等。

看到這里，不要疑惑，上面沒(méi)打錯(cuò)字：Web前端安全做好了，可以實(shí)現(xiàn)很多本該是WAF才有的安全防護(hù)效果。

如果安全要求不是非常高，很多中小企業(yè)的Web防護(hù)，完全可以在Web前端實(shí)現(xiàn)。

Web前端安全實(shí)操

1. JS代碼安全

Web頁(yè)面功能，都是由JS代碼實(shí)現(xiàn)的。JS代碼公開透明的特點(diǎn)，使代碼誰(shuí)都可以任意查看，這就帶來(lái)了如：被分析、復(fù)制、盜用、功能篡改等一系列安全隱患。

知名的事件如：錘子手機(jī)發(fā)布時(shí)銷量造假事件、小米手機(jī)英國(guó)眾籌作弊事件，都是由于JS代碼未保護(hù)而直接導(dǎo)致的。

JS代碼經(jīng)過(guò)混淆加密后，會(huì)變成不可讀、不可分析、不可盜用(代碼可與域名綁定)的安全代碼，可極大的提高前端功能安全性。

JS代碼混淆加密，有專業(yè)的平臺(tái)工具，比如：JShaman。

一段未經(jīng)保護(hù)的代碼，如：

function hello_world()  
{   
alert("hello world");  
}   
hello_world(); 

經(jīng)JShaman混淆加密，低強(qiáng)度的保護(hù)結(jié)果，代碼會(huì)變?yōu)椋?/p>

var _0x5f2d=['hello\x20world'];(function(_0x1d7bcc,_0x3c8ae3){var _0x51bb3c=function(_0x1df202){while(--_0x1df202){_0x1d7bcc['\x70\x75\x73\x68'](_0x1d7bcc['\x73\x68\x69\x66\x74']());}};_0x51bb3c(++_0x3c8ae3);}(_0x5f2d,0x121));var _0xd5f2=function(_0x32a75d,_0x18d324){_0x32a75d_0x32a75d=_0x32a75d-0x0;var    _0x462cef=_0x5f2d[_0x32a75d];return _0x462cef;};function hello_world(){alert(_0xd5f2('0x0'));}hello_world(); 

到這里，也許有人會(huì)有異意：eval也是可以對(duì)JS代碼進(jìn)行加密的。此言差異，eval早已經(jīng)被玩壞了，還原eval加密代碼的辦法簡(jiǎn)直是千千萬(wàn)。而這種混淆加密的方式，保護(hù)后的代碼是不可逆的。

也許上面的保護(hù)結(jié)果還不夠安全?那么將加密強(qiáng)度調(diào)高一些，結(jié)果可成為:

var _0x0514=['aGVsbG8gd29ybGQ\x3d'];(function(_0x3b012b,_0x539d9c){var _0x37316d=function(_0x30ad8d){while(--_0x30ad8d){_0x3b012b['\x70\x75\x73\x68'](_0x3b012b['\x73\x68\x69\x66\x74']());}};var _0x53350c=function(){var _0x823789={'\x64\x61\x74\x61':{'\x6b\x65\x79':'\x63\x6f\x6f\x6b\x69\x65','\x76\x61\x6c\x75\x65':'\x74\x69\x6d\x65\x6f\x75\x74'},'\x73\x65\x74\x43\x6f\x6f\x6b\x69\x65':function(_0xbc497b,_0x4336d2,_0x4169e2,_0x43419c){_0x43419c_0x43419c=_0x43419c||{};var    _0x4916b2=_0x4336d2+'\x3d'+_0x4169e2;var _0x12134a=0x0;for(var _0x12134a=0x0,_0x783636=_0xbc497b['\x6c\x65\x6e\x67\x74\x68'];_0x12134a<_0x783636;_0x12134a++){var _0x2e1f17=_0xbc497b[_0x12134a];_0x4916b2+='\x3b\x20'+_0x2e1f17;var _0x35f5fa=_0xbc497b[_0x2e1f17];_0xbc497b['\x70\x75\x73\x68'](_0x35f5fa);_0x783636=_0xbc497b['\x6c\x65\x6e\x67\x74\x68'];if(_0x35f5fa!==!![]){_0x4916b2+='\x3d'+_0x35f5fa;}}_0x43419c['\x63\x6f\x6f\x6b\x69\x65']=_0x4916b2;},'\x72\x65\x6d\x6f\x76\x65\x43\x6f\x6f\x6b\x69\x65':function(){return'\x64\x65\x76';},'\x67\x65\x74\x43\x6f\x6f\x6b\x69\x65':function(_0x48ae46,_0x427a1d){_0x48ae46_0x48ae46=_0x48ae46||function(_0x271c78){return    _0x271c78;};var _0x3a6742=_0x48ae46(new RegExp('\x28\x3f\x3a\x5e\x7c\x3b\x20\x29'+_0x427a1d['\x72\x65\x70\x6c\x61\x63\x65'](/([.$?*|{}()[]\/+^])/g,'\x24\x31')+'\x3d\x28\x5b\x5e\x3b\x5d\x2a\x29'));var _0x3ae165=function(_0xc39227,_0x5b1202){_0xc39227(++_0x5b1202);};_0x3ae165(_0x37316d,_0x539d9c);return    _0x3a6742?decodeURIComponent(_0x3a6742[0x1]):undefined;}};var _0x33cdd7=function(){var _0xb70dcd=new RegExp('\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d');return    _0xb70dcd['\x74\x65\x73\x74'](_0x823789['\x72\x65\x6d\x6f\x76\x65\x43\x6f\x6f\x6b\x69\x65']['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};_0x823789['\x75\x70\x64\x61\x74\x65\x43\x6f\x6f\x6b\x69\x65']=_0x33cdd7;var _0x113d74='';var _0x31a093=_0x823789['\x75\x70\x64\x61\x74\x65\x43\x6f\x6f\x6b\x69\x65']();if(!_0x31a093){_0x823789['\x73\x65\x74\x43\x6f\x6f\x6b\x69\x65'](['\x2a'],'\x63\x6f\x75\x6e\x74\x65\x72',0x1);}else    if(_0x31a093){_0x113d74=_0x823789['\x67\x65\x74\x43\x6f\x6f\x6b\x69\x65'](null,'\x63\x6f\x75\x6e\x74\x65\x72');}else{_0x823789['\x72\x65\x6d\x6f\x76\x65\x43\x6f\x6f\x6b\x69\x65']();}};_0x53350c();}(_0x0514,0x91));var _0x4051=function(_0x34db19,_0x35bd13){_0x34db19_0x34db19=_0x34db19-0x0;var    _0xa11d83=_0x0514[_0x34db19];if(_0x4051['\x69\x6e\x69\x74\x69\x61\x6c\x69\x7a\x65\x64']===undefined){(function(){var _0x278969=Function('\x72\x65\x74\x75\x72\x6e\x20\x28\x66\x75\x6e\x63\x74\x69\x6f\x6e\x20\x28\x29\x20'+'\x7b\x7d\x2e\x63\x6f\x6e\x73\x74\x72\x75\x63\x74\x6f\x72\x28\x22\x72\x65\x74\x75\x72\x6e\x20\x74\x68\x69\x73\x22\x29\x28\x29'+'\x29\x3b');var    _0x2a0b7d=_0x278969();var _0x344b5c='\x41\x42\x43\x44\x45\x46\x47\x48\x49\x4a\x4b\x4c\x4d\x4e\x4f\x50\x51\x52\x53\x54\x55\x56\x57\x58\x59\x5a\x61\x62\x63\x64\x65\x66\x67\x68\x69\x6a\x6b\x6c\x6d\x6e\x6f\x70\x71\x72\x73\x74\x75\x76\x77\x78\x79\x7a\x30\x31\x32\x33\x34\x35\x36\x37\x38\x39\x2b\x2f\x3d';_0x2a0b7d['\x61\x74\x6f\x62']||(_0x2a0b7d['\x61\x74\x6f\x62']=function(_0x48890d){var    _0x5d6c02=String(_0x48890d)['\x72\x65\x70\x6c\x61\x63\x65'](/=+$/,'');for(var _0x5bd8ac=0x0,_0x5edcb9,_0x3f6190,_0x2bd336=0x0,_0x5c46eb='';_0x3f6190=_0x5d6c02['\x63\x68\x61\x72\x41\x74'](_0x2bd336++);~_0x3f6190&&(_0x5edcb9=_0x5bd8ac%0x4?_0x5edcb9*0x40+_0x3f6190:_0x3f6190,_0x5bd8ac++%0x4)?_0x5c46eb+=String['\x66\x72\x6f\x6d\x43\x68\x61\x72\x43\x6f\x64\x65'](0xff&_0x5edcb9>>(-0x2*_0x5bd8ac&0x6)):0x0){_0x3f6190=_0x344b5c['\x69\x6e\x64\x65\x78\x4f\x66'](_0x3f6190);}return    _0x5c46eb;});}());_0x4051['\x62\x61\x73\x65\x36\x34\x44\x65\x63\x6f\x64\x65\x55\x6e\x69\x63\x6f\x64\x65']=function(_0x4fa800){var _0x61c854=atob(_0x4fa800);var _0x2bf066=[];for(var _0x3eabd1=0x0,_0x52768b=_0x61c854['\x6c\x65\x6e\x67\x74\x68'];_0x3eabd1<_0x52768b;_0x3eabd1++){_0x2bf066+='\x25'+('\x30\x30'+_0x61c854['\x63\x68\x61\x72\x43\x6f\x64\x65\x41\x74'](_0x3eabd1)['\x74\x6f\x53\x74\x72\x69\x6e\x67'](0x10))['\x73\x6c\x69\x63\x65'](-0x2);}return    decodeURIComponent(_0x2bf066);};_0x4051['\x64\x61\x74\x61']={};_0x4051['\x69\x6e\x69\x74\x69\x61\x6c\x69\x7a\x65\x64']=!![];}if(_0x4051['\x64\x61\x74\x61'][_0x34db19]===undefined){var _0x52f575=function(_0x4d5e36){this['\x72\x63\x34\x42\x79\x74\x65\x73']=_0x4d5e36;this['\x73\x74\x61\x74\x65\x73']=[0x1,0x0,0x0];this['\x6e\x65\x77\x53\x74\x61\x74\x65']=function(){return'\x6e\x65\x77\x53\x74\x61\x74\x65';};this['\x66\x69\x72\x73\x74\x53\x74\x61\x74\x65']='\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a';this['\x73\x65\x63\x6f\x6e\x64\x53\x74\x61\x74\x65']='\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d';};_0x52f575['\x70\x72\x6f\x74\x6f\x74\x79\x70\x65']['\x63\x68\x65\x63\x6b\x53\x74\x61\x74\x65']=function(){var    _0x4f836=new RegExp(this['\x66\x69\x72\x73\x74\x53\x74\x61\x74\x65']+this['\x73\x65\x63\x6f\x6e\x64\x53\x74\x61\x74\x65']);return this['\x72\x75\x6e\x53\x74\x61\x74\x65'](_0x4f836['\x74\x65\x73\x74'](this['\x6e\x65\x77\x53\x74\x61\x74\x65']['\x74\x6f\x53\x74\x72\x69\x6e\x67']())?--this['\x73\x74\x61\x74\x65\x73'][0x1]:--this['\x73\x74\x61\x74\x65\x73'][0x0]);};_0x52f575['\x70\x72\x6f\x74\x6f\x74\x79\x70\x65']['\x72\x75\x6e\x53\x74\x61\x74\x65']=function(_0x5ed9b5){if(!Boolean(~_0x5ed9b5)){return    _0x5ed9b5;}return this['\x67\x65\x74\x53\x74\x61\x74\x65'](this['\x72\x63\x34\x42\x79\x74\x65\x73']);};_0x52f575['\x70\x72\x6f\x74\x6f\x74\x79\x70\x65']['\x67\x65\x74\x53\x74\x61\x74\x65']=function(_0x1608bb){for(var _0x3bfff3=0x0,_0x4adb83=this['\x73\x74\x61\x74\x65\x73']['\x6c\x65\x6e\x67\x74\x68'];_0x3bfff3<_0x4adb83;_0x3bfff3++){this['\x73\x74\x61\x74\x65\x73']['\x70\x75\x73\x68'](Math['\x72\x6f\x75\x6e\x64'](Math['\x72\x61\x6e\x64\x6f\x6d']()));_0x4adb83=this['\x73\x74\x61\x74\x65\x73']['\x6c\x65\x6e\x67\x74\x68'];}return    _0x1608bb(this['\x73\x74\x61\x74\x65\x73'][0x0]);};new _0x52f575(_0x4051)['\x63\x68\x65\x63\x6b\x53\x74\x61\x74\x65']();_0xa11d83=_0x4051['\x62\x61\x73\x65\x36\x34\x44\x65\x63\x6f\x64\x65\x55\x6e\x69\x63\x6f\x64\x65'](_0xa11d83);_0x4051['\x64\x61\x74\x61'][_0x34db19]=_0xa11d83;}else{_0xa11d83=_0x4051['\x64\x61\x74\x61'][_0x34db19];}return    _0xa11d83;};function hello_world(){var _0x20d22f=function(){var _0x12d06f=!![];return function(_0x2d1e48,_0x2cad7c){var _0x478394=_0x12d06f?function(){if(_0x2cad7c){var _0x400b9e=_0x2cad7c['\x61\x70\x70\x6c\x79'](_0x2d1e48,arguments);_0x2cad7c=null;return    _0x400b9e;}}:function(){};_0x12d06f=![];return _0x478394;};}();var _0x34e3b6=_0x20d22f(this,function(){var _0xafe2ff=function(){return'\x64\x65\x76';},_0x492e83=function(){return'\x77\x69\x6e\x64\x6f\x77';};var _0x1f9c7f=function(){var _0x5ce740=new    RegExp('\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d');return!_0x5ce740['\x74\x65\x73\x74'](_0xafe2ff['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};var _0x132af8=function(){var    _0x3ea732=new RegExp('\x28\x5c\x5c\x5b\x78\x7c\x75\x5d\x28\x5c\x77\x29\x7b\x32\x2c\x34\x7d\x29\x2b');return _0x3ea732['\x74\x65\x73\x74'](_0x492e83['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};var _0x5ca904=function(_0x44911c){var _0xff23c4=~-0x1>>0x1+0xff%0x0;if(_0x44911c['\x69\x6e\x64\x65\x78\x4f\x66']('\x69'===_0xff23c4)){_0x2c9b77(_0x44911c);}};var    _0x2c9b77=function(_0x371de1){var _0x5a287c=~-0x4>>0x1+0xff%0x0;if(_0x371de1['\x69\x6e\x64\x65\x78\x4f\x66']((!![]+'')[0x3])!==_0x5a287c){_0x5ca904(_0x371de1);}};if(!_0x1f9c7f()){if(!_0x132af8()){_0x5ca904('\x69\x6e\x64\u0435\x78\x4f\x66');}else{_0x5ca904('\x69\x6e\x64\x65\x78\x4f\x66');}}else{_0x5ca904('\x69\x6e\x64\u0435\x78\x4f\x66');}});_0x34e3b6();alert(_0x4051('0x0'));}hello_world(); 

代碼已變的完全不可讀、不可逆，更無(wú)法理解代碼含義了。代碼安全性真正得到了極大提高。當(dāng)然，功能上與混淆加密前是無(wú)異的，不影響正常運(yùn)行。

這樣前端代碼(JS代碼)安全問(wèn)題得到了解決。

想必不少人對(duì)JS混淆加密是熟悉的，上面的內(nèi)容還稱不上是硬貨。那么接下來(lái)，是展示黑魔法的時(shí)候了。

2. Web前端防護(hù)

前面已經(jīng)簡(jiǎn)單說(shuō)明過(guò)，WAF前端可以實(shí)現(xiàn)很多WAF才有的功能。比如：SQL注入防護(hù)、XSS跨站攻擊防護(hù)、爬蟲防護(hù)、自動(dòng)化功擊防護(hù)，等等。聽起來(lái)著實(shí)科幻。

[[261416]]

“有網(wǎng)友說(shuō)：Web前端可以實(shí)現(xiàn)WAF功能，是真的嗎?我們來(lái)看調(diào)查短片…短文”

網(wǎng)絡(luò)上有一款Web安全產(chǎn)品，名為“Witch-Cape”，實(shí)現(xiàn)的就是上述功能，其對(duì)自身的定位即是：前端WAF!從名字上就可以猜測(cè)，這就是一款在前端實(shí)現(xiàn)WAF功能的產(chǎn)品。

Witch-Cape是SDK式的腳本，從網(wǎng)站可以直接下載。使用起來(lái)也非常方便，就是加載一個(gè)JS文件就可以了。就可以了，沒(méi)有其它，果然簡(jiǎn)單!

接下來(lái)，用事實(shí)說(shuō)話，測(cè)試其是否真實(shí)有效。比如測(cè)試自動(dòng)化攻擊防護(hù)：

首先準(zhǔn)備測(cè)試代碼：

這段測(cè)試代碼模擬了類似撞庫(kù)或暴力破解之類的自動(dòng)化攻擊。未接入Witch-Cape前，當(dāng)運(yùn)行腳本程序，會(huì)自動(dòng)填寫用戶名、密碼。如下圖：

在頁(yè)面中引入一行：

script src="anti_automated_attack.js" 

這是Witch-Cape的反自動(dòng)化攻擊模塊，然后再次嘗試之前的運(yùn)行，會(huì)發(fā)現(xiàn)：無(wú)法自動(dòng)輸入密碼，自動(dòng)化腳本運(yùn)行出錯(cuò)，攻擊被成功阻止：

再進(jìn)一步測(cè)試，使用自動(dòng)按鍵軟件：按鍵精靈。錄制屏幕并自動(dòng)輸入內(nèi)容。保護(hù)前，可自動(dòng)輸入：

保護(hù)后，按鍵模擬無(wú)效：

這個(gè)測(cè)試證明：Witch-Cape可以防止自動(dòng)按鍵模擬軟件發(fā)起的攻擊。

用這一個(gè)測(cè)試、實(shí)驗(yàn)，說(shuō)明前端是可以進(jìn)行Web安全防護(hù)的。

篇幅所限，其它更多的功能，如：SQL注入、XSS、CSRF等等這里就不逐一進(jìn)行測(cè)試了。應(yīng)該相信“全都是真的”。

Web前端安全的現(xiàn)實(shí)意義

一方面，它解決了傳統(tǒng)Web安全防護(hù)的盲點(diǎn)，比如JS代碼安全問(wèn)題，這是它的功能意義。另一方面，它嘗試以一種低成本的方式，換了一個(gè)陣地解決Web安全防護(hù)問(wèn)題。

在實(shí)現(xiàn)中，很多中小企業(yè)、政府的網(wǎng)站，有安全防護(hù)的需要，不單是合規(guī)性需求，而且是真實(shí)性需求。但很多時(shí)候沒(méi)有足夠的資金用于采購(gòu)昂貴的WAF。Web前端安全技術(shù)、產(chǎn)品的發(fā)展，在很大程度上可以解決這類剛需群體的實(shí)際需求。