Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

このエントリは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 現在 

re-fort
多部未華子をスカウトした人は本当に才能があると思う
https://re-fort.net/
freee
スモールビジネスのバックオフィス業務をテクノロジーで自動化し、日本のスモールビジネスを元気にする
http://www.freee.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした