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

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

![charles_proxy_icon.png](https://qiita-image-store.s3.amazonaws.com/0/33988/bb34d811-0693-5a81-a9fb-279d93b98be2.png)

これまでもCharlesはWindows, macOS, Linux用のアプリとして存在していましたが、この度iOSアプリの Charles Proxy がリリースされました。
<a href="https://itunes.apple.com/app/charles-proxy/id1134218562?mt=8">App Storeから購入</a>できます。これにより、iOSだけでパケットをトレースすることができるようになりました。

公式のアナウンスは<a href="https://www.charlesproxy.com/documentation/ios/">こちら</a>をご覧ください。

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

- 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](https://qiita-image-store.s3.amazonaws.com/0/33988/ff9e04ad-bd6c-e724-cff8-4c67e7465123.png)


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

![charles_proxy_002.png](https://qiita-image-store.s3.amazonaws.com/0/33988/37c7dfdb-957c-7d9d-6a58-00cce4405ca7.png)


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

![charles_proxy_003.png](https://qiita-image-store.s3.amazonaws.com/0/33988/87eb992c-a24b-23e3-abe4-87da562368ee.png)


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

![charles_proxy_004.png](https://qiita-image-store.s3.amazonaws.com/0/33988/c6e9aab5-cd32-ec3a-270a-29859367c5cd.png)


### HTTP通信のキャプチャ
上述の初期設定を行うとHTTP通信は既にキャプチャできる状態になっています。
今回は確認のため<a href="http://weather.livedoor.com/weather_hacks/webservice">お天気Webサービス</a>APIで札幌の天気予報を取得してみました。

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

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

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

![charles_proxy_005.png](https://qiita-image-store.s3.amazonaws.com/0/33988/ec2cf587-a8e9-3896-8281-b426e351e5a8.png)


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

![charles_proxy_006.png](https://qiita-image-store.s3.amazonaws.com/0/33988/4f7108f1-583d-fa39-1b1e-356601c21808.png)


通信の内容が表示されます。OVERVIEWではHTTPのメソッドやステータスコードが確認できます。
![charles_proxy_007.png](https://qiita-image-store.s3.amazonaws.com/0/33988/b90df976-36ad-743c-766f-8e7f1539b0da.png)


SIZESではリクエスト・レスポンスそれぞれヘッダーとボディのサイズが表示されます。
![charles_proxy_008.png](https://qiita-image-store.s3.amazonaws.com/0/33988/9787a34b-5ff9-46d2-ebf7-6f02f4a1c7c0.png)


TIMESは最初は非表示になっていますが、タップすると表示されます。通信にかかった時間が表示されます。
![charles_proxy_009.png](https://qiita-image-store.s3.amazonaws.com/0/33988/eaebf69d-c5e3-c463-bdd9-40beceae6fba.png)


REQUEST HEADERも表示されます。
![charles_proxy_010.png](https://qiita-image-store.s3.amazonaws.com/0/33988/00e2bd3c-4735-b154-995a-9aa5db911d6c.png)


もちろんRESPONSE HEADERも表示されます。
![charles_proxy_011.png](https://qiita-image-store.s3.amazonaws.com/0/33988/47fd2323-07d4-cc93-c3b0-79efcea1d461.png)


RESPONSE BODYは「View body」をタップすると表示されます。
![charles_proxy_012.png](https://qiita-image-store.s3.amazonaws.com/0/33988/f5a0bd85-f9d7-83d7-1843-bc5adc2917a6.png)


右上のボタンをタップすると内容を別のアプリやMacに共有できます。
![charles_proxy_013.png](https://qiita-image-store.s3.amazonaws.com/0/33988/ffc3dae8-6eaa-e3d9-f39a-8c0e7334e7e4.png)

### HTTPS通信のキャプチャ

続いてHTTPS通信をキャプチャしてみます。今回は動作確認として<a href="http://zipaddress.net/">郵便番号-住所検索API</a>を使用して岩本町の郵便番号で住所を検索してみました。

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

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

初期状態ではSSL Proxyingが無効になっているため、このままでは通信の内容を見ることはできません。そこでまずは「Enable SSL Proxying」をタップします。
![charles_proxy_014.png](https://qiita-image-store.s3.amazonaws.com/0/33988/7e9f78a7-2eb1-f359-c178-173bfb361189.png)


Charles CA Certificateをインストールして信頼する必要がある旨のメッセージが表示されるので「Settings」をタップします。
![charles_proxy_015.png](https://qiita-image-store.s3.amazonaws.com/0/33988/cc51edc8-c54b-700b-ae45-cfd8fd43ff67.png)


「Settings」が開くので「SSL Proxying」をタップします。
![charles_proxy_016.png](https://qiita-image-store.s3.amazonaws.com/0/33988/f2405808-8a6f-47bf-4c8d-98ad0a3c2690.png)


「Install SSL Certificate」をタップします。
![charles_proxy_017.png](https://qiita-image-store.s3.amazonaws.com/0/33988/1483d9ae-278d-7582-3905-6b717c6f4783.png)


「許可」をタップします。
![charles_proxy_018.png](https://qiita-image-store.s3.amazonaws.com/0/33988/49da8340-6f0b-ad70-4d0c-450cdec51124.png)


プロファイルをインストールします。
![charles_proxy_019.png](https://qiita-image-store.s3.amazonaws.com/0/33988/eb641db8-b5e9-23ab-6b4b-b2619560a8a6.png)


パスコードを入力します。
![charles_proxy_020.png](https://qiita-image-store.s3.amazonaws.com/0/33988/cd51d8db-ea91-114c-bba8-3198bb6aef67.png)


「インストール」をタップします。
![charles_proxy_021.png](https://qiita-image-store.s3.amazonaws.com/0/33988/28923332-25e3-1d47-7246-5688a82b1d3e.png)


もう一度「インストール」をタップします。
![charles_proxy_022.png](https://qiita-image-store.s3.amazonaws.com/0/33988/e590e65e-a11e-4375-e491-21550055fb32.png)


完了をタップします。
![charles_proxy_023.png](https://qiita-image-store.s3.amazonaws.com/0/33988/dc0e79c2-02c0-da64-180c-e361cfdc89bd.png)


続いてインストールした証明書を信頼する必要があります。設定アプリの一般 > 情報 > 証明書信頼設定をタップします。
![charles_proxy_024.png](https://qiita-image-store.s3.amazonaws.com/0/33988/8661a06e-e0f9-f472-42c2-4a8df348d07e.png)


「ルート証明書を全面的に信頼する」でCharles ProxyをONにして「続ける」をタップします。
![charles_proxy_025.png](https://qiita-image-store.s3.amazonaws.com/0/33988/0a1585f1-dfb8-f85f-345a-11aa77d5ea7d.png)


再度セッション画面を開くと、SSL Proxyingは有効になっていましたが該当のリクエストは表示されませんでした。
![charles_proxy_026.png](https://qiita-image-store.s3.amazonaws.com/0/33988/1adeced8-3183-20fa-4020-6f0325211f13.png)


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

すると、ちゃんと該当のリクエストが表示されました。
![charles_proxy_027.png](https://qiita-image-store.s3.amazonaws.com/0/33988/f6a5b933-8196-c559-c8cb-f80e7483ef6e.png)


通信内容もちゃんと見れました。
![charles_proxy_028.png](https://qiita-image-store.s3.amazonaws.com/0/33988/1befd74b-9a69-fef0-63ea-43f29f3f44f5.png)

![charles_proxy_029.png](https://qiita-image-store.s3.amazonaws.com/0/33988/ef336188-b3ba-2f4d-1d6a-1e2da3615378.png)

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

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