网页前端的语言 Javascript，由于谁都看得到代码逻辑，不如后端来得安全。因此除了机密性的程序码别放前端，最好网页上的 JS 也需要经过处理，除了降低可读性，也可避免被盗用。
常见的处理方式有压缩、加密、混淆等等，如果做得太简化，使用某些破解工具就能还原。因此本篇会说明比较安全、复杂的作法与流程。
然而再提醒一下，前端代码并没有无法破解的手段，本篇的列出的一些方法，要还原它们还是比较困难。除非是遇到高手，否则预防一般访客、或是 Script Kid 倒是绰绰有余了。
一、压缩 JS 工具
1. 为何要压缩 JS
压缩 JS 是非常必要的，原因如下：
- 可去除变量名称，让代码不易阅读
- 此过程为不可逆，无法还原
- 大幅缩小代码容量，缩短网页加载时间
由于压缩后代码无法还原，请记得保留原始版本。
2. 在线工具
线上压缩工具
YUI Compressor
- Yahoo 开发的压缩工具，效果不错
- 不支持 ES6
UglifyJS 3
在线工具：JSCompress
- 这是比较新的压缩工具，压缩比最强悍，代表 JS 语法优化程度最高。
- 版本 3 支持 ES6 语法
二、JS 加密工具
1. 在线工具 packer
JS 在线加密工具非常多，这里介绍的 packer 可能算是最没有效果的一个：
http://dean.edwards.name/packer/
上图是个简单的范例，上半部是简单的数学乘法运算，下半部是加密效果，看起来还是很厉害的，完完全全看不懂在做什么。
2. 破解方法
为什么说是最没有效果的加密工具？只要把刚刚加密后的代码，贴到以下这个 JS 美化工具：
按下「Beautify Code」后，代码几就会被还原，只是变量名被改了而已，整个运算逻辑看得一清二楚。
3. 补充说明
所以这个 packer 的作用，其实如作者自己下的副标题「A JavaScript Compressor」，只是个压缩代码的工具。
然而代码比较短时，也是看不出有压缩的效果，以本篇的范例来看，压缩后的代码，比原来的长度还多一大串。
三、JS 混淆工具
1. 在线工具 Javascript Obfuscator
在线的 JS 混淆工具也非常多，而混淆的特点是，也许看得出程序逻辑，但会让你看得非常痛苦，放弃解析的欲望。
例如来看这个算是知名度不错的混淆工具：
混淆后的代码不长，但是看起来有没有觉得脑袋爆炸的感觉？
2. 破解方法
一样把混淆后的代码，丢到前面的「JS 美化工具」看看：
结果很容易就看出代码逻辑了，虽然变量字符串比较长，但不影响阅读。
不过「JS 美化工具」并非万灵丹，本篇举例的代码刚好处理逻辑很简单，如果是比较长的代码，混淆后「JS 美化工具」不一定能还原。
3. 高级破解工具
那么比较困难的混淆代码，可以试试另一个比较专门的破解工具
这个工具专门用来还原不易阅读的 JS，前面有提到压缩后的 JS，变量名称被简化是不可逆的，将不易阅读。
而 JS NICE 会试着提供相关变量的类型注解，并帮我们把变量名称改成有意义的字符串，阅读起来比较容易。
四、JS 加密 + 混淆
看起来无论是加密或混淆，JS 都有工具可以让代码变得可以阅读。不过如果将 JS "加密" 再进行 "混淆"，要还原就非常困难了，请按照以下 3 个步骤进行：
- 先使用 JS 压缩工具
- 再使用 packer
- 最后使用 Javascript Obfuscator
上图为 3 步骤后的混淆代码，我们试着用前述工具来还原。
这是「JS 美化工具」的还原结果，完全不知所云啊~~根本不能运行！
这是「JS NICE」的还原结果，仍然是一团混乱，无法阅读与解析。
五、总结
结论很明确，只要接续使用本篇提到的三种工具，压缩 + 加密 + 混淆，就能有效保护 JS 不被解析与盗用。
文章评论