ENGLISH

React Native アプリを作成した場合、難読化することを忘れないでください。

 

React は、Facebook とコミュニティによって開発されたユーザインタフェース構築のためのJavaScript ライブラリで、React をベースとしたモバイルアプリケーションフレームワークとして React Native が利用されています。

 

npm trends によると、フロントエンドフレームワークの分野では、React が圧倒的に人気を誇っています。React に慣れている Web エンジニアであれば、ほとんど学習コストを掛けずにモバイルアプリが作成できるため、モバイル分野でも人気のあるフレームワークの 1 つです。

 

今回は、React Native のセキュリティ面での危険性と、難読化ツール「JSDefender」を React Native のビルドプロセスに統合し、アプリを保護する方法を説明します。

React Native アプリの逆コンパイル(デコンパイル)は可能か?

モバイルのネイティブアプリが、逆コンパイル可能という話はご存じだと思います。逆コンパイル +android +iOS などで検索すれば、仕組みや手法が分かるはずです。

 

しかし、React Native の場合はどうでしょうか。結論から言うと、 React Native はビルド時にコンパイルされておらず、実行ファイル内に JavaScript のファイルが存在しています。つまり、セキュリティの観点では、ネイティブの JavaScript アプリと同様の扱いをしなければいけません。変数などに機密データがある場合、それを保護しないと悪用されてしまう危険性があります。

React Native を難読化する方法

React Native アプリを難読化するには、以下のステップを踏みます。

  1. React Native アプリケーションの作成
  2. 難読化パッケージのインストール
  3. JSDefender の構成ファイルの作成
  4. ビルドプロセスへの統合
  5. ビルドコマンドの実行

1. React Native アプリケーションの作成

React Nativeを 使用してモバイルアプリを作成するには、Expo を使用する方法と React Native CLI を使用する方法があります。JSDefender を React Native のビルドプロセスに統合するには、React Native CLI を使用する必要があります。サポートされるバージョンとバンドルの形式は、以下になります。

  • React Native のバージョン:0.59.0 以降
  • バンドルの形式:プレーン バンドル

ただし、Expo を使用している場合でも、プロジェクトをイジェクトすることで JSDefender を統合することができます。ここでは Expo については説明しませんが、JSDefender の導入を検討されている場合は、お問い合わせフォームよりご連絡ください。

2. 難読化パッケージのインストール

JSDefender のパッケージは、npm に公開されていませんので、個別にダウンロードいただく必要があります。ダウンロードが終わりましたら、パッケージ マネージャーを使ってインストールを行います。

 

ここでは、現時点での最新版 2.3.0 を利用します。React Native を難読化するためには、core パッケージに加えて、metro パッケージが必要になります。

npm install <パッケージのディレクトリ>/preemptive-jsdefender-core-2.3.0.tgz –save-dev
npm install <パッケージのディレクトリ>/preemptive-jsdefender-metro-plugin-2.3.0.tgz –save-dev
 

Yarn の場合は以下になります。

yarn add <パッケージのディレクトリ>/preemptive-jsdefender-core-2.3.0.tgz –save-dev
yarn add <パッケージのディレクトリ>/preemptive-jsdefender-metro-plugin-2.3.0.tgz –save-dev

3. JSDefender の構成ファイルの作成

JSDefender の全ての変換構成は、jsdefender.config.json という単一のファイル内に記述します。React Native プロジェクトのルートフォルダーに、jsdefender.config.json という名前の新しいファイルを作成します。

構成ファイルの記述方法は、以下のマニュアルを参照ください。

https://www.preemptive.com/jsdefender/userguide/ja/cli_config.html

 

例として、jsdefender.config.json ファイルは次のようになります。

{
  "settings": {
    "booleanLiterals": {
      "randomize": true
    },
    "controlFlow": {
      "randomize": true
    },
    "exprSequence": true,
    "functionReorder": {
      "randomize": true
    },
    "integerLiterals": {
      "randomize": true,
      "radix": "octal",
      "lower": 0,
      "upper": 65535
    },
    "localDeclarations": {
      "nameMangling": "base52"
    },
    "propertyIndirection": true,
    "selfDefending": true,
    "stringLiterals": true,
    "propertySparsing": true
  }
}

4. ビルドプロセスへの統合

React Native は Metro と呼ばれる独自のバンドラーを使用するため、JSDefender の React Native 統合は Metro プラグインを介して行われます。プロジェクトのルートフォルダーに metro.config.js ファイルを作成します。次に、ファイルに以下のコードを追加します。

const jsdefenderMetroPlugin = require("@preemptive/jsdefender-metro-plugin")(
  // –JSDefender configuration
  {
    configurationFile: "jsdefender.config.json",
    quietMode: false,
    protectUserModulesOnly: false,
    enableInDevelopmentMode: false,

  },
  // –Metro configuration
  {
    resolver: {
      /* resolver Metro options */
  },
    transformer: {
      /* transformer Metro options */
  },
    serializer: {
      /* serializer Metro options */
  },
    server: {
      /* server Metro options */
    }
    /* general Metro options */
  }
)

module.exports = jsdefenderMetroPlugin;
 

各プロパティの説明は省略しますが、ほとんどのケースにおいてこの設定で問題ありません。
これで、アプリを保護できるようにするための統合が完了しました。

5. ビルドコマンドの実行

JSDefender Metro プラグインは Metro バンドラーサーバーでは機能しません。
以下のコマンドは、Metro バンドラーサーバーを使用しないため、機能します。

npx react-native run-android –variant=release – Android エミュレーターまたはデバイスで実行する
npx react-native run-ios –configuration Release – iOS エミュレーターまたはデバイスで実行する
 

難読化が始まると、以下のようなログが出力されます。

[Info] JSDefender Metro Plugin: Preemptive Protection JSDefender(TM) (v2.3.0)
Copyright 2019-2021 PreEmptive Solutions, LLC. All Rights Reserved
Use of this software constitutes acceptance of the accompanying license agreement.
Info: Licensed to: xxxx@agtech.co.jp
Floating Build License: ############################6C6E
This software may be used on binaries for general release.Concurrent Build Limit: 2
Info: JSDefender is up to date.
Info: Source tree building in progress…
Info: Source tree successfully built.
Info: Total length: 690031
Info: #of scripts: 1
Info: #of syntax nodes: 198953
Info: Highest ES version: ES2015
Info: Debugger removal transformation applied.
Info: Domain lock transformation applied.
Info: Date lock transformation applied.

[Info] JSDefender Metro Plugin: The bundle is protected successfully.
[Info] JSDefender Metro Plugin: Execution time: 27s 154ms
 

これで、保護されたアプリが生成されました。

まとめ

JSDefender Metro プラグインを使用すると、簡単に React Native ビルドプロセスに統合できます。React Native アプリの保護を検討されている方は、お問い合わせフォームよりご連絡ください。

 

また、評価版のご利用を希望されるお客様は、以下の URL よりお申し込みください。
https://www.agtech.co.jp/preemptive/jsdefender/trial/

一覧に戻る

Contactお問い合わせ

お気軽にお問い合わせください。

お問い合わせ

    必須会社名

    個人のお客様は「個人」と入力してください。

    必須お名前
    必須メールアドレス
    必須メールアドレス(確認)
    必須ライセンス ありなし
    ダウンロード目的