Charles Proxy — 概要、設定、HTTPSトラフィックの傍受

Charles Proxyとは？

Charles Proxyは、クライアントとサーバー間の仲介役として機能するHTTPプロキシおよびHTTPモニターです。すべてのリクエストとレスポンスはCharlesを通過し、その内容の表示、構造の分析、リアルタイムのデータ変更、さまざまなネットワーク状態のシミュレーションが可能です。Windows、macOS、Linuxで利用できます。

歴史と位置づけ

Charles Proxyは2004年にKarl von Randowによって作成され、ネットワークトラフィックのデバッグで最も人気のあるツールの1つであり続けています。無料の代替ツールとは異なり、Charlesは30日間の試用期間付きの有料ライセンスを提供しています。このツールは、HTTP通信を完全に制御する必要があるモバイルアプリ開発者、ウェブ開発者、QAエンジニア向けのプロフェッショナルソリューションとして位置づけられています。

プラットフォーム互換性

Charlesはコンピューター上でシステムプロキシとして動作し、同じネットワーク上の任意のデバイス（Android、iOS、シミュレーター、エミュレーター、ウェブブラウザー、IoTデバイス）からのトラフィックを傍受できます。HTTPSを傍受するには、各デバイスにCharlesルート証明書をインストールする必要があります。トラフィックはHTTP/1.1およびHTTP/2（一部）でサポートされています。HTTP/3（QUIC）は傍受レベルではサポートされていません。

Charles Proxyの仕組み

CharlesはMITM（Man-in-the-Middle）プロキシの原理で動作します。クライアントがCharlesを介してリクエストを送信すると、ツールはリクエストを傍受し、ターゲットサーバーに転送し、レスポンスを受信してクライアントに返します。すべてのトラフィックはCharlesを通過するため、分析と変更が可能です。

プロキシアーキテクチャ

起動時にCharlesはポート8888（デフォルト）でローカルHTTPプロキシを作成します。オペレーティングシステムまたはアプリケーションはこのプロキシを使用するように設定されます。すべてのHTTPリクエストは最初にCharlesに送信され、Charlesはターゲットサーバーへの完全なクライアントとして動作します。HTTPSの場合、Charlesは独自のSSLプロキシ技術を使用します。ドメインごとにその場で証明書を生成し、Charlesルート証明書で署名します。ルート証明書がデバイスに信頼できるものとしてインストールされている場合、CharlesはHTTPSトラフィックを復号化して表示できます。

動作モード

Charlesは2つのモードをサポートしています：Proxy（クラシックプロキシサーバー）とSOCKS Proxy（UDPおよびTCPトラフィック用）。ウェブ開発には標準HTTPプロキシを使用します。モバイルデバイスの場合は、Charlesを実行しているコンピューターのIPアドレスを指定してデバイスでWiFiプロキシを設定します。macOSはiOSシミュレーターの自動プロキシ設定をサポートしています。

<!-- Charlesサポート付きAndroid用network_security_config.xmlの設定 -->
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <debug-overrides>
        <trust-anchors>
            <!-- DebugビルドでCharles証明書を信頼する -->
            <certificates src="user" />
        </trust-anchors>
    </debug-overrides>
</network-security-config>

Charles Proxyの主な機能

Charles Proxyは、単なるリクエスト傍受をはるかに超える、トラフィック分析と変更のためのプロフェッショナルツールセットを提供します。

RewriteとBreakpoints

Rewriteツールを使用すると、リクエストまたはレスポンスの特定の部分（ヘッダー、URLパラメーター、レスポンス本文）を自動的に変更できます。たとえば、User-Agentヘッダーを別のデバイスの値に置き換えたり、特定のCookieを削除したりできます。Breakpointsはデバッガーのように機能します。リクエストは選択した段階（送信前または受信前）で停止し、開発者は続行する前に手動で内容を変更できます。これはエラーレスポンスや非標準状態の処理をテストするのに役立ちます。

Map LocalとMap Remote

Map Localを使用すると、ネットワークリソース（CSS、JS、JSON）をディスク上のローカルファイルに置き換えることができます。これはフロントエンド開発に不可欠です。サーバーにデプロイすることなくCSS/JSを変更してすぐに結果を確認できます。Map RemoteはリクエストをあるURLから別のURLにリダイレクトします。たとえば、本番サーバーからステージングにリダイレクトしてテストできます。両方のツールはワイルドカードをサポートするURLパターンで動作します。

Throttleとネットワーク状態のシミュレーション

Throttleツールを使用すると、プリセットプロファイル（3G、EDGE、GPRS、DSL、WiFi）を使用してさまざまなタイプのネットワーク接続をシミュレーションできます。速度制限（ダウンロード/アップロード）、レイテンシー、パケットロス、安定性を設定できます。これは、低速または不安定な接続でのアプリの動作（適切なタイムアウト処理、再試行ロジック、オフラインモード）をテストするために重要です。

Auto SaveとRecording

Charlesはトラフィックセッションを.chlsファイルに自動保存でき、後で分析したり同僚と共有したりできます。Recording Controlを使用すると、保存するトラフィックをドメイン、コンテンツタイプ、ステータスコードごとに柔軟に設定できます。これは長期のAPI監視に便利です。

モバイルデバイス向けCharles Proxyの設定

モバイルアプリのトラフィックをデバッグするには、CharlesをWiFiプロキシとして設定します。コンピューターと同じネットワーク上のすべてのデバイスがCharlesを介してトラフィックをルーティングできます。正しいHTTPS設定には、モバイルデバイスへのCharles証明書のインストールが必要です。

Androidでの設定

Androidの場合：Settings → WiFi → Advanced → Proxyを開き、Manualを選択してポート8888とともにコンピューターのIPアドレスを入力します。次に、デバイスでブラウザーを開き、http://chls.pro/sslにアクセスしてCharles証明書をダウンロードします。Android 7+（API 24+）では、Debugビルドでユーザー証明書を信頼するためにnetwork_security_config.xmlが必要です。そうしないと、アプリがCharlesを介してトラフィックをルーティングしない可能性があります。

iOSでの設定

iOSの場合：Settings → WiFi → プロキシを設定でIPとポート8888を指定します。次にSafari → http://chls.pro/ssl → 証明書プロファイルをインストールします。iOS 10.3+では、追加で証明書の信頼を有効にする必要があります：Settings → General → About → Certificate Trust Settings → Charles Proxyをオンにします。iOSは証明書に関してより厳格で、一部のアプリはSSL Pinningを使用して、信頼できる証明書があってもCharlesを介したトラフィックをブロックする場合があります。

SSL Pinningの問題の解決

アプリがSSL Pinning（サーバー証明書の固定）を使用している場合、Charlesを介した標準プロキシは機能しません。アプリがCharles証明書を拒否します。解決策：OkHttpまたはURLSessionの設定を介してDebugビルドでSSL Pinningを無効にする、Fridaを使用してランタイムでピニングをバイパスする、またはrootアクセスを持つAndroidエミュレーターを使用する。

Charles Proxyの実用的な使用例

Charles Proxyは特定の開発およびテストタスクを解決します。このツールが不可欠な最も一般的なシナリオを見てみましょう。

API統合のデバッグ

最も一般的なシナリオはAPIリクエストの正確性の確認です。Charlesは正確なリクエストURL、ヘッダー、本文、パラメーターを表示します。サーバーが予期しないレスポンスを返した場合、JSON構造、エラーコード、レスポンスヘッダーがすぐにわかります。これにより、両側のログなしでクライアント側のエラーとサーバー側のエラーを区別できます。

低速接続でのテスト

Throttleプロファイルを使用して、低い接続速度でのアプリの動作をテストできます。ローディングインジケーターが表示されるか、タイムアウトが正しく処理されるか、接続喪失時にUIがフリーズするかどうか。キャッシュのテストは特に重要です。データがすでにロードされている場合、アプリは無限ローディング状態になるのではなく、キャッシュからデータを表示する必要があります。

サーバーレスポンスの編集

Breakpointsを使用して、アプリに送信される前にサーバーレスポンスを変更できます。たとえば、データの代わりに空の配列を返す、ステータスコードを500に変更する、JSONに新しいフィールドを追加するなどです。これにより、サーバーコードを変更せずにエッジケースの処理をテストできます。これはモバイル開発におけるCharlesの最も強力な使用法の1つです。