React Nativeセキュリティ入門

Reactを使うと、インタラクティブなユーザーインターフェースを簡単かつ直感的に構築できます。コンポーネントと呼ばれる小さく独立したコード単位を組み合わせて、複雑なアプリケーションを開発できます。React NativeはReactを拡張したもので、JavaScriptなどのWeb技術で使われる手法とReactを組み合わせ、クロスプラットフォームのモバイルアプリを構築できます。

これにより、開発者は一度コードを書くだけで複数のプラットフォームに対応でき、開発期間を短縮できます。React Nativeは仮想DOMを使用して、Android、Android TV、iOS、macOS、tvOS、Web、Windows、UWPを搭載したデバイス上でアプリケーションのコンポーネントとコードを実行します。

モバイル技術がかつてない速さで成長・進化している今、Reactが広く採用されているのは喜ばしいことです。2025年までに、世界のモバイルユーザー数は74億9,000万人に達すると予測されています。モバイルアプリは今や至るところにあり、ユーザーデータの共有、取り扱い、保護において、ますます高度化しています。

ユーザー向けアプリケーションを開発する開発者には、アプリのユーザー情報を保護し、その他の機密性の高いサーバー情報も安全に保つ責任があります。そのため、すべてのユーザーが許可された情報にのみアクセスできるようにし、データベースに保存されたユーザー情報を安全に保つ必要があります。

エンドユーザーの情報を保護するには、秘密鍵やデータベース情報、機密ファイル、バックエンドの構造や処理を示すページの一部などをアプリから露出させないことが不可欠です。そこで、モバイルアプリの開発時にReact Nativeの開発者が直面する、データの安全な転送、認証プロトコル、依存関係の脆弱性などのセキュリティ課題を見ていきましょう。それぞれの課題への対処方法も解説します。

データを安全に転送する

リモートサーバーからデータを取得しないモバイルアプリを考えるのは難しいでしょう。React Nativeでは、デフォルトでAPI呼び出しとデータ転送にHTTPSのみを使用します。

このデフォルト設定を上書きする方法はありますが、HTTPS以外のプロトコルを使用すると、アプリストアへの公開時にベンダーとの問題が生じます。さらに深刻なのは、さまざまな形のデータ侵害にモバイルアプリがさらされる可能性があることです。

モバイルアプリ内でリモートホストの信頼できる証明書を手動でピン留めすると、中間者（MITM）攻撃を防ぎ、アプリのセキュリティを強化できます。React Nativeで使えるオープンソースの証明書ピンニングライブラリには、MaxToybermanのreact-native-ssl-pinningやApproovのreact-native-cert-pinnerなどがあります。

React Native SSL pinningライブラリを使ったピンニング

React Native SSL pinningは、証明書を.cerファイルに変換します。画像ファイルやカスタムフォントと同じように、モバイルアプリのバンドルにアセットとして追加できます。

このツールはfetchの代わりに使える機能を提供しており、HTTPリクエストの送信に利用できます。

証明書をピン留めするには、次のコードを使用します。

1import { fetch } from 'react-native-ssl-pinning'
2
3const response = await fetch(url, {
4  method: 'POST',
5  body: body,
6  timeoutInterval: milliseconds,
7  headers: {
8    Accept: "application/json; charset=utf-8",
9  },
10  sslPinning: {
11    certs: ["cert1", "cert2"] // your certificates name (without extension), e.g. cert1.cer
12  }
13})

公開鍵をピン留めするには、次のコードを使用します。

1import { fetch } from 'react-native-ssl-pinning'
2
3const response = await fetch(url, {
4  method: 'POST',
5  body: body,
6  timeoutInterval: milliseconds,
7  headers: {
8    Accept: "application/json; charset=utf-8",
9  },
10  pkPinning: true,
11  sslPinning: {
12    certs: ["sha256//r8udi/Ymw34stt44fZybMWq8YnFnIWXCqeHsTDRqy8=",
13        "sha256/QShfdvfff6fja30RrAn7JKnbQG/uEtLMkBgFF2Fuihg=",        
14      ] // public keys
15  }
16})

このライブラリは、内部で2つのネイティブモジュールを使用します。iOSではAFNetworking、Androidではokhttp3です。AFNetworkingモジュールは、アセット内の.cerファイルを自動的に使用します。OkHttp3では、JavaScriptのsslPinningプロパティを使って.cerファイルを指定します。

react-native-cert-pinnerを使ったピンニング

react-native-cert-pinnerも、モバイルアプリで証明書をピン留めできるライブラリです。ピンには、証明書の公開鍵のBase64 SHA256ハッシュ、または証明書のBase64 SHA1ハッシュを使用できます。

このライブラリにはpinsetというユーティリティがあり、iOS用のinfo.plistファイル、またはAndroid用のGeneratedCertificatePinner.javaファイルを生成します。その後、ネイティブコードがこのファイルを参照します。

このライブラリは、内部でiOSではTrustKit、Androidではokhttp3を使用します。

react-native-cert-pinnerでピンニングするには、まず次のコマンドで初期設定を生成します。

1$ npx pinset init

初期化したら、ピン留めするURLと、それぞれの証明書の公開鍵ハッシュを確認します。

次に、対象ドメインの公開鍵ハッシュをpinset.jsonファイルに入力します。

1{
2  "domains": {
3    "*.yourdomainhere.com": {
4      "pins": [
5        "sha256/0000000000000000000000000000000000000000000",
6        "sha256/1111111111111111111111111111111111111111111"
7      ]
8    },
9   // other domains
10  }

注: アスタリスク（*）で始まるドメインは、すべてのサブドメインを含みます。

次のコマンドを実行して、ネイティブプロジェクトのソースを生成します。

1$ npx pinset gen

この操作により、次のファイルが生成されます。

1Reading config file './pinset.json'.
2Updating java file './android/app/src/main/java/com/snyk/reactnative/GeneratedCertificatePinner.java'.
3Updating plist file './ios/example/info.plist'.

証明書自体から作成したピンは証明書の有効期限が切れると機能しなくなるため、証明書の公開鍵をピン留めできるライブラリの使用をおすすめします。このセクションで紹介したライブラリは、どちらも公開鍵のピンニングに対応しています。

一般に、リモートホストの身元を確実に確認したい場合に限り、モバイルアプリで証明書をピン留めするのがベストプラクティスです。

認証プロトコル

認証は、ネットワークリクエストを送信したユーザーやシステムを特定することで信頼を確立します。この特定により、サーバーはユーザーに特定のリソースへのアクセスを許可するかどうかを判断できます。

ほとんどのモバイルアプリでは、ユーザーごとにカスタマイズされたデータを何らかの形で表示する必要があります。FacebookアプリのプロフィールやWhatsAppの連絡先リストを考えてみてください。認証システムは、サーバーがユーザーを特定し、これらのアプリで対応するデータを配信できるようにします。

React Nativeでユーザー認証を設定する一般的な方法は、画面を複数のグループに分けることです。開発者は通常、Stack Navigatorのようなルーターライブラリを使ってこれを実現します。

一方のグループでは、未認証のユーザーが利用する画面を管理します。ログイン、登録、パスワードリセットなどの画面が含まれます。アプリはこれらの画面を使ってユーザーを認証します。

もう一方のグループは、認証済みユーザー向けです。このスタックには、ダッシュボード、設定、アカウント、フィードなど、ユーザーコンテンツに関連する画面が含まれます。

このサンプルコードでは、画面を2つのグループに分けています。認証済みユーザー向けのAppStackと、未認証ユーザー向けのAuthStackです。

1import {createStackNavigator} from '@react-navigation/stack';
2const Stack = createStackNavigator();
3
4const AppStack = () => {
5  return (
6    <Stack.Navigator>
7      <Stack.Screen name="Home Screen" component={HomeScreen} />
8      <Stack.Screen name="Notification Screen" component={NotificationsScreen} />
9      <Stack.Screen name="Profile Screen" component={ProfileScreen} />
10      <Stack.Screen name="Setting Screen" component={SettingsScreen} />
11    </Stack.Navigator>
12  );
13};
14
15const AuthStack = () => {
16  return (
17    <Stack.Navigator>
18      <Stack.Screen name="Sign In Screen" component={SignInScreen} />
19      <Stack.Screen name="Register Screen" component={RegisterScreen} />
20      <Stack.Screen name="Reset Password Screen" component={ResetPasScreen} />
21    </Stack.Navigator>
22  );
23};

両方の画面グループを作成したら、ユーザーの認証状態に応じて表示するスタックを選択するRouterコンポーネントを作成します。

次に、両方のスタックをNavigationContainer内で使用します。react-navigationのコンポーネントが、React Nativeのすべてのルートナビゲーションをラップします。

1import {NavigationContainer} from '@react-navigation/native';
2
3import {AppStack} from './AppStack';
4import {AuthStack} from './AuthStack';
5
6export const Router = () => {
7  return (
8    <NavigationContainer>
9      {authData ? <AppStack /> : <AuthStack />}
10    </NavigationContainer>
11  );
12};

authDataは、認証画面（たとえばSignInScreen）でユーザーが入力するデータを表します。このコードでユーザーを認証します。

1import React, {createContext, useState, useContext} from 'react';
2import {AuthData, authService} from '../services/authService';
3
4const AuthContext = createContext<AuthContextData>({} as AuthContextData);
5
6const AuthProvider: React.FC = ({children}) => {
7  const [authData, setAuthData] = useState<AuthData>();
8
9  const [loading, setLoading] = useState(true);
10
11  const signIn = async () => {
12    const _authData = await authService.signIn(
13      'test@email.com',
14      '12345678',
15    );
16
17    setAuthData(_authData);
18  };
19
20  const signOut = async () => {
21    setAuthData(undefined);
22  };
23
24  return (
25    <AuthContext.Provider value={{authData, loading, signIn, signOut}}>
26      {children}
27    </AuthContext.Provider>
28  );
29};

signIn関数はAPIに接続し、レスポンスに基づいてauthDataを更新します。APIから取得したユーザープロフィールデータをここに保存できます。signOut関数はデータを消去します。場合によっては、APIに接続してトークンを無効化することもあります。

認証処理は非同期で、完了まで時間がかかるため、ローディング状態が必要です。この状態を監視し、サーバーがリクエストを処理している間、アプリのユーザーインターフェース（UI）に読み込みアニメーションを表示できます。

最後に、AuthContext.Providerでラップし、すべてのコンポーネントがContextにアクセスできるようにします。

OAuth 2.0プロトコル

React Nativeのモバイルアプリでは、ユーザー認証にOAuth 2.0プロトコルがよく使われます。OAuthは高度なセキュリティを備えているため、Webアプリやモバイルアプリで広く選ばれています。

OAuthフローに登場する4つの役割は次のとおりです。

• リソースオーナー: リソースサーバー内のデータを所有します。たとえば、Facebookユーザーは自身のFacebookプロフィールデータのリソースオーナーです。

• クライアントアプリ: データへのアクセスを求めるアプリケーション（例: Facebookのモバイルアプリ）

• リソースサーバー: モバイルアプリケーションがアクセスするデータを保存するAPI（例: Facebook API）

• 認可サーバー: OAuthの中心的なエンジン

OAuthでは、Google、Facebook、GitHubなどのサードパーティサービスを介してユーザーに認証を求めます。認証が完了すると、サードパーティサービスは検証コードとともにユーザーをアプリケーションへリダイレクトします。アプリケーションは、この検証コードをJSON Web Token（JWT）やその他のトークンと交換できます。

Webアプリでは、URLがWeb上で一意であることが保証されるため、こうしたリダイレクトは安全です。一方、モバイルアプリには、URLスキームを一元的に登録する方法がありません。

このセキュリティ上の懸念に対処するには、OAuth 2.0仕様の拡張機能であるPKCE（「ピクシー」と発音）によるチェックを追加する必要があります。PKCEはSHA 256暗号化ハッシュアルゴリズムを使い、認証リクエストとトークン交換リクエストが同じクライアントから送信されたことを検証します。

この方法により、認可フローを開始したアプリケーションだけが、検証コードをJWTと正常に交換できるようになります。

React NativeでネイティブOAuthを安全に実装する簡単な方法は、react-native-app-authのようなパッケージを使うことです。これは、OAuth 2.0およびOpenID Connectプロバイダーと通信するiOS向けAppAuth SDKとAndroid向けAppAuth SDKへのReact Nativeブリッジとして機能します。

このパッケージはPKCEに対応し、Google、Okta、GitHub、Coinbase、FusionAuthなど、さまざまなOpenIDおよびOAuth 2.0プロバイダーをサポートしています。

依存関係の脆弱性をスキャンする

開発者がReact Nativeだけで完全なネイティブアプリケーションを構築することはありません。課題を解決し、生産性を高めるために、サードパーティ製のツールをよく利用します。

アプリケーションには、完成度と機能性を高める複数のサードパーティ依存関係が含まれています。問題は、自分たちのコードが安全であっても、こうした依存関係によってアプリケーションに脆弱性が持ち込まれる可能性があることです。

Snykを使ってオープンソースパッケージの脆弱性をスキャンする方法はいくつかあります。人気のオープンソースReact NativeアートアプリEigenを例に見てみましょう。

まず、CLIツールをインストールし、Snykの無料アカウントに登録して、Snyk CLIでスキャンする方法があります。登録とインストールが完了したら、snyk authを実行してCLIをアカウントに接続します。

リポジトリを開発環境にクローンし、クローンしたプロジェクトのルートディレクトリでsnyk testを実行します。ルートにあるパッケージマニフェストをスキャンし、パッケージのバージョンに問題がないか確認します。

ヒント: snyk monitorも実行すると、初回スキャン後にプロジェクト内で検出された問題についても通知を受け取れます。

この例では、react-nativeアプリのパッケージマニフェストから、いくつかの潜在的な問題が検出されました。検出された脆弱性を詳しく調べ、詳細情報を確認できるのも便利な点です。

一覧にあるHermes-engine 0.5.1には、クロスサイトスクリプティング（XSS）を引き起こす既知の脆弱性があります。この脆弱性に対処済みの0.7.2より新しいバージョンにアップグレードすれば、リスクを軽減できます。

React Nativeプロジェクトをスキャンするもう1つの方法は、Snykアカウントを利用するリポジトリに接続し、リポジトリを直接スキャンすることです。複数の貢献者がいるプロジェクトでも、コミットやマージのたびにチェックする継続的なスキャンで問題を検出できるのが利点です。

リポジトリを接続するには、Snykアカウントに登録します。次に、Snykダッシュボードでコードを保存しているリポジトリプラットフォームをクリックします。使用するプラットフォームがクイックメニューにない場合は、その他をクリックし、Snykのインテグレーションから検索します。

接続手順に沿って進みます。リポジトリの接続ページで、スキャンするリポジトリを選択します。

選択したリポジトリを追加ボタンをクリックし、スキャンの完了を待ちます。スキャン対象と検出結果を確認できるのが便利です。

Snyk CLIによるスキャンと同様に、検出された脆弱性の詳細を確認し、リポジトリに自動修正を適用できます。

アプリの開発中に依存関係を自動でスキャンして脆弱性を検出できるよう、好みのコードエディターにSnykを統合することもできます。たとえば、Visual Studio Code用Snyk拡張機能は、パッケージマニフェストだけでなく、そのパッケージがコード内で呼び出されている箇所も含めて、潜在的な脆弱性を特定します。

まとめ

モバイルアプリで扱うデータが高度化するにつれ、ユーザー情報を適切に保護し、エンドユーザーを守ることがこれまで以上に重要になっています。Webアプリケーションと同様に、React Nativeアプリも、安全なデータ転送、認証プロトコル、依存関係の脆弱性など、同じ種類のセキュリティ課題に直面します。

Reactアプリケーションのセキュリティ問題を見つけて修正するために、チームで活用できるReactのセキュリティに関するベストプラクティスのチェックリストをご覧ください。

Kingsley Ubah は、経験豊富なフルスタックWeb開発者であり、テクニカルライターです。