Auto Draft Charles Proxyで端末の通信 をモニタリングしよう

1. はじめに

APIの動作確認をするとき、HTTPヘッダーやリクエストの中身、レスポンスなどをどのようにチェックしていますか?何を隠そう私はずっと、Laravelのロガー一本槍でやってきました…。今日ボスに紹介してもらった、こんなときのための強力なツールをご紹介します。Charles Proxyです。では、 Auto Draft Charles Proxyで端末の通信 についてご説明します。

Charlesは、デバイス間のすべてのHTTP(S)通信をモニタリングできるウェブプロキシツールです。

クライアントがPCブラウザであれ、モバイル端末であれ、リクエスト、レスポンスからHTTPヘッダー(クッキーやキャッシュを含む)までまるっと追跡できます。

では実際に、スマートフォンとコンピューターの間の接続にCharles Proxyを刺してみましょう。

検証環境:

AndroidスマートフォンとWindows PC

(iOSやMacでも検証可能です)

2. レッツトライ

a. Windows側

Charlesアプリケーションは、Mac、Linux、Windowsの3つのプラットフォームすべてで利用できます。 https://www.charlesproxy.com/download/からダウンロードできます。

Charles Proxyの新規作成:

1. Charlesを開き、Proxy -> Proxy Settingsを選びます。

「Proxies」タブで、[HTTP Proxy Port]セクションに8888と入力します。

2. 「SSL Proxying」タブをクリックし、「Enable SSL Proxying」をオンにします。

ここでListenしたいドメイン名を指定します。

たとえば、https:://saas.beyond-inc.jpを接続する場合は、「Add」ボタンをクリックしてhttps:://saas.beyond-inc.jpを追加します。ワイルドカード(*.saas.beyond-inc.jp)でも可。

b. モバイル(Android)側

1. Windows PCのローカルIPを取得します。

 「Help」->「Local IP addess」に移動します。ここでは192.168.1.168です。

2. AndroidにCharles Proxyを設定

AndroidのWi-fi一覧から、接続しているWi-fiの「Modify network」->「Advanced Options」に移動し -> 「Proxy」までスクロールし、「Manual」を選択します。

  • 「Proxy host name」ボックスに、Windows PCのIPを入力します。ここでは192.168.1.168です。
  • 「Proxy port」ボックスにポート8888を入力します。

保存すると、電話からCharlesへの接続があることを通知するポップアップが表示されます。「Allow」を選択してください。

接続できたどうかを確認するために、PC側で 「Proxy」 ->「Access Control Settings」に移動してください。

追加した電話のローカルIPは192.168.1.94でした。

2. Charles SSL certificate をインストールする

   SSL通信のために、証明書のインストールが必要です。

  • スマホのブラウザに移動し、chls.pro/ssl または http://charlesproxy.com/getssl と入力し、SSL certificateをダウンロードします。
  • Certificate をダウンロードしたら、クリックしてファイルを開きます。 Androidはこのファイルをインストールするためのダイアログボックスを表示します。証明書名を入力して「OK」をクリックします。この名前は何でも大丈夫です。ここではCharlesにします。

このセクションの後、セキュリティのために携帯電話のパスワードを作成しなければいけない場合があります。通常のパスワードを作成するだけです。

3. 結果

では、またお会いしましょう!