如何保护前端JS代码?前端js代码加密

http://www.jshaman.com/#section2

Web前端JS代码需要保护吗?
这得具体情况具体分析。
1、如果只是写一段web页面图片轮播,或是跑马灯效果等等之类简单的功能。那不需要保护。
2、如果是精心设计一个绚丽的特效,如果想要保护这段自己付诸幸苦实现的特效代码不被他人随意拿去使用,那应该保护这段JS代码!
3、如果页面上有重要的功能是用JS代码管控的,比如交易逻辑、帐号密码信息、个人隐私、甚至有与远程服务器或数据库的通信等等,那么相关的js代码非常应该被保护、应该做JS代码防盗保护!
否则可能引起被黑客分析、攻击等严重问题。安全相关的事情,从来都要防患于未然、不可心存侥幸。除非它对你毫不重要。

 

如何保护Web前端JS代码?
1、打包&压缩
有人认为打包、压缩就是对JS代码的保护。确实,打包在一定程度上可以起码些许保护作用,好像看起来是如此。但打包、压缩的目的并不是为了保护JS代码,而是为了使用方便、减小代码体积,方便使用、便于传输。比如模块化的编程可能产生200个JS文件,如果使用时逐一用“script src”进行引用……这是种折磨,不管是对于代发人员,还是网络加载(浏览器也会生气!x_x)。
类似Webpacket、Gulp进行打包,可以将这些多个JS合成到一个文件,并且可能会进行回车、换行、空格的删除,以实现代码压缩,也有一些简单混淆操作:把长变量名改为统一风格的短变量名等。然后,最终生成的一个文件。代码总量减小了、可读性差了、使用方便了。同时让有些人认为这也实现了JS代码保护。其实、实际上、当然的代码并没有被保护:可读性依旧,只是代码量大了一些而已,只要稍稍耐心的读代码,会发现,代码依然是很易理解的,没有多少安全性可言。
2、混淆&加密
前端JS代码的保护,必需要混淆和加密共用。
单独的JS源代码加密,是行不通的,更不可能有所谓的JS不可逆加密。因为代码在浏览器端执行时,必须转解密还原成原始代码,才能被浏览器的JS引擎识别和运行。在解密后,会存在完整的原始JS代码。这是非常不安全的存在,有多种方法可将原始的JS代码显示出来。
JS代码混淆被不少开发人员认为是不够高端的JS代码保护方式,听起来不如JS源码加密更具安全性。事实上,混淆也有多个级别。比如比较低端的字符搜索和串替换、随机插入伪僵尸代码、字符串十六进制化等等。而也有高端的手法,会先进行语法分析、词法分析,重建语法树,相当于已经实现了一个JS引擎,在引擎中处理代码,那么,就可以在其中任意一步进行自由度极高的操作,比如在语法树中插入新的语法结构、比如可以将字符串全部提取并进行加密、可以对变量进行整体有规则化的重定义使无意义化等等。这样就可以实现真正的代码重建。这样重建的JS代码安全性,将会有一个质的提升。
当正真的混淆和加密联合使用,如JShaman JS保护, 可以实现真正的JS代码安全保护。JS混淆中融入JS加密,JS加密中又嵌入JS混淆。这样保护后的代码,即使在客户端执行环境中被逆向还原,得到的也是大量含义不明的函数、代码、字符串。特别重点是:代码已经经过了重建,这时逆向得到的也是分离后的重建的无意义JS代码、大量的僵尸代码、混淆的字符串、不明含意的变量。可读性与原始代码相比……天壤之别。
固执的人或许还会说:没有破解不了的保护方案,只要我认真、用心、用时的分析,还是能分析出原始代码含意的,确实,可能如此。
但是,原本的代码,可能只需要读10分钟,而从这样保护后的JS代码读取原始含意,可能需要……10个月。而这时候,我们的JS代码可能已经更新到下一版了。
JS代码保护的目的已经达到了,不是吗?

 

一、 基本原理

混淆主要涉及两种思路:

a.通过正则替换实现的混淆器;

b.通过语法树替换实现的混淆器。

第一种实现成本低,但是效果也一般,适合对混淆要求不高的场景。第二种实现成本较高,但是更灵活,而且更安全,更适合对抗场景。

二、 工具

2.1 jascriptobfascator
包含在线版和桌面版,试用了下效果还行。

桌面版:

2.2 Uglifyjs(开源)

uglifyjs是一个开源的js 压缩工具,主要用于压缩,混淆功能并不强。这

Uglify混淆主要使用了以下方法(AST指抽象语法树):
字符串解析成AST
解析AST,计算出作用域、变量名等
提供遍历AST的方法,找到你想要修改的节点
提供把AST打印成源代码的功能
提供美化代码的功能
提供定位某个word位置的功能

2.3 jshsman

jshaman是一个商业级工具,看了很多社区的评论,这个目前是最好的,可以在线免费使用,也可以购买商业版。

地址:jshaman.com/
网站很干净,没什么烦人的广告,用起来挺清爽。

2.4 jsfuck

jsfuck 是一个开源的js 混淆工具,原理比较简单,其实就是通过特定的字符串加上下标定位字符,再由这些字符替换源代码,从而实现混淆。
官网:jsfuck.com/,混淆功能看上去比较强大,但是本质上我认为是一种编码,而且它让会文件体积增大很多。对于太多的代码不能混淆,混淆后会出错。

三、 总结

建议:如果要做代码压缩,建议使用Uglifyjs,如果是为了安全性,做js代码混淆,建议使用jshaman。

相关推荐

用纯CSS实现优雅的tab页

通常tab页的交互都是点击tab头然后展示对应的一块内容,这种排他性跟HTML里面的某个原住民很类似,是啥呢?没错!就是单选框组。 单选框组有一个:checked伪类,可以设定单选框被选中后的样式,所以我们要把一组单选框当做tab页的头部么?当然不是,单选框是很固执的,用CSS去感化他是很吃力的,那怎么办呢? 这里就要用到CSS里面的+选择器了[实际上这个选择器我之前从来没用过-_-||],简单来说+选择器就是选择紧跟在某个指定元素后面的另一个指定的元素,具体介绍请看

暂无评论

微信扫一扫,分享到朋友圈

如何保护前端JS代码?前端js代码加密