モバイルアプリ開発で通信内容を確認する方法


# はじめに
モバイルアプリを開発している時に、通信の内容を確認したい場合はログに出力することが多いと思いますが、通信処理を行うところが多かったり、ライブラリを使っていたり、メソッドやコンテンツタイプなどのヘッダーの内容を確認したいとなると、ログだけでは難しくなります。

Packet Capture ツールや Proxy ツールを利用することになりますが、今回は、Proxy ツールである `OWASP ZAP` の使い方について紹介します。

#OWASP ZAP(OWASP Zed Attack Proxy)
OWASP(Open Web Application Security Project) が出している Proxy ツールで、公式ページは [こちら](https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project) です。
"Attack" とある通り、本来はWebアプリケーションの脆弱性をチェックするためのツールです。
オープンソースプロジェクトであるため、無料で使えます。

## インストール
[こちら](https://github.com/zaproxy/zaproxy/wiki/Downloads) よりそれぞれのプラットフォームのものをダウンロードします。
また、Java を必要としていますので、こちらも事前にインストールしておきます。
通信を直接制御しますので、Firewall やセキュリティソフトなどの設定を変更する必要があります。

## セッション
ZAP が起動するとセッションについて聞かれるので、「この時点で、セッションを保存せず操作します。」を選択します。
（英語表記になっている場合は「No, I do not want to persist this session at this moment in time」を選択。）

![ZAP_Session.png](https://qiita-image-store.s3.amazonaws.com/0/134810/99611799-2a34-bada-ec96-908336fe2fde.png "ZAP_Session.png")

## ダイナミック SSL証明書
HTTPS 通信の内容を確認するには証明書が必要となります。
**ツール -> オプション -> ダイナミック SSL証明書** を開きます。

![ZAP_SSL.png](https://qiita-image-store.s3.amazonaws.com/0/134810/05fc3529-72ab-3f5b-c031-f4e5ddb68bbb.png "ZAP_SSL.png")

すでに生成されていますので、PCの適当な場所に保存します。
この証明書を検証したい端末にインストールしておきます。

## ローカル・プロキシ
**ツール -> オプション -> ローカル・プロキシ** を開きます。
**Address** にPCに設定されているIPアドレスを入力します。
**ポート** は `8080` が既定値となっていますので、すでに利用しているサービスがあれば、適切な値に変更します。

![ZAP_LocalProxy.png](https://qiita-image-store.s3.amazonaws.com/0/134810/6ea0abeb-3368-6e65-c252-1bbaf18a4ea5.png "ZAP_LocalProxy.png")

DHCP などでPCのIPアドレスが変更され、ここに設定されているIPアドレスと異なるものになった場合は、起動時に警告が表示されますので、その場合は再度設定する必要があります。


# 端末の準備
## ダイナミック SSL証明書
先述してありますように、ZAP が生成したダイナミック SSL証明書をインストールします。
iOS は証明書をダウンロードして素直にインストールできますが、Android の場合は、バージョンによってはダウンロードしたものを通知ドロワーからインストールできないことがありますので、以下のように設定よりインストールします。
> 設定 -> セキュリティ -> ストレージより証明書をインストール -> 内部ストレージ -> Download -> 証明書ファイルを選択

## ネットワーク設定
ZAP がインストールされているPCと同一のネットワークに接続します。
上記の *ローカル・プロキシ* で設定した内容を端末のプロキシ情報に反映します。

* iOS
 設定 -> Wi-Fi -> (接続AP) -> HTTPプロキシの「手動」を選択。
 
 ![ZAP_iOS_Proxy.png](https://qiita-image-store.s3.amazonaws.com/0/134810/4988db97-3856-c560-e35e-2bfa9b1bdb86.png "ZAP_iOS_Proxy.png")

 
* Android
 設定 -> Wi-Fi -> (接続AP)長押し -> ネットワークを変更 -> 詳細設定項目 -> プロキシを「手動」に変更。
 ![ZAP_Android_Proxy.png](https://qiita-image-store.s3.amazonaws.com/0/134810/f4ea3847-60bb-1fd0-1f5c-93fe74a8fd0f.png "ZAP_Android_Proxy.png")


# 使い方
## 画面構成
画面は大きく４つに分けられます。

![ZAP_Screen.png](https://qiita-image-store.s3.amazonaws.com/0/134810/6f88b80b-eebc-14dc-35d2-a52ce6d8f61e.png "ZAP_Screen.png")

リクエスト履歴で選択したものが、リクエスト内容とレスポンス内容に表示されます。
また、リクエスト内容とレスポンス内容ともに上段にヘッダーが表示され、下段にボディーが表示されます。

## ブレークポイント
ある API のレスポンスの内容を変えたい場合やリクエストタイムアウトとなった時の動作を確認したい場合は、ブレークポイントを利用します。

### 追加／編集／削除
このような操作を行うことで、ブレークポイントを追加できます。

![ZAP_Breakpoint.png](https://qiita-image-store.s3.amazonaws.com/0/134810/31f4f76f-4422-3b29-7d16-c0cfbd3d5a0f.png "ZAP_Breakpoint.png")

対象のブレークポイントの右クリックメニューから編集と削除ができます。

![ZAP_EditBreakpoint.png](https://qiita-image-store.s3.amazonaws.com/0/134810/7464ec6c-0998-987d-5b2f-7900ffb6d58d.png "ZAP_EditBreakpoint.png")


### 操作
ブレークポイントの条件に一致した通信が行われると、このように関連するボタンがアクティブになるので、それぞれ必要な操作を行います。

![ZAP_BreakpointOperation.png](https://qiita-image-store.s3.amazonaws.com/0/134810/7b3f7369-2a84-aa89-3e49-b815a48761aa.png "ZAP_BreakpointOperation.png")


# まとめ
どうしても準備に手間がかかりますが、ZAP を利用することで通信内容をある程度細かく確認することができ、リクエストタイムアウトの確認だったり、連続して API を呼ぶ場合の制御だったりを比較的簡単に行うことができます。