にょっす速報🐮✋

【世界一わかりやすい解説】webpack-obfuscatorを使ってTypeScriptを難読化をするには？

この記事の目次

  1. 初期化
    ディレクトリと package.json を作成します。
[/Users/horyu]
mkdir nandoku
[/Users/horyu]
cd nandoku
[/Users/horyu/nandoku]
npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nandoku) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: horyu
license: (ISC) WTFPL
About to write to /Users/horyu/nandoku/package.json:

{
  "name": "nandoku",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "horyu",
  "license": "WTFPL"
}


Is this OK? (yes) 
[/Users/horyu/nandoku]
# private: true を追加
cat <<< `jq '.+ {private: true}' < package.json` > package.json
[/Users/horyu/nandoku]
  1. TypeScriptとWebpackのビルド環境を整える
    最新版TypeScript+webpack 5の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA を参考に作ります。
[/Users/horyu/nandoku]
npm i -D webpack webpack-cli typescript ts-loader

added 133 packages, and audited 134 packages in 8s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[/Users/horyu/nandoku]
json
Copy code
{
  "name": "nandoku",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.mjs",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "horyu",
  "license": "WTFPL",
  "private": true,
  "devDependencies": {
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "ES5",
    "module": "ES2015",
    "strict": true,
    "forceConsistentCasingInFileNames": true
  }
}
const resolve = require('path').resolve;

module.exports = {
  mode: "production",
  entry: "./src/index.ts",
  output: {
    path: resolve(__dirname, "dist"),
    library: {
      type: 'module',
    },
  },
  experiments: {
    outputModule: true,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
      },
    ],
  },
  resolve: {
    extensions: [".ts"],
  },
};
  1. 通常のビルドをする
    適当にTSを書きます。
export function fizzbuzz(n: number): number | string {
    if (n % 15 === 0) {
        return 'FizzBuzz';
    } else if (n % 3 === 0) {
        return 'Fizz';
    } else if (n % 5 === 0) {
        return 'Buzz';
    } else {
        return n;
    }
}

import { fizzbuzz } from "./fizzbuzz";

export { fizzbuzz as MyFizzBuzz };

for (let i = 1; i <= 30; i++) {
    console.log(fizzbuzz(i));
}

ビルドします

[/Users/horyu/nandoku]
npx webpack
  1. webpack-obfuscatorを導入
[/Users/horyu/nandoku]
npm i -D javascript-obfuscator webpack-obfuscator
  1. プラグインで難読化
    webpack.config.js に webpack-obfuscator プラグインを追加します。
const resolve = require('path').resolve;
const WebpackObfuscator = require('webpack-obfuscator');
// webpack.config.js

module.exports = {
  // ...  (前のコード)

  plugins: [
    // ... (前のコード)

    // webpack-obfuscator プラグインの設定
    new WebpackObfuscator(
      {
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 0.75,
        deadCodeInjection: true,
        deadCodeInjectionThreshold: 0.4,
        debugProtection: false,
        debugProtectionInterval: false,
        disableConsoleOutput: true,
        identifierNamesGenerator: 'hexadecimal',
        log: false,
        numbersToExpressions: true,
        renameGlobals: false,
        rotateStringArray: true,
        selfDefending: true,
        shuffleStringArray: true,
        simplify: true,
        splitStrings: true,
        splitStringsChunkLength: 5,
        splitStringsMaxLength: 20,
        stringArray: true,
        stringArrayEncoding: 'base64',
        stringArrayIndexShift: true,
        stringArrayWrappersCount: 5,
        stringArrayWrappersChainedCalls: true,
        stringArrayWrappersParametersMaxCount: 5,
        stringArrayWrappersType: 'function',
        unicodeEscapeSequence: false,
      },
      // プラグインを適用する対象のファイル
      ['main.js']
    ),
  ],
};

ここで、webpack-obfuscator プラグインの設定オプションを調整することができます。異なるオプションの組み合わせを試して、プロジェクトに最適な難読化設定を見つけてください。

最後に、ビルドを再実行します。

[/Users/horyu/nandoku]
npx webpack

これで、指定されたファイル（ここではmain.js）が難読化されます。

難読化が正常に行われた場合、dist ディレクトリ内に main.js ファイルが生成され、その中身が難読化されたコードになります。試してみて、うまくいけば難読化が設定されているはずです。

もし何か問題があれば、エラーメッセージやコンソールの出力を確認して、問題を特定しましょう。

);

コメント(0件)

トピックス