読者です 読者をやめる 読者になる 読者になる

Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

Charles Web Debugging Proxyの紹介

iOS

こんにちは、間藤です。

今回は、「Charles」というツールについて紹介したいと思います。
iPadからの通信をトレースするというシチュエーションで解説していきたいと思います。

I'm trying to debug a network problem. How do I get a packet trace?

以前、iPadのアプリを開発していたとき、そのアプリがWebサーバに対して行う通信を確認したい場面がありました。その際に、以下のページに行き当たりました。

「ネットワークの問題をデバッグしたいんだけど、どうやればいいですか?」というQAに対する回答が記載されています。

そして、「iOS Packet Tracing」の項に、紹介されていたのが「Charles」です。つまり、Charlesは、Webサーバへの通信を行うアプリの通信デバッグに利用できます。このツールは、他の用途にも利用できますが、今回はこの「Packet Trace」の機能について見ていきたいと思います。
また、Appleのサイトに掲載されていることから、高い評価を得ているツールであることがうかがえます。

Charlesのインストール

公式サイトからファイルをダウンロードしてください。この記事の執筆時点では、バージョン3.7が最新版です。以降、このバージョンを利用していきます。また、今回はWindows7にCharlesをインストールします。インストールは、特に注意しなければならないことはないと思います。ただ、最後に「Mozilla Firefox add-on」のインストールを促されます。CharlesがFirefoxのプロキシ設定を変更するために必要だとのことですので、必要に応じてインストールしてください。
なお、Charlesは有償のツールですが、30日間の試用期間が設けらていますので、購入せずとも利用することは可能です。但し、試用版では、起動に時間がかかったり、30分後に強制終了したりと、使い勝手に関するいくつかの制約があります。

- 30分後に強制終了
f:id:IntelligentTechnology:20130621133436p:plain

Charlesの動作原理

以降の設定内容をイメージしやすいよう図にしてみました。CharlesがiPad端末のプロキシサーバとなり、通信内容をトレースするという仕組みです。

f:id:IntelligentTechnology:20130621133507p:plain

Charlesのプロキシ設定

上の図に示したように、Charlesがプロキシサーバとしての役割を果たしますので、そのポート番号の設定を以下のように行います。

f:id:IntelligentTechnology:20130621133658p:plain

デフォルトでは8888が設定されています。今回はこのポート番号をそのまま使用します。

f:id:IntelligentTechnology:20130621133712p:plain

SSL設定

次に、SSLに関する設定を行います。HTTPS接続のトレースを行いたい場合、以下の設定が必要です。

f:id:IntelligentTechnology:20130621133849p:plain

Locationsに接続先のホストを追加/設定します。上の例では、任意のホスト接続のトレースを行うようにしています。

証明書インストール

Windowsマシンに、CharlesのCA証明書をインストールします。※今回は、iPadに証明書をインストールすればよいのですが、CharlesをインストールしたWindowsマシンでも、いろいろと機能確認したかったのでインストールしています。iPadへの証明書インストールについては、後述します。

メニューから[Install Charles CA SSL Certificate]を選択。

f:id:IntelligentTechnology:20130621134009p:plain

証明書ストアとして、「信頼されたルート証明機関」を選択してください。

f:id:IntelligentTechnology:20130621134157p:plain

インストール時に以下のような警告が出ます。

f:id:IntelligentTechnology:20130621134525p:plain

フィンガープリントは、このページで確認できます。このページには、プラットフォームごとの証明書インストール方法が記載されていますので、参考にしてください。

アクセス制御設定

Charlesに外部のマシンから接続する場合、アクセス制御設定を行っておく必要があります。

f:id:IntelligentTechnology:20130621134431p:plain

今回は、iPadから接続したいので、追加設定を行います。

f:id:IntelligentTechnology:20130621134447p:plain

Windows Proxy設定

デフォルトでは、Charlesを起動すると、Windowsのプロキシ設定を変更します。もし、Charlesの利用目的が、今回のようにiPadからの通信をトレースすることであれば、Windowsのプロキシ設定変更は不要です。これを抑制したいのであれば、以下のように「Proxy Windows Proxy at startup」のチェックを外しておきます。また、Firefoxは、独自にプロキシ設定を持っているので、別タブ(Mozilla Firefox)で同様の設定変更を行ってください。なお、Charlesが行ったプロキシ設定変更は、Charles終了時にもとに戻されます。ただし、Charles利用中にクラッシュした場合は、設定が戻らないので注意してください。

f:id:IntelligentTechnology:20130621134709p:plain

外部プロキシ設定

もし、お使いの環境が、プロキシサーバ経由でインターネット接続を行っており、iPadからインターネット上のサイトにアクセスしたときの通信内容をトレースしたいなら、外部プロキシ設定を行っておく必要があります。お使いの環境に合わせて設定を行ってください。

f:id:IntelligentTechnology:20130621135054p:plain

iPadの設定

Wi-Fi設定

以下のようにWi-Fi設定を変更します。(設定値は、環境に合わせて読み替えてください。)

f:id:IntelligentTechnology:20130621135146p:plain

CA証明書インストール

Safariで以下のURLにアクセスしてください。

http://charlesproxy.com/charles.crt

証明書のインストール画面が表示されますので、インストールを選択します。

f:id:IntelligentTechnology:20130621135206p:plain

【2015/4/8 追記】
バージョン3.10からCA証明書のインストール方法が変わりました。リリースノートに以下にように記載されています。
SSL certificate root certificate change to generate a unique certificate for each installation of Charles (see SSL Proxying in the Help menu)
ヘルプメニューを確認すると、以下のように表示されます。(以下のキャプチャはMacで取得したもの)

f:id:IntelligentTechnology:20150408141406j:plain

ここに記載されている手順を踏めば、証明書をインストールすることが可能です。
要するに一律同じ証明書を使うのではなく、Charlesのインストールごとに異なる証明書が使われるようになったということです。

通信内容のトレース

ここまでで準備が整いましたので、実際に通信内容をトレースしてみます。
iPadのSafariからGoogleに接続してみます。
すると、Charlesに通信トレース結果が表示されるはずです。(Recodingが停止中だと通信トレースされませんので注意してください。)
以下、「Sequence」タブを選択時の表示内容です。

f:id:IntelligentTechnology:20130621135317p:plain

次にHTTPSでGoogleに接続してみます。これも問題なくトレースされているのが確認できます。

f:id:IntelligentTechnology:20130621135330p:plain

※HTTPS通信のトレースで、レスポンスのHTMLソースを確認しようとすると、高い確率でCharlesがハングしてしまいました。

Charlesには、通信内容のトレース以外にも、様々な機能を提供します。
例えば、本番環境のプログラムコードを更新せずに、新しいプログラムコードの動作を確認するなどです。
以下のサイトに非常にわかりやすいデモが紹介されています。

http://css-eblog.com/tools/charles.html

私はまだそれほど使い込めていないので、これから他機能も確認したいと考えています。