153
111

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iOSデバイスだけでHTTP(S)通信がキャプチャできる「Charles Proxy」がリリースされたので試してみた

Last updated at Posted at 2018-03-28

iOSアプリのCharles Proxyがリリースされました

charles_proxy_icon.png

これまでもCharlesはWindows, macOS, Linux用のアプリとして存在していましたが、この度iOSアプリの Charles Proxy がリリースされました。
App Storeから購入できます。これにより、iOSだけでパケットをトレースすることができるようになりました。

公式のアナウンスはこちらをご覧ください。

記事執筆時点の機能は以下です。

  • iOSデバイス上のHTTP(S)通信のトラフィックをキャプチャする
  • SSLプロキシとして機能し、SSL/TLS通信がプレーンテキストで見れる
  • アプリでリクエストとレスポンスの内容が確認でき、個別のリクエストやセッション全体をデスクトップのCharlesに共有できる

使ってみた

早速App Storeで購入してインストールしてみました。

検証環境

本エントリは以下の環境で検証を行っています。

  • iPhone X実機 iOS 11.2.6(15D100)
  • Charles v1.0(61)

初期設定

まずは必要な初期設定を行います。アプリの初回起動時は「Use Proxy」がOFFになっているのでONにします。

charles_proxy_001.png

VPN構成追加の許可が求められるので「Allow」をタップします。

charles_proxy_002.png

パスコードを入力します。

charles_proxy_003.png

「Use Proxy」がONになりました。

charles_proxy_004.png

HTTP通信のキャプチャ

上述の初期設定を行うとHTTP通信は既にキャプチャできる状態になっています。
今回は確認のためお天気WebサービスAPIで札幌の天気予報を取得してみました。

以下のURLにiOSのSafariでアクセスしてみました。

http://weather.livedoor.com/forecast/webservice/json/v1?city=016010

その後、アプリの「CURRENT SESSIONS」を開くと該当のホストが表示されるのでタップします。

charles_proxy_005.png

パスが表示されるのでタップします。

charles_proxy_006.png

通信の内容が表示されます。OVERVIEWではHTTPのメソッドやステータスコードが確認できます。
charles_proxy_007.png

SIZESではリクエスト・レスポンスそれぞれヘッダーとボディのサイズが表示されます。
charles_proxy_008.png

TIMESは最初は非表示になっていますが、タップすると表示されます。通信にかかった時間が表示されます。
charles_proxy_009.png

REQUEST HEADERも表示されます。
charles_proxy_010.png

もちろんRESPONSE HEADERも表示されます。
charles_proxy_011.png

RESPONSE BODYは「View body」をタップすると表示されます。
charles_proxy_012.png

右上のボタンをタップすると内容を別のアプリやMacに共有できます。
charles_proxy_013.png

HTTPS通信のキャプチャ

続いてHTTPS通信をキャプチャしてみます。今回は動作確認として郵便番号-住所検索APIを使用して岩本町の郵便番号で住所を検索してみました。

以下のURLにiOSのSafariでアクセスしてみました。

https://api.zipaddress.net/?zipcode=101-0032

初期状態ではSSL Proxyingが無効になっているため、このままでは通信の内容を見ることはできません。そこでまずは「Enable SSL Proxying」をタップします。
charles_proxy_014.png

Charles CA Certificateをインストールして信頼する必要がある旨のメッセージが表示されるので「Settings」をタップします。
charles_proxy_015.png

「Settings」が開くので「SSL Proxying」をタップします。
charles_proxy_016.png

「Install SSL Certificate」をタップします。
charles_proxy_017.png

「許可」をタップします。
charles_proxy_018.png

プロファイルをインストールします。
charles_proxy_019.png

パスコードを入力します。
charles_proxy_020.png

「インストール」をタップします。
charles_proxy_021.png

もう一度「インストール」をタップします。
charles_proxy_022.png

完了をタップします。
charles_proxy_023.png

続いてインストールした証明書を信頼する必要があります。設定アプリの一般 > 情報 > 証明書信頼設定をタップします。
charles_proxy_024.png

「ルート証明書を全面的に信頼する」でCharles ProxyをONにして「続ける」をタップします。
charles_proxy_025.png

再度セッション画面を開くと、SSL Proxyingは有効になっていましたが該当のリクエストは表示されませんでした。
charles_proxy_026.png

画面下部に「SSL Proxyingの設定を変更した後はアプリを強制終了して再起動して」と書いてあるので素直にアプリをkillして再起動し、再度Safariで通信してみました。

すると、ちゃんと該当のリクエストが表示されました。
charles_proxy_027.png

通信内容もちゃんと見れました。
charles_proxy_028.png

charles_proxy_029.png

まとめ「Charles Proxy、これはデバッグに便利だ...」

今回はCharles Proxyを実際に試してみました。
デバッグ時にHTTPリクエストでちゃんと想定したリクエストが送れているか、レスポンスで想定した内容が返ってきているかなどを確認する手段としてとても便利だと思います。

有料ですがその価値はあるんじゃないでしょうか。皆さんもぜひ試してみてください。

153
111
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
153
111

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?