備忘録

備忘録

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

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

Ⅱ. やり方

1. webpack-obfuscator をインストールする
npm install --save-dev webpack-obfuscator@2.6.0
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,
    })
  ]
}