Flutter iOS アプリの HTTPS 通信をキャプチャする方法

1. Flutter とネットワーク通信

Flutter は Google が提供する人気のフレームワークで、1 つのコードベースから iOS、Android などのプラットフォーム向けのアプリを開発できます。

Flutter でアプリを開発する際は、サーバーからデータを取得したり、サーバーへデータを送信したりするために、ネットワーク通信を行う場面が多くあります。しかし、こうした通信は失敗したり、期待どおりに動かなかったりすることがあります。アプリとサーバーの間で実際に送受信されている HTTP/HTTPS 通信を確認できると、開発中の問題を見つけて修正する際に大いに役立ちます。

2. Proxyman で Flutter iOS アプリの HTTPS 通信をキャプチャする方法

2.1 Flutter に HTTP プロキシの設定を追加

初期状態では、Flutter は HTTP プロキシの設定を使用しません。Flutter プロジェクトに HTTP プロキシの設定を手動で追加する必要があります。

設定方法は、Flutter プロジェクトで使用している HTTP ネットワークライブラリによって異なります。この例では http パッケージを使用します。

Android を使用する場合は、<YOUR_LOCAL_IP> をお使いのコンピュータの外部 IP アドレスに置き換えてください。IP アドレスは Proxyman の Tools メニュー → Install for iOS → Physical Device で確認できます。

Proxyman の Install for iOS

`http` パッケージ

// Make sure to replace <YOUR_LOCAL_IP> with 
// the external IP of your computer if you're using Android. 
// You can get the IP in the Android Setup Guide window
String proxy = Platform.isAndroid ? '<YOUR_LOCAL_IP>:9090' : 'localhost:9090';

// Create a new HttpClient instance.
HttpClient httpClient = new HttpClient();

// Hook into the findProxy callback to set
// the client's proxy.
httpClient.findProxy = (uri) {
  return "PROXY $proxy;";
};

// This is a workaround to allow Proxyman to receive
// SSL payloads when your app is running on Android.
httpClient.badCertificateCallback = 
  ((X509Certificate cert, String host, int port) => true);

// Pass your newly instantiated HttpClient to http.IOClient.
IOClient myClient = IOClient(httpClient);

// Make your request as normal.
var response = myClient.get('/my-url');

Dio ライブラリ

// Make sure to replace <YOUR_LOCAL_IP> with 
// the external IP of your computer if you're using Android. 
// You can get the IP in the Android Setup Guide window
String proxy = Platform.isAndroid ? '<YOUR_LOCAL_IP>:9090' : 'localhost:9090';

// Create a new Dio instance.
Dio dio = Dio();

// Tap into the onHttpClientCreate callback
// to configure the proxy just as we did earlier.
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) { 
  // Hook into the findProxy callback to set the client's proxy.
  client.findProxy = (url) {
    return 'PROXY $proxy'?;
  };
  
  // This is a workaround to allow Proxyman to receive
  // SSL payloads when your app is running on Android.
  client.badCertificateCallback = (X509Certificate cert, String host, int port) => true;
}

Dart の HTTP パッケージ

// Make sure to replace <YOUR_LOCAL_IP> with 
// the external IP of your computer if you're using Android. 
// You can get the IP in the Android Setup Guide window
String proxy = Platform.isAndroid ? '<YOUR_LOCAL_IP>:9090' : 'localhost:9090';

// Create a new HttpClient instance.
HttpClient httpClient = new HttpClient();

// Hook into the findProxy callback to set
// the client's proxy.
httpClient.findProxy = (uri) {
  return "PROXY $proxy;";
};

// This is a workaround to allow Proxyman to receive
// SSL payloads when your app is running on Android
httpClient.badCertificateCallback = 
  ((X509Certificate cert, String host, int port) => true);

技術的な詳細は Proxyman Flutter ドキュメントをご覧ください。

2.2 Flutter の HTTPS/HTTP 通信をキャプチャ - iOS シミュレータ

まず iOS シミュレータを起動します。Flutter アプリを実行しているシミュレータと同じものであることを確認してください。
Proxyman を開き、Certificate メニュー → Install for iOS → Simulator の順に選択して、手順に従ってください。プロキシの設定と証明書のインストールが 1 クリックで自動的に行われます。

ここまでできたら、Flutter アプリを iOS シミュレータで実行して、HTTP/HTTPS 通信のキャプチャを開始しましょう。

Proxyman は、Flutter アプリの HTTP/HTTPS 通信を自動的にキャプチャし始めます。

2.3. Flutter の HTTPS/HTTP 通信をキャプチャ - iOS 実機

iOS / iPadOS デバイス上の Flutter アプリから HTTP/HTTPS 通信をキャプチャするには、デバイスに Proxyman の証明書をインストールする必要があります。

Proxyman の Certificate メニュー → Install for iOS → Physical Device の順に選択し、手順に従ってください。

最後の手順で、証明書を必ずインストールして信頼してください。

ここまでできたら、Flutter アプリを iOS / iPadOS デバイスで実行して、HTTP/HTTPS 通信のキャプチャを開始できます。

Flutter アプリの HTTPS 通信をキャプチャしている Proxyman

Proxyman は、Flutter アプリの HTTP/HTTPS 通信を自動的にキャプチャし始めます。

まとめ

Flutter アプリの HTTP/HTTPS 通信をキャプチャするのは、とても簡単です。

Flutter プロジェクトに HTTP プロキシの設定を追加する
iOS / iPadOS デバイスに Proxyman の証明書をインストールする
Flutter アプリを実行し、Proxyman で HTTP/HTTPS 通信のキャプチャを開始する

プロキシのコードをリリースビルドに含めない

プロキシの設定と badCertificateCallback のコードは、デバッグ時のみ有効になるチェックで囲んでください。すべての証明書を受け入れるコールバックは、重要な HTTPS の安全性チェックを無効にしてしまうため、ユーザーに配布されるアプリに含めてはいけません。この記事は iOS に焦点を当てています。最新の Android エミュレータでは、Proxyman 6.4 以降であれば、Flutter のネットワークコードを変更せずにワンクリックの Flutter 設定を利用できます。

次のステップ

デバッグツールを使って、リクエストとレスポンスのペイロードを確認・変更してみてください。
Proxyman 公式サイトから Proxyman をダウンロードしてください。

Noah Tran

2024年11月11日