如何在 Ember 中混淆 Javascript？ ember-cli 插件

如何解决如何在 Ember 中混淆 Javascript？ ember-cli 插件

有谁知道如何在 Ember 中使用 javascript-obfuscator（或类似的）？

我想它需要在 ember-cli-build.js 内部调用，但我不知道在哪里以及如何调用。

在此先感谢您的帮助:)

解决方法

我不认为对此有一个非常直接的答案。如果您在 embroider 上运行，那么您的所有 Javascript 都将由 webpack 处理，因此您可以尝试使用 webpack-obfuscator -- 在您的 ember-cli-build.js 中类似

return require('@embroider/compat').compatBuild(app,Webpack,{
  plugins: [
    new WebpackObfuscator(/*whatever args*/)
  ],rules: [
    {
      test: /\.js$/,enforce: 'post',use: { 
        loader: WebpackObfuscator.loader,}
    }
  ]
});

我知道的其他选择是编写一个西兰花插件。您所做的类似于 ember-cli-terser 所做的 - 在它们连接在一起之前对 Javascript 文件进行后处理 - 因此您可以将其用作参考。

您需要编写一个实际执行转换的花椰菜插件（模拟为 broccoli-terser-sourcemap）和一个 Ember 插件以将其挂接到 ember-cli 的构建管道中（模拟为 ember-cli-terser }}).

西兰花插件

看看 broccoli-terser-sourcemap 的 index.js，它只有 114 行代码，我认为你可以把它改成这样：

module.exports = class TerserWriter extends Plugin {
  constructor(_inputNodes,options = {}) {
    let inputNodes = Array.isArray(_inputNodes) ? _inputNodes : [_inputNodes];

    super(inputNodes,{
      name: options.name,annotation: options.annotation,needsCache: false,});

    this.options = defaults(options,{
      obfuscator: {},});

    let exclude = this.options.exclude;
    if (Array.isArray(exclude)) {
      this.excludes = new MatcherCollection(exclude);
    } else {
      this.excludes = MatchNothing;
    }
  }

  async build() {
    let pendingWork = [];

    this.inputPaths.forEach(inputPath => {
      walkSync(inputPath).forEach(relativePath => {
        if (relativePath.slice(-1) === '/') {
          return;
        }
        let inFile = path.join(inputPath,relativePath);
        let outFile = path.join(this.outputPath,relativePath);

        fs.mkdirSync(path.dirname(outFile),{ recursive: true });

        if (this._isJSExt(relativePath) && !this.excludes.match(relativePath)) {
          pendingWork.push(() => this.processFile(inFile,outFile,relativePath,this.outputPath));
        } else {
          symlinkOrCopy.sync(inFile,outFile);
        }
      });
    });

    for (let fn of pendingWork) {
      await fn();
    }
  }

  _isJSExt(relativePath) {
    return relativePath.slice(-3) === '.js' || relativePath.slice(-4) === '.mjs';
  }

  async processFile(inFile,outDir) {
    let input = await readFile(inFile).toString();
    let result = obfuscate(input,this.options.obfuscator);
    await writeFile(outFile,result.getObfuscatedCode());
  }
};

您也可以将 broccoli-terser-sourcemaps 所做的工作池化，如果您关心源映射，您也需要处理它们，但是 broccoli-terser-sourcemaps 就是这样做的，因此您可以使用作为参考。

ember-cli 插件

ember-cli-terser 的代码更少——看看它的 index.js，你可以把它改成类似

'use strict';

module.exports = {
  name: require('./package').name,included(app) {
    this._super.included.apply(this,arguments);

    let defaultOptions = {
      enabled: app.env === 'production',obfuscator: {
        // default `javascript-obfuscator` options
      },};

    let addonOptions = app.options['ember-cli-obfuscator'];

    this._obfuscatorOptions = Object.assign({},defaultOptions,addonOptions);
  },postprocessTree(type,tree) {
    if (this._obfuscatorOptions.enabled === true && type === 'all') {
      // Import the plugin code above
      const Obfuscator = require('./broccoli-obfuscator');

      return new Obfuscator(tree,this._obfuscatorOptions);
    } else {
      return tree;
    }
  }
};

然后你必须在你的应用程序中安装上述插件（它可能是一个 in-repo 插件），它应该做它的事情！

这肯定需要一些操作，但是您所做的与 ember-cli-terser 所做的非常相似，只是使用 obfuscator API 而不是 terser API，以至于您有一个非常好的起点。

但是，如果 embroider 是您的选择，我肯定会先尝试该路线，因为这可能只是配置问题，而不是编写一堆代码。