すべてのプロダクト
Search
ドキュメントセンター

Mobile Platform as a Service:HTTP メッセージのキャプチャ方法 (macOS/Charles)

最終更新日:Jan 17, 2025

免責事項: このトピックには、サードパーティ製品に関する情報が含まれている場合があります。このような情報は参照用です。Alibaba Cloud は、サードパーティ製品のパフォーマンスと信頼性、および製品に対する操作の潜在的な影響について、明示的または黙示的にいかなる保証も行いません。

バックグラウンド

mPaaS フレームワークに基づくモバイル アプリ プロジェクトの開発プロセスでは、さまざまなエラーが発生します。特に、クライアントとサーバーまたはゲートウェイ間のインタラクションに関するエラーが発生した場合は、HTTP メッセージをキャプチャして、エラーの理解とトラブルシューティングに役立てることができます。たとえば、リクエスト エラーが発生した場合、リクエスト メッセージとレスポンス メッセージを分析して、リクエスト情報が無効かどうか、サーバーが有効なレスポンスを返しているかどうか、返された値が予想どおりかどうかを確認できます。これは、問題の根本原因を特定するのに役立ちます。

HTTP メッセージをキャプチャするためのツール

CharlesFiddler は、HTTP メッセージをキャプチャするための一般的なツールです。これらの 2 つのツールの動作は似ています。

  • ローカル HTTP プロキシをデプロイします。プロキシは、プロキシを通過するすべての HTTP メッセージをキャプチャして解析できます。

  • 事前にクライアントで Charles または Fiddler の CA ルート証明書を構成します。これにより、HTTPS メッセージを解析できるようになり、中間プロキシによって転送された情報がクライアントによって信頼され、メッセージが復号されます。抓包模式proxy service

説明

Charles と Fiddler は HTTPS メッセージのみを復号して表示できます。実際には、開発者は Mobile Gateway Service(MGS)のデータ暗号化機能などを使用してデータをオフラインで暗号化し、HTTPS 経由でデータを交換する場合があります。この部分のデータの元のコンテンツは、Charles または Fiddler では復号できません。オフラインで暗号化されたコンテンツのみを表示できます。

Charles (macOS プラットフォーム)

このトピックでは、Charles の仕組み、Charles のインストールと構成の方法、HTTPS メッセージの復号の構成方法について説明します。Charles 4.5.5 を例として使用します。Charles は、macOS で HTTP メッセージを解析するための重要なツールです。このツールは、開発者がさまざまな問題のトラブルシューティングを行い、問題を特定して解決するのに役立ちます。

参照:

インストールと基本 UI

Charles の公式 Web サイトから Charles の DMG インストール パッケージをダウンロードできます。次に、インストール パッケージを実行して、システムに Charles をインストールできます。

Charles が初めて起動されると、システム プロキシを設定するための権限が要求されます。[許可] をクリックして権限を付与できます。Charles の起動後、HTTP リクエストが Charles を通過すると、次の図に示すように、Charles のホーム画面でリクエストを表示できます。

p4.png

    説明
    • 赤色のライトが点灯し、取得が進行中であることを示します。

    • 左側の列には HTTP メッセージ エントリが含まれており、ロック記号は復号されていない HTTPS メッセージを示します。

クライアントでのプロキシの構成

  • 現在のデバイスで実行されているシミュレーターによって生成された HTTP リクエストは、デフォルトでシステム プロキシを通過します。プロキシ情報を手動で構成する必要はありません。

  • iPhone や Android スマートフォンなどの物理モバイル デバイスでは、デバイスによって生成されたすべてのネットワーク リクエストが Charles プロキシによって転送されるように、プロキシを手動で構成する必要があります。

    1. モバイル デバイスが IP アドレスを使用して Charles を搭載した Mac デバイスにアクセスできることを確認します。モバイル デバイスと同じネットワークに Charles をインストールすることをお勧めします。

    2. Charles プロキシの構成を表示し、プロキシのポート番号を取得します。Charles のメニューバーで、[プロキシ] > [プロキシ設定] を選択して、次の図に示すように [プロキシ設定] ページを開きます。

      説明

      デフォルト ポート番号は 8888 です。

      Proxy Settings

      1. システム ネットワーク設定に移動して、現在のデバイスの IP アドレスを表示します。Network

      2. モバイル デバイスでプロキシを構成します。たとえば、iOS デバイスでは、[設定] > [Wi-Fi] をタップします。接続されている Wi-Fi の端にあるアイコンをタップして、その設定を表示します。設定Wi-Fi をタップし、 を選択して、Charles プロキシの IP アドレスとポート番号を入力します。

         iOS proxy

      3. モバイル デバイスでプロキシが構成された後、モバイル デバイスからの最初のリクエストが Charles に到着すると、次のメッセージが表示されます。[許可] をクリックします。connection

      4. Charles では、モバイル デバイスによって生成されたすべての HTTP リクエストを表示できます。たとえば、モバイル デバイスのブラウザを使用して http://www.antfin.com/ にアクセスすると、次の図に示すように、Charles でリクエストを表示できます。request

SSL プロキシの設定

デフォルトでは、Charles は HTTPS メッセージを復号しません。HTTPS メッセージのコンテンツを解析するには、SSL プロキシ機能を構成する必要があります。構成には、次の手順が含まれます。

  • シミュレーターと実際のモバイル デバイスに Charles ルート CA をインストールして信頼します。

  • Charles で、HTTPS メッセージの復号が必要な HTTPS サイトを構成します。

モバイル デバイスの構成

  1. Charles を有効にします。次に、モバイル デバイスのブラウザを使用して chls.pro/ssl にアクセスします。ブラウザは自動的に charles-proxy-ssl-proxying-certificate.pem をダウンロードし、Charles Proxy Customer Root Certificate をインストールするように指示します。iOS デバイスでは、Safari ブラウザを使用することをお勧めします。

    certificate

    Android デバイスでは、証明書に名前を付けて [顧客証明書] にインストールするように指示されます。

  2. iOS 10 以降を搭載したデバイスで、[設定] > [一般] > [情報] > [証明書の信頼設定] に移動します。前のステップでインストールした Charles 証明書を完全に信頼するように設定します。

    trust

  3. Android アプリでは、ネットワーク セキュリティ設定機能を追加することで、カスタマー証明書を信頼する必要があることに注意してください。そのためには、次の手順を実行します。

    1. 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>
![XML リソース](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/159161/AntCloud_zh/1585040328784/XML%20resource.png)
2. 前述のネットワーク セキュリティ構成を使用するように `AndroidManifest.xml` ファイルを更新します。
<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
    <application ...
                 android:networkSecurityConfig="@xml/network_security_config"
                 ... >
        ...
    </application>
</manifest>
![AndroidManifest](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/159161/AntCloud_zh/1585040394451/AndroidManifest.png)

[ここをクリック](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/attach/159161/AntCloud_zh/1585040456465/3-1-trust-user-CA.zip "ここをクリック") ユーザー CA 証明書を信頼するために使用されるサンプル コードをダウンロードします。
  1. macOS 上で実行されている現在のデバイスで Charles 証明書を信頼するには、[ヘルプ] > [SSL プロキシ] > [Charles ルート証明書のインストール] に移動します。

    Install

Charles の構成

Charles のメニューバーで、[プロキシ] > [SSL プロキシ設定] を選択します。[SSL プロキシ] タブで、HTTPS メッセージの復号が必要なドメイン名とポートを追加できます。次に、[SSL プロキシを有効にする] を選択します。SSL Proxy Settings

  • mPaaS の Alibaba Cloud ユーザーの場合は、次のドメイン名が必要です。

    • *.aliyun.com

    • *.alipay.com

    • *.aliyuncs.com

  • Apsara Stack ユーザーの場合は、上記の構成に基づいてカスタム ドメイン名を追加します。

構成が完了すると、Charles で HTTPS メッセージのコンテンツを表示できます。次の図は、HTTPS メッセージのコンテンツの例を示しています。

  • 構成前: HTTPS メッセージの次数が正しくありません。

    before

  • 構成後: HTTPS メッセージの内容は復号化されます。after