丑陋的javascript代码和grunt-cont肋骨-uglify

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、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

格罗特-接触-丑陋 (据我所知)并不提供与您在帖子中链接的在线工具相同的混淆级别--它似乎使用JavaScript十六进制逃逸代码/序列对字符串进行编码。

但是，格罗特-接触-丑陋使用丑js来提供破烂名称的选项。可以将toplevel和eval属性的eval值设置为true。

Gruntfile.js

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

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

注意：当名字乱七八糟时，您需要勤奋地确保您的代码仍然按预期工作。可能有一些您不想被破坏的名称(例如，jQuery是一个非常常见的名称)。uglify-js文档的摘录如下：

当启用mangling但要防止某些名称损坏时，可以使用--mangle reserved声明这些名称-传递逗号分隔的名称列表.

为了避免某些名称在uglify任务中损坏，您可以使用reserved属性提供一个名称数组：

，例如

以下配置破坏了所有名称(不包括operation和jQuery )

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