Laravel MixのJavaScriptを難読化する方法

w* Ⅰ. はじめに
タイトルの通り「Laravel MixのJavaScriptを難読化する方法」です。
javascript-obfuscator の webpackプラグインである webpack-obfuscator を利用した方法をこの記事で紹介します。

â…¡. ã‚„ã‚Šæ–¹

1. webpack-obfuscator をインストールする

npm install --save-dev [email protected]

2. webpack.mix.js を編集する

let mix = require('laravel-mix')

// 以下を追加
let JavaScriptObfuscator = require('webpack-obfuscator')

let config = {}

if (mix.inProduction()) {
  config.plugins = [
    new JavaScriptObfuscator({
      stringArray: true,
      stringArrayEncoding: [ 'rc4' ],
      stringArrayThreshold: 1,
      transformObjectKeys: true,
      // debugProtection: true,
      // domainLock: [ '.example.com' ],
      // renameProperties: true // プロパティ名を変更する。利用は留意する必要がある
    })
  ]
}

mix.webpackConfig(config)
// ここまで

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css').version()

3. ビルドする

npm run production

実行結果

Ⅲ. やり方2（uglify を無効にして難読化する方法）

webpack.mix.js

if (mix.inProduction()) {
  mix.options({
    uglify: false
  })

  config.plugins = [
    new JavaScriptObfuscator({
      rotateUnicodeArray: true,
      compact: true,
    })
  ]
}

参考

https://github.com/javascript-obfuscator/javascript-obfuscator
https://github.com/javascript-obfuscator/webpack-obfuscator