Proxyman で iOS 18 の WKWebView から HTTP/HTTPS 通信をインターセプト

1. 問題点

WKWebView はシステムのプロキシ設定を尊重しないため、WKWebView のネットワーク通信（HTTP/HTTPS）をキャプチャするのは非常に困難です。

WKWebView には、Safari にあるような Network コンソールのタブもありません。

そのため、WKWebView から送信される通信を簡単にキャプチャする方法はありません。

この記事で扱う内容

Proxyman を使って、iOS 17 または iOS 18 の WKWebView から HTTPS 通信をキャプチャする方法

2. 解決策

iOS 17 と iOS 18 以降、WKWebView には WKWebsiteDataStore の proxyConfigurations が導入されました。これにより、WKWebView にプロキシを設定できます。この機能を利用すれば、WKWebView から送信される通信を簡単にキャプチャできます。

ドキュメントはこちらで確認できます：https://developer.apple.com/documentation/webkit/wkwebsitedatastore/4264546-proxyconfigurations

このチュートリアルでは、Proxyman を使って iOS 17/18 の WKWebView から通信をキャプチャする方法を説明します。

2.1. 前提条件

Proxyman の公式サイトから Proxyman をダウンロードします。

2.2. セットアップ

Xcode でプロジェクトを開きます。
使用中の WKWebView インスタンスを見つけて、次のコードを追加します。

lazy var webView: WKWebView = {
    let webConfiguration = WKWebViewConfiguration()

    // ✅ define Proxy Setting to Proxyman
    let httpProxy = ProxyConfiguration(
        httpCONNECTProxy: NWEndpoint.hostPort(
            host: NWEndpoint.Host(
                "127.0.0.1"
            ),
            port: NWEndpoint.Port(
                integerLiteral: 9090
            )
        )
    )

    // ✅ Tell WKWebView to use the Proxy
    let dataSource = WKWebsiteDataStore.default()
    dataSource.proxyConfigurations = [httpProxy]
    webConfiguration.websiteDataStore = dataSource
    
    // init view
    let webView = WKWebView(
        frame: .zero,
        configuration: webConfiguration
    )
    webView.translatesAutoresizingMaskIntoConstraints = false
    return webView
}()

127.0.0.1 と 9090 は、お使いの Proxyman の IP アドレスとポートに置き換えてください（ポート 9090 は Proxyman のデフォルト値です）。
実機でテストする場合は、Mac の IP アドレスが必要です。これは Proxyman ウィンドウ上部の Proxyman ツールバーで確認できます。

iOS シミュレータ

Proxyman -> Certificate メニュー -> Install to iOS -> Simulator を開き、画面の指示に従って iOS シミュレータに証明書をインストールします。

実機の iPhone/iPad

Proxyman -> Certificate メニュー -> Install to iOS -> Physical Device を開き、画面の指示に従って iPhone/iPad に証明書をインストールします。

3. ✅ iOS アプリを再読み込みして、Proxyman で通信を確認する

WKWebView から送信されるすべての通信が、Proxyman でキャプチャされて表示されます。
fetch、axios、XMLHttpRequest など、サードパーティのライブラリによる HTTP/HTTPS 通信にも対応しています。

4. 次のステップ

Proxyman の Filter を使うと、デバッグしたい通信だけに絞り込めます。
Proxyman の Replay を使うと、デバッグしたい通信を再送信することもできます。

セットアップの重要なヒント

このプロキシ設定はデバッグビルドにのみ含め、App Store 向けのビルドからは除外してください。127.0.0.1 は、同じ Mac 上のシミュレータでのみ使用してください。実機では、Proxyman に表示される Mac の IP アドレスが必要です。WKWebView を作成する前にプロキシを適用してください。既存の接続は古い経路を維持する場合があるため、セッション中にプロキシを変更したときは、Web ビューまたはそのデータストアを作り直してください。

Noah Tran

2024年8月29日