このトピックでは、サードパーティ製ツールを使用してメッセージをキャプチャする方法について説明します。
このドキュメントには、サードパーティ製プロダクトに関する情報が含まれている場合があります。この情報は参照用です。Alibaba Cloud は、サードパーティ製プロダクトのパフォーマンスや信頼性、またはこれらのプロダクトで実行された操作から生じる潜在的な影響に関して、明示または黙示を問わず、いかなる保証も行いません。
背景情報
mPaaS フレームワークを使用してモバイルアプリプロジェクトを開発する際に、エラーが発生することがあります。HTTP メッセージのキャプチャは、これらのエラーを理解し、トラブルシューティングするための重要なメソッドです。特に、問題がクライアントとサーバーまたはゲートウェイ間のやり取りに関わる場合に有効です。たとえば、リクエストが失敗した場合、リクエストと応答のメッセージを分析できます。これにより、リクエストのエラーを確認し、サーバーが正しく応答したかを検証し、戻り値が期待どおりであることを確認できます。このプロセスは、問題の根本原因を特定するのに役立ちます。
HTTP メッセージキャプチャツール
HTTP メッセージをキャプチャするための一般的なツールには、Charles と Fiddler があります。これらのツールは、同様の原則に基づいて動作します。
ローカルに HTTP プロキシを設定します。このプロキシを通過するすべての HTTP メッセージは、傍受および解析が可能です。
HTTPS メッセージを解析するには、まずクライアントに Charles または Fiddler のルート認証局 (CA) 証明書を設定する必要があります。この構成により、クライアントは中間者によって転送された情報を信頼するようになり、メッセージの復号が可能になります。


Charles と Fiddler は、HTTPS メッセージの復号と表示のみが可能です。実際には、開発者はまず Mobile Gateway Service (MGS) のデータ暗号化機能を使用するなど、データに対してオフラインで暗号化操作を実行してから、HTTPS で通信する場合があります。Charles と Fiddler は、この元のコンテンツを復号することはできません。オフラインで暗号化された後のコンテンツのみを表示できます。
Charles (macOS プラットフォーム)
このセクションでは、Charles バージョン 4.5.5 を例に、その仕組み、インストール、構成、および HTTPS 復号のための設定プロセスについて説明します。Charles は、macOS 上で HTTP メッセージを分析するための重要なツールです。多くの問題のトラブルシューティングにおいて重要な役割を果たし、開発者が効率的に問題を特定し、解決するのに役立ちます。
リファレンス:
インストールと基本インターフェイス
Charles の公式サイトから Charles の .dmg インストールパッケージをダウンロードできます。その後、パッケージを実行して Charles をシステムにインストールします。
Charles を初めて起動すると、システムプロキシを設定する権限を要求されます。この権限を許可する必要があります。起動後、HTTP リクエストが Charles を通過すると、次の図に示すように、Charles のメインインターフェイスに表示されます。

赤い丸は、メッセージがキャプチャ中であることを示します。
左側のペインには HTTP メッセージのエントリが表示されます。ロックアイコンは、復号されていない HTTPS メッセージを示します。
クライアントの構成
ローカルマシンで実行されているエミュレーターからの HTTP リクエストは、デフォルトでシステムプロキシを通過します。プロキシ情報を手動で構成する必要はありません。
iPhone や Android スマートフォンなどの物理的なモバイルデバイスの場合は、プロキシを手動で構成する必要があります。これにより、デバイスからのすべてのネットワークリクエストが Charles プロキシ経由で転送されるようになります。
モバイルデバイスが、その IP アドレスを使用して Charles がインストールされている Mac デバイスに直接アクセスできることを確認します。これを行うには、モバイルデバイスと Mac を同じネットワークに接続します。
Charles のプロキシ構成を表示して、プロキシのポート番号を取得できます。これを行うには、[Proxy] > [Proxy Settings] をクリックして、次の図に示すように [Proxy Settings] ページを開きます。
説明デフォルトのポート番号は 8888 です。

システムのネットワーク設定を開いて、ローカル IP アドレスを表示できます。

モバイルデバイスでプロキシを構成できます。iOS デバイスの場合は、[設定] > [Wi-Fi] に移動し、Wi-Fi ネットワークの設定を選択します。次に、プロキシの IP アドレスとポート番号 (Charles を実行している Mac) を追加します。

モバイルデバイスが構成されると、デバイスから Charles に到達した最初のリクエストでプロンプトがトリガーされます。[Allow] をクリックする必要があります。

これで、モバイルデバイスからの HTTP リクエストが Charles に表示されるようになります。たとえば、スマートフォンのブラウザで
http://www.antfin.com/にアクセスすると、次の図に示すように、リクエストが Charles に表示されます。
SSL プロキシの構成
デフォルトでは、Charles は HTTPS メッセージを復号しません。HTTPS メッセージの内容を分析するには、SSL プロキシ機能を構成する必要があります。このプロセスには、主に 2 つの部分が含まれます。
デバイスに Charles ルート CA をインストールして信頼します (エミュレーターと物理デバイスの両方で必要です)。
Charles で復号したい HTTPS サイトを構成します。
デバイスの構成
Charles を実行した状態で、モバイルデバイスのブラウザを使用して
chls.pro/sslにアクセスします。iOS の場合は、Safari を使用する必要があります。ブラウザは自動的にcharles-proxy-ssl-proxying-certificate.pemをダウンロードし、Charles Proxy Customer Root Certificateをインストールするように求めます。
Android では、証明書に名前を付けて、ユーザーが信頼した認証情報 (カスタマー証明書とも呼ばれます) にインストールする必要があります。
iOS 10 以降の場合は、[設定] > [一般] > [情報] > [証明書信頼設定] に移動します。前のステップでインストールした Charles 証明書の完全な信頼を有効にします。

Android アプリの場合、ユーザー認証情報を信頼するためにネットワークセキュリティ構成を追加する必要があることに注意してください。次のステップに従ってください。
Portal プロジェクトで、ネットワークセキュリティ構成の XML リソースを
res/xml/network_security_config.xmlに追加します。XML の内容は次のとおりです。<network-security-config> <debug-overrides> <trust-anchors> <!-- Trust user added CAs while debuggable only --> <certificates src="user" /> </trust-anchors> </debug-overrides> </network-security-config>
AndroidManifest.xmlファイルを更新して、ネットワークセキュリティ構成を使用するようにします。<?xml version="1.0" encoding="utf-8"?> <manifest ... > <application ... android:networkSecurityConfig="@xml/network_security_config" ... > ... </application> </manifest>
ここをクリックして、User CA を信頼するためのサンプルコードをダウンロードします。
ローカルマシン (Mac) が Charles 証明書を信頼する必要がある場合は、[Help] > [SSL Proxying] > [Install Charles Root Certificate] に移動して証明書をインストールします。

Charles の構成
Charles のメニューバーで、[Proxy] > [SSL Proxy Settings…] を選択します。[SSL Proxying] タブで、[Enable SSL Proxying] チェックボックスをオンにし、HTTPS メッセージを復号したいドメイン名とポートを追加します。
mPaaS パブリッククラウドユーザーの場合は、次のドメイン名を追加します。
*.aliyun.com*.alipay.com*.aliyuncs.com
Apsara Stack ユーザーの場合は、上記の設定に従い、カスタムドメイン名を追加します。
構成が完了すると、Charles で HTTPS メッセージの内容を表示できます。例:
構成前:HTTPS メッセージが文字化けしています。

構成後:HTTPS メッセージの内容が復号されています。
