压缩顾名思义就是将js文件大小进行缩减。 一般情况下可以去除代码中的 空格
换行
注释
等来实现。文件大小影响下载速度,通过压缩能够提高下载速度。
在压缩情况下可以通过对代码格式来进行还原,基本不会改变代码内容。
与压缩不同,对js脚本进行混淆操作的主要目的是不让其他人员肆无忌惮的获取到自己编写的js代码,保护自己的劳动成果或者不被他人破解等。
混淆常用的操作有变量重命名,增加前缀,使用字符串数组等来进行。
这里使用压缩工具为javascript-obfuscator可以在网站上进行使用,也可以使用npm进行本地安装使用。
另外也有其他js代码混淆工具, 这里不一一说明。
/**
* @author superlin10
*/
const sayContent = {
'hello': 'hello',
'world': 'world'
}
function say(content) {
console.log(content);
return;
}
say(sayContent['hello']);
say(sayContent['world']);
var superLin10a=['\x68\x65\x6c\x6c\x6f','\x77\x6f\x72\x6c\x64','\x6c\x6f\x67'];(function(c,d){var e=function(f){while(--f){c['push'](c['shift']());}};e(++d);}(superLin10a,0x9c));var superLin10b=function(c,d){c=c-0x0;var e=superLin10a[c];return e;};const sayContent={};sayContent['\x68\x65\x6c\x6c\x6f']=superLin10b('0x0');sayContent[superLin10b('0x1')]='\x77\x6f\x72\x6c\x64';function say(c){console[superLin10b('0x2')](c);return;}say(sayContent['\x68\x65\x6c\x6c\x6f']);say(sayContent[superLin10b('0x1')]);
现在我们来分析各个参数的作用
将代码中的字符串转义为Unicode序列在代码中出现\x68
这样的字眼, 这个就是典型的unicode字符,这个可以通过自行做字符转义。 或者直接加上引号变成字符串丢在浏览器的控制台(console)中即可。
这选项对应着压缩。 代码中的 空格
换行
注释
都消失了。这里可以使用代码格式化工具来进行还原。
改变对象的键, 将原本清楚的对象键名进行拆分。 将原有的sayContent
对象拆分成多句。
const sayContent = {};
sayContent['hello'] = superLin10b('0x0');
sayContent[superLin10b('0x1')] = 'world';
这个选项的意思是在代码中插入一段不会影响正常代码运行的死代码。例如这里就出现了
var superLin10a = ['hello', 'world', 'log'];
(function (c, d) {
var e = function (f) {
while (--f) {
c['push'](c['shift']());
}
};
e(++d);
}(superLin10a, 0x9c));
对应标识符名称修改。这里say
方法的参数变为c
, 这就是标识符从content
替换为c
.(这个选项有两个,这里使用的是mangled)
对应着修改变量名的前缀, 在这里我添加了superLin10
这个前缀,所以在代码中的变量会加上他
使用字符串数组, 可以将使用到的对象键名,字符串常量等放置在一个数组中。 这样可以在用到的时候冲数组中进行取值。
例如示例中的 var superLin10a = ['hello', 'world', 'log'];
js代码的压缩混淆能够带来一定的安全性,但是这并不是绝对的。只要有耐心还是能够一步步破解的。 另外混淆还会带来体积增大性能变差等问题,需要对其进行权衡,不能一味的进行混淆。
另外这里只介绍了常用的参数,其他参数可以自己查看下方的说明。如果还觉得不够可以尝试使用混淆的代码再次进行混淆。