41
50

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ElectronAdvent Calendar 2016

Day 6

Electronと秘匿化・難読化・整合性チェック

Last updated at Posted at 2016-12-05

このエントリはElectron Advent Calendar 2016 - Qiitaの6日目です。

はじめに

Electronでアプリケーションを作成する場合、コードを見せたくないといったことがあると思います。
そこで、どのようなアプローチがあるのか調べてみました。
(間違っている点、足りない点はフォローいただけると助かります。)

秘匿化

Electronのissueでは下記で話題に挙がっています。

なんとなくまとめると、

  • Electron公式ではソースコードの秘匿化をする機能はない。
    今のところやるつもりもない。
    (提供されているasarはパフォーマンス向上のためのツール)
  • ソースコードの秘匿化がしたいなら、NW.jsに移行したほうがいいかも。
  • EncloseJSも同じことが出来るけど、商用ソフトに使う場合は料金が発生する。

難読化

次に難読化を考えてみます。
ここから先は、Electronというよりは、JavaScriptコードの難読化の話となります。

electron-vueを題材に難読化を試していきます。

webpack

まずはwebpackから。
基本のuglifyを行います。

webpack.config.babel.js
const webpack = require('webpack')

let config = {
  entry: {
    build: path.join(__dirname, 'app/src/main.js')
  }
}

if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  )
}

これでビルドをすると、
Screen Shot 2016-12-05 at 02.30.05.png
こんな感じのファイルが出力され、アプリも問題なく起動します。

Screen Shot 2016-12-05 at 02.21.39.png

webpack-obfuscator

まだまだ心許ないので、もう少し難読化をしてみましょう。
webpackプラグインのwebpack-obfuscatorを使用します。

webpack.config.babel.js
const webpack = require('webpack')
const WebpackObfuscator = require('webpack-obfuscator')

let config = {
  entry: {
    build: path.join(__dirname, 'app/src/main.js')
  }
}

if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new WebpackObfuscator ({
      rotateUnicodeArray: true,
    })
  )
}

これでビルドをすると、
Screen Shot 2016-12-05 at 02.38.08.png

こんな感じのファイルが出力され、アプリもこれまた問題なく起動します:blush:

Screen Shot 2016-12-05 at 02.37.50.png

今回はベンダーJSもまとめて難読化しちゃってますが、
ビルド・実行速度の観点からもベンダーJSはエントリーを分けて、
アプリケーションJSのみ難読化することをオススメします。

webpack.config.babel.js
new WebpackObfuscator ({
  rotateUnicodeArray: true,
}, ['vendor.js'])

こんな感じでvendor.jsのみwebpack-obfuscatorの難読化対象から外すことができます。

詳細なドキュメントは、

あたりを参照してください。

Gulp版もあるみたいなので、Gulpを使ってる人はそちらをお試しください。

整合性チェック

MacOS限定ですが、electron-builderの作者によって、こんなPRが出てました。
まだマージはされていません。1

  1. 2017/08/17 現在

41
50
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41
50

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?