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 アプリケーションの作成
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/