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

前言

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

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

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


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


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

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

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

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

Web前端安全实操

1. JS代码安全

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

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

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

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


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


一段未经保护的代码,如:

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

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

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(); 

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


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


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

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(); 

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

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

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

2. Web前端防护

前面已经简单说明过,WAF前端可以实现很多WAF才有的功能。比如:SQL注入防护、XSS跨站攻击防护、爬虫防护、自动化功击防护,等等。听起来着实科幻。


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


“有网友说:Web前端可以实现WAF功能,是真的吗?我们来看调查短片…短文”

网络上有一款Web安全产品,名为“Witch-Cape”,实现的就是上述功能,其对自身的定位即是:前端WAF!从名字上就可以猜测,这就是一款在前端实现WAF功能的产品。


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


Witch-Cape是SDK式的脚本,从网站可以直接下载。使用起来也非常方便,就是加载一个JS文件就可以了。就可以了,没有其它,果然简单!

接下来,用事实说话,测试其是否真实有效。比如测试自动化攻击防护:

首先准备测试代码:


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


这段测试代码模拟了类似撞库或暴力破解之类的自动化攻击。未接入Witch-Cape前,当运行脚本程序,会自动填写用户名、密码。如下图:

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


在页面中引入一行:

script src="anti_automated_attack.js" 

这是Witch-Cape的反自动化攻击模块,然后再次尝试之前的运行,会发现:无法自动输入密码,自动化脚本运行出错,攻击被成功阻止:


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


再进一步测试,使用自动按键软件:按键精灵。录制屏幕并自动输入内容。保护前,可自动输入:


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


保护后,按键模拟无效:


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


这个测试证明:Witch-Cape可以防止自动按键模拟软件发起的攻击。

用这一个测试、实验,说明前端是可以进行Web安全防护的。

篇幅所限,其它更多的功能,如:SQL注入、XSS、CSRF等等这里就不逐一进行测试了。应该相信“全都是真的”。

Web前端安全的现实意义

一方面,它解决了传统Web安全防护的盲点,比如JS代码安全问题,这是它的功能意义。另一方面,它尝试以一种低成本的方式,换了一个阵地解决Web安全防护问题。

在实现中,很多中小企业、政府的网站,有安全防护的需要,不单是合规性需求,而且是真实性需求。但很多时候没有足够的资金用于采购昂贵的WAF。Web前端安全技术、产品的发展,在很大程度上可以解决这类刚需群体的实际需求。

天下数据是国内屈指可数的拥有多处海外自建机房的新型IDC服务商,被业界公认为“中国IDC行业首选品牌”。

天下数据与全球近120多个国家顶级机房直接合作,提供包括香港、美国、韩国、日本、台湾、新加坡、荷兰、法国、英国、德国、埃及、南非、巴西、印度、越南等国家和地区的服务器、云服务器的租用服务.

除提供传统的IDC产品外,天下数据的主要职责是为大中型企业提供更精细、安全、满足个性需求的定制化服务器解决方案,特别是在直销、金融、视频、流媒体、游戏、电子商务、亚博国际手机客户端链、快消、物联网、大数据等诸多行业,为广大客户解决服务器租用中遇到的各种问题。

加入我们

热门文章