Web前端安全探秘：技术理论与现实应用

前言

Web前端安全是个新概念，可以理解为它是Web安全防护领域的一部分。

早些时候，曾被狭义的认为前端安全即JS安全。倒是没有错，但不全面。目前来看，应该说：前端代码安全(JS代码安全)+ 前端攻击入侵防护功能 = Web前端安全。

也可以通俗的解释为：Web前端安全，包含：JS代码安全、Web前端安全防护两个方面。

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

简短的概述而言：做好Web前端安全，可以防止很多Web安全事件的发生。比如：Web页面功能被分析、JSH5应用被复制或盗用、正常功能被篡改;还比如：防止爬虫、防止自动化攻击、防止SQL注入、防止XSS攻击、防止CRSF等等。

看到这里，不要疑惑，上面没打错字：Web前端安全做好了，可以实现很多本该是WAF才有的安全防护效果。

如果安全要求不是非常高，很多中小企业的Web防护，完全可以在Web前端实现。

Web前端安全实操

1. JS代码安全

Web页面功能，都是由JS代码实现的。JS代码公开透明的特点，使代码谁都可以任意查看，这就带来了如：被分析、复制、盗用、功能篡改等一系列安全隐患。

知名的事件如：锤子手机发布时销量造假事件、小米手机英国众筹作弊事件，都是由于JS代码未保护而直接导致的。

JS代码经过混淆加密后，会变成不可读、不可分析、不可盗用(代码可与域名绑定)的安全代码，可极大的提高前端功能安全性。

JS代码混淆加密，有专业的平台工具，比如：JShaman。

一段未经保护的代码，如：

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

经JShaman混淆加密，低强度的保护结果，代码会变为：

var _0x5f2d=['hellox20world'];(function(_0x1d7bcc,_0x3c8ae3){var _0x51bb3c=function(_0x1df202){while(--_0x1df202){_0x1d7bcc['x70x75x73x68'](_0x1d7bcc['x73x68x69x66x74']());}};_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(); 

到这里，也许有人会有异意：eval也是可以对JS代码进行加密的。此言差异，eval早已经被玩坏了，还原eval加密代码的办法简直是千千万。而这种混淆加密的方式，保护后的代码是不可逆的。

也许上面的保护结果还不够安全?那么将加密强度调高一些，结果可成为:

var _0x0514=['aGVsbG8gd29ybGQx3d'];(function(_0x3b012b,_0x539d9c){var _0x37316d=function(_0x30ad8d){while(--_0x30ad8d){_0x3b012b['x70x75x73x68'](_0x3b012b['x73x68x69x66x74']());}};var _0x53350c=function(){var _0x823789={'x64x61x74x61':{'x6bx65x79':'x63x6fx6fx6bx69x65','x76x61x6cx75x65':'x74x69x6dx65x6fx75x74'},'x73x65x74x43x6fx6fx6bx69x65':function(_0xbc497b,_0x4336d2,_0x4169e2,_0x43419c){_0x43419c_0x43419c=_0x43419c||{};var    _0x4916b2=_0x4336d2+'x3d'+_0x4169e2;var _0x12134a=0x0;for(var _0x12134a=0x0,_0x783636=_0xbc497b['x6cx65x6ex67x74x68'];_0x12134a<_0x783636;_0x12134a++){var _0x2e1f17=_0xbc497b[_0x12134a];_0x4916b2+='x3bx20'+_0x2e1f17;var _0x35f5fa=_0xbc497b[_0x2e1f17];_0xbc497b['x70x75x73x68'](_0x35f5fa);_0x783636=_0xbc497b['x6cx65x6ex67x74x68'];if(_0x35f5fa!==!![]){_0x4916b2+='x3d'+_0x35f5fa;}}_0x43419c['x63x6fx6fx6bx69x65']=_0x4916b2;},'x72x65x6dx6fx76x65x43x6fx6fx6bx69x65':function(){return'x64x65x76';},'x67x65x74x43x6fx6fx6bx69x65':function(_0x48ae46,_0x427a1d){_0x48ae46_0x48ae46=_0x48ae46||function(_0x271c78){return    _0x271c78;};var _0x3a6742=_0x48ae46(new RegExp('x28x3fx3ax5ex7cx3bx20x29'+_0x427a1d['x72x65x70x6cx61x63x65'](/([.$?*|{}()[]/+^])/g,'x24x31')+'x3dx28x5bx5ex3bx5dx2ax29'));var _0x3ae165=function(_0xc39227,_0x5b1202){_0xc39227(++_0x5b1202);};_0x3ae165(_0x37316d,_0x539d9c);return    _0x3a6742?decodeURIComponent(_0x3a6742[0x1]):undefined;}};var _0x33cdd7=function(){var _0xb70dcd=new RegExp('x5cx77x2bx20x2ax5cx28x5cx29x20x2ax7bx5cx77x2bx20x2ax5bx27x7cx22x5dx2ex2bx5bx27x7cx22x5dx3bx3fx20x2ax7d');return    _0xb70dcd['x74x65x73x74'](_0x823789['x72x65x6dx6fx76x65x43x6fx6fx6bx69x65']['x74x6fx53x74x72x69x6ex67']());};_0x823789['x75x70x64x61x74x65x43x6fx6fx6bx69x65']=_0x33cdd7;var _0x113d74='';var _0x31a093=_0x823789['x75x70x64x61x74x65x43x6fx6fx6bx69x65']();if(!_0x31a093){_0x823789['x73x65x74x43x6fx6fx6bx69x65'](['x2a'],'x63x6fx75x6ex74x65x72',0x1);}else    if(_0x31a093){_0x113d74=_0x823789['x67x65x74x43x6fx6fx6bx69x65'](null,'x63x6fx75x6ex74x65x72');}else{_0x823789['x72x65x6dx6fx76x65x43x6fx6fx6bx69x65']();}};_0x53350c();}(_0x0514,0x91));var _0x4051=function(_0x34db19,_0x35bd13){_0x34db19_0x34db19=_0x34db19-0x0;var    _0xa11d83=_0x0514[_0x34db19];if(_0x4051['x69x6ex69x74x69x61x6cx69x7ax65x64']===undefined){(function(){var _0x278969=Function('x72x65x74x75x72x6ex20x28x66x75x6ex63x74x69x6fx6ex20x28x29x20'+'x7bx7dx2ex63x6fx6ex73x74x72x75x63x74x6fx72x28x22x72x65x74x75x72x6ex20x74x68x69x73x22x29x28x29'+'x29x3b');var    _0x2a0b7d=_0x278969();var _0x344b5c='x41x42x43x44x45x46x47x48x49x4ax4bx4cx4dx4ex4fx50x51x52x53x54x55x56x57x58x59x5ax61x62x63x64x65x66x67x68x69x6ax6bx6cx6dx6ex6fx70x71x72x73x74x75x76x77x78x79x7ax30x31x32x33x34x35x36x37x38x39x2bx2fx3d';_0x2a0b7d['x61x74x6fx62']||(_0x2a0b7d['x61x74x6fx62']=function(_0x48890d){var    _0x5d6c02=String(_0x48890d)['x72x65x70x6cx61x63x65'](/=+$/,'');for(var _0x5bd8ac=0x0,_0x5edcb9,_0x3f6190,_0x2bd336=0x0,_0x5c46eb='';_0x3f6190=_0x5d6c02['x63x68x61x72x41x74'](_0x2bd336++);~_0x3f6190&&(_0x5edcb9=_0x5bd8ac%0x4?_0x5edcb9*0x40+_0x3f6190:_0x3f6190,_0x5bd8ac++%0x4)?_0x5c46eb+=String['x66x72x6fx6dx43x68x61x72x43x6fx64x65'](0xff&_0x5edcb9>>(-0x2*_0x5bd8ac&0x6)):0x0){_0x3f6190=_0x344b5c['x69x6ex64x65x78x4fx66'](_0x3f6190);}return    _0x5c46eb;});}());_0x4051['x62x61x73x65x36x34x44x65x63x6fx64x65x55x6ex69x63x6fx64x65']=function(_0x4fa800){var _0x61c854=atob(_0x4fa800);var _0x2bf066=[];for(var _0x3eabd1=0x0,_0x52768b=_0x61c854['x6cx65x6ex67x74x68'];_0x3eabd1<_0x52768b;_0x3eabd1++){_0x2bf066+='x25'+('x30x30'+_0x61c854['x63x68x61x72x43x6fx64x65x41x74'](_0x3eabd1)['x74x6fx53x74x72x69x6ex67'](0x10))['x73x6cx69x63x65'](-0x2);}return    decodeURIComponent(_0x2bf066);};_0x4051['x64x61x74x61']={};_0x4051['x69x6ex69x74x69x61x6cx69x7ax65x64']=!![];}if(_0x4051['x64x61x74x61'][_0x34db19]===undefined){var _0x52f575=function(_0x4d5e36){this['x72x63x34x42x79x74x65x73']=_0x4d5e36;this['x73x74x61x74x65x73']=[0x1,0x0,0x0];this['x6ex65x77x53x74x61x74x65']=function(){return'x6ex65x77x53x74x61x74x65';};this['x66x69x72x73x74x53x74x61x74x65']='x5cx77x2bx20x2ax5cx28x5cx29x20x2ax7bx5cx77x2bx20x2a';this['x73x65x63x6fx6ex64x53x74x61x74x65']='x5bx27x7cx22x5dx2ex2bx5bx27x7cx22x5dx3bx3fx20x2ax7d';};_0x52f575['x70x72x6fx74x6fx74x79x70x65']['x63x68x65x63x6bx53x74x61x74x65']=function(){var    _0x4f836=new RegExp(this['x66x69x72x73x74x53x74x61x74x65']+this['x73x65x63x6fx6ex64x53x74x61x74x65']);return this['x72x75x6ex53x74x61x74x65'](_0x4f836['x74x65x73x74'](this['x6ex65x77x53x74x61x74x65']['x74x6fx53x74x72x69x6ex67']())?--this['x73x74x61x74x65x73'][0x1]:--this['x73x74x61x74x65x73'][0x0]);};_0x52f575['x70x72x6fx74x6fx74x79x70x65']['x72x75x6ex53x74x61x74x65']=function(_0x5ed9b5){if(!Boolean(~_0x5ed9b5)){return    _0x5ed9b5;}return this['x67x65x74x53x74x61x74x65'](this['x72x63x34x42x79x74x65x73']);};_0x52f575['x70x72x6fx74x6fx74x79x70x65']['x67x65x74x53x74x61x74x65']=function(_0x1608bb){for(var _0x3bfff3=0x0,_0x4adb83=this['x73x74x61x74x65x73']['x6cx65x6ex67x74x68'];_0x3bfff3<_0x4adb83;_0x3bfff3++){this['x73x74x61x74x65x73']['x70x75x73x68'](Math['x72x6fx75x6ex64'](Math['x72x61x6ex64x6fx6d']()));_0x4adb83=this['x73x74x61x74x65x73']['x6cx65x6ex67x74x68'];}return    _0x1608bb(this['x73x74x61x74x65x73'][0x0]);};new _0x52f575(_0x4051)['x63x68x65x63x6bx53x74x61x74x65']();_0xa11d83=_0x4051['x62x61x73x65x36x34x44x65x63x6fx64x65x55x6ex69x63x6fx64x65'](_0xa11d83);_0x4051['x64x61x74x61'][_0x34db19]=_0xa11d83;}else{_0xa11d83=_0x4051['x64x61x74x61'][_0x34db19];}return    _0xa11d83;};function hello_world(){var _0x20d22f=function(){var _0x12d06f=!![];return function(_0x2d1e48,_0x2cad7c){var _0x478394=_0x12d06f?function(){if(_0x2cad7c){var _0x400b9e=_0x2cad7c['x61x70x70x6cx79'](_0x2d1e48,arguments);_0x2cad7c=null;return    _0x400b9e;}}:function(){};_0x12d06f=![];return _0x478394;};}();var _0x34e3b6=_0x20d22f(this,function(){var _0xafe2ff=function(){return'x64x65x76';},_0x492e83=function(){return'x77x69x6ex64x6fx77';};var _0x1f9c7f=function(){var _0x5ce740=new    RegExp('x5cx77x2bx20x2ax5cx28x5cx29x20x2ax7bx5cx77x2bx20x2ax5bx27x7cx22x5dx2ex2bx5bx27x7cx22x5dx3bx3fx20x2ax7d');return!_0x5ce740['x74x65x73x74'](_0xafe2ff['x74x6fx53x74x72x69x6ex67']());};var _0x132af8=function(){var    _0x3ea732=new RegExp('x28x5cx5cx5bx78x7cx75x5dx28x5cx77x29x7bx32x2cx34x7dx29x2b');return _0x3ea732['x74x65x73x74'](_0x492e83['x74x6fx53x74x72x69x6ex67']());};var _0x5ca904=function(_0x44911c){var _0xff23c4=~-0x1>>0x1+0xff%0x0;if(_0x44911c['x69x6ex64x65x78x4fx66']('x69'===_0xff23c4)){_0x2c9b77(_0x44911c);}};var    _0x2c9b77=function(_0x371de1){var _0x5a287c=~-0x4>>0x1+0xff%0x0;if(_0x371de1['x69x6ex64x65x78x4fx66']((!![]+'')[0x3])!==_0x5a287c){_0x5ca904(_0x371de1);}};if(!_0x1f9c7f()){if(!_0x132af8()){_0x5ca904('x69x6ex64u0435x78x4fx66');}else{_0x5ca904('x69x6ex64x65x78x4fx66');}}else{_0x5ca904('x69x6ex64u0435x78x4fx66');}});_0x34e3b6();alert(_0x4051('0x0'));}hello_world(); 

代码已变的完全不可读、不可逆，更无法理解代码含义了。代码安全性真正得到了极大提高。当然，功能上与混淆加密前是无异的，不影响正常运行。

这样前端代码(JS代码)安全问题得到了解决。

想必不少人对JS混淆加密是熟悉的，上面的内容还称不上是硬货。那么接下来，是展示黑魔法的时候了。

2. Web前端防护

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!