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

到uglify log_sum_9.js：

$ grunt log_sum_9

然后我得到了uglified文件：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

我的问题是，uglified文件log_sum_9.min.js没有更改变量的名称：sum，calc，operation（所有这些变量都是局部变量）

如果在以下在线混淆器上引入了文件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 Hexadecimal Escape代码对字符串进行编码/序列。

但是，grunt-contrib-uglify提供了uglify-js，它为mangling名称提供了选项。您可以将mangle和toplevel属性的eval值设置为true。

<强> Gruntfile.js

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

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

注意：在修改名称时，您需要努力确保代码仍然按预期运行。可能是您不想被破坏的某些名称（例如jQuery是非常常见的名称）。 uglify-js文档的摘录如下：

如果启用了修改但你想阻止某些名称被破坏，你可以使用--mangle reserved声明这些名称 - 传递一个以逗号分隔的名称列表......

要在grunt uglify任务中排除某些名称，您可以使用reserved属性提供一个名称数组：

例如

以下配置会破坏除operation和jQuery以外的所有名称：

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

使用grunt-contrib-uglify来修复javascript代码

1 个答案: