javascript - 使用 grunt-contrib-uglify 丑化 javascript 代码

Question

我有以下文件:package.json

{
  "name": "uglify",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-uglify": "^3.0.0"
  }
}

还有以下文件:Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        uglify: {
            options: {
                beautify: true,
                mangle: {
                    properties: true
                }
            },
            log_sum_9: {
                src: 'log_sum_9.js',
                dest: 'log_sum_9.min.js'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.registerTask('log_sum_9', ['uglify:log_sum_9']);
}

还有以下文件:log_sum_9.js

(function() {
    var
        sum = "2+3+4",
        calc = function(operation) {
            return eval(operation);
        }
    ;
    console.log(calc(sum));
})();

然后我做:

安装所需的 NodeJS 模块:

$ npm install

丑化 log_sum_9.js:

$ grunt log_sum_9

然后我得到丑化后的文件:log_sum_9.min.js:

!function() {
    var sum = "2+3+4", calc = function(operation) {
        return eval(operation);
    };
    console.log(calc("2+3+4"));
}();

两个脚本都能正常工作:

$ node log_sum_9.js
9

$ node log_sum_9.min.js
9

我的问题是丑化文件 log_sum_9.min.js 没有改变变量的名称:sum, calc, 操作(所有这些变量都是局部变量)。

如果文件 log_sum_9.js 的内容被引入以下在线混淆器:https://www.javascriptobfuscator.com/Javascript-Obfuscator.aspx

然后得到如下代码:

var _0x257f = ["\x32\x2B\x33\x2B\x34", "\x6C\x6F\x67"];
(function() {
    var _0xb897x1 = _0x257f[0],
        _0xb897x2 = function(_0xb897x3) {
            return eval(_0xb897x3)
        };
    console[_0x257f[1]](_0xb897x2(_0xb897x1))
})()

您可以看到前面的 3 个变量:sum、calc、operation 已更改名称。

如果你把上面的代码放到文件:log_sum_9.online.js，那么你可以:

$ node log_sum_9.online.js
9

(它也能正常工作)

我的问题是:

我如何配置文件:Gruntfile.js 来混淆前 3 个变量？

Answer 1

grunt-contrib-uglify ，(据我所知)不提供与您在帖子中链接到的在线工具相同级别的混淆 - 它似乎使用 JavaScript 十六进制转义代码/序列对字符串进行编码。

然而，grunt-contrib-uglify利用 uglify-js为 mangling 提供选项名字。您可以将 toplevel 和 eval 属性的 mangle 值设置为 true。

Gruntfile.js

uglify 任务中的options 可以设置如下:

// ...
options: {
    beautify: true,
    mangle: {
        properties: true,
        toplevel: true, // <-- Add this
        eval: true  // <-- Add this
    }
},
// ...

注意:在修改名称时，您需要努力确保您的代码仍能按预期运行。 可能有一些您不想被破坏的名称(例如，jQuery 是一个很常见的名称)。 uglify-js 文档的摘录如下:

When mangling is enabled but you want to prevent certain names from being mangled, you can declare those names with --mangle reserved — pass a comma-separated list of names...

要排除某些名称在你的 grunt uglify 任务中被破坏，你可以使用 reserved 属性提供一个名称数组:

例如

以下配置破坏了除operation 和jQuery 之外的所有名称:

// ...
options: {
    beautify: true,
    mangle: {
        properties: true,
        toplevel: true,
        eval: true,
        reserved: ['operation', 'jQuery'] // Exclude mangling specific names.
    }
},
// ...