HTTP Catcher を使って iPhone だけで通信を書き換える


# はじめに

開発をしていると、通信内容を見てデバッグするという状況はかなりあると思います。

特にモバイル開発だと、パソコンを介して通信を覗くのが一般的で、そのためのプロキシツールが多く存在します。以下は今までに私が使用してきたものです。

https://www.charlesproxy.com/

https://mitmproxy.org/

https://proxyman.io/

これらのツールは無料で多くのことができますが、**設定するのが少し面倒な側面**もあります。

## 課題

特にリモートワークが増えた昨今では、社外からの接続のためにVPNを繋ぐ会社も多いと思います。

その時に

- 端末のWifiを接続先PCと同じに切り替える
- 繋ぐためにその都度でIPとポートを手動入力する
- 社内ではうまく動作していたのにVPNとバッティングして動かない
- 同僚は繋がるのに、なんか知らんけど自分のは動かない（冗談のようであるw）

パソコンを経由せずに**直接スマホで通信を監視**すれば良いじゃないかという話です！この煩わしさから解放されるために便利なのが **HTTP Catcher** です。

- Before

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/5ca6ed04-e8f3-f05a-b49f-2d1e141feabb.png" width=650>

- After

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/420d3ea7-aab1-9c7a-39e3-915edca21979.png" width=400>

<br>

通信の中身を見るためだけなら、有料ですが Charles の iOS のみで動くアプリなど、App Store に出回っているいくつかのアプリでも十分に可能です。

https://apps.apple.com/us/app/charles-proxy/id1134218562

今回はリクエストやレスポンスに対して、何かしらのアクションを仕込むを想定しており、それが**アプリ上だけで完結するもの**を条件としています。

もしかしたら、類似アプリがあるかもしれませんが、いくつか触った中でかなり手軽に使えたので、なかなかおすすめです。

# HTTP Catcher を使う

## 0. 前置き

先に言っておきますが、通信を見たりするのは無料で出来ます。ただし、書き換え機能は**有料**です。

たったの600円で業務効率が上がることを考えたり、安いもんだと思います。

https://apps.apple.com/us/app/http-catcher/id1445874902


## 1. セットアップ

まずは、ストアからインストールしましょう。
通信を見るために、プロファイルをダウンロードする必要があります。

流れは以下になります。

|①|②|③|
|:---:|:---:|:---:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/42a9aa1b-594f-1149-1470-e9899f55e4a7.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/b140d954-3f10-e733-3132-16e03429bc26.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/ecd49211-580d-a110-b3d1-b3890c78b8d7.png" width=300>|


① 試しにトラフィックをオンにすると、アラートが出るのでそれに従います
② ブラウザが開いてインストールの許可が出るので「許可」します
③ ダウンロードが完了すると完了通知が出ます

<br>

続いてダウンロードしたプロファイルを端末側にインストールする必要があります。

|④|⑤|⑥|
|:---:|:---:|:---:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/e6d3be78-e9ba-fba6-4c3d-54937db7fb31.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/5a2e985c-fd99-76dd-c181-766dbc62cecd.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/d3097fc5-5bdf-d4e4-1848-e2e5e09bc3e6.png" width=300>|

④ 何もしていなプロファイルがあると、設定のトップに出てきます
⑤ インストールボタンを押して端末にインストールします
⑥ インストールが完了すると、完了画面が出ます

<br>

最後にプロファイルを信頼します。（しなくてもアプリによっては動く）

|⑦|⑧|⑨|
|:---:|:---:|:---:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/8c3806f8-516a-3b96-2687-65093a01b629.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/b6efdba7-9400-cbdc-fb75-75e5195cc46c.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/ecbb69f6-7b69-1f32-cb03-fb67041a771a.png" width=300>|


⑦ アプリを起動し直すと、信頼するように警告が出ます
⑧ 設定画面を開いて情報から証明書の設定を開きます
⑨ 信頼して完了です

<br>

上記の過程で、途中アプリから VPN の設定へ移動させられる画面がありますが、これは特に意識しなくても大丈夫です。HTTP Catcher を起動してオンにすると、勝手に VPN 接続されるので、これを意識する必要はないからです。（そのはず）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/dbcb9c1a-877a-23b8-6799-15f5462005e0.png" width=200>


## 2. 使ってみる

アプリを起動して監視をオンにします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/95655367-a767-dcc6-32a9-739862c1289a.png" width=200>

試しにブラウザで Qiita にアクセスしてみます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/5b8a6902-f2fc-c2d2-61d7-781743e9dc5a.png" width=200>

そうするとそこでの通信が一覧で取得され、詳細まで見ることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/720c6cce-4fa5-1e25-a774-0b836b6ec4b7.png" width=200> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/4d05726f-30aa-8b89-94c1-6a2ad4e9d41f.png" width=200>

この辺は他のプロキシアプリでも同じことができるとは思いますが、無事に中身を見ることができました！

## 3. リクエストを編集してみる

最初に記載した通り、これは課金（600円）機能なので、先にアプリ内で購入してください。

「More」タブにある「Rewite」からリクエストを編集できます。

|①|②|③|
|:---:|:---:|:---:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/fee87dab-4ac4-c7de-5fbb-fc415f48a9dd.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/a7ae30a6-b38c-17ee-c1ef-5709fa3b2d74.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/3c0ca31b-431b-e7f7-13ff-7f3e26b09339.png" width=300>|

① アプリ内にある「Rewite」ページへ行きます
② 「＋」を押してから「Add Rerite」を選択します
③ 書き換えページで各種の設定を行います

<br>

書き換えの内容を具体的にみていきましょう

|④|⑤|
|:---:|:---:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/7e5155ab-a7b2-afd0-1fbf-159c1a14b67f.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/2d09627c-3081-4ce0-dc23-4f80a8f2c920.png" width=300>|

④ 書き換えたい通信の内容を指定します（メソッド、エンドポイント、パスなど）
⑤ 書き換えルールを設定します（ヘッダー、パラメーター、ボディなど）

<br>

設定すると最初の画面に反映されていることがわかります。これを保存することで設定は完了です。

|⑥|⑦|
|:---:|:---:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/97521378-ec34-9f39-9895-e06864883f4a.png" width=300>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/b3290ed6-74a4-1b21-91f8-50fae36bcb96.png" width=300>|

⑥ 保存するのを忘れないようにしましょう
⑦ スイッチをオンにしないと反映されないので注意しましょう

私の手元では、実際にリクエストのヘッダーが追加されていました。

# 終わりに

他にもいくつかの機能がありますが、ちゃんとまだ使いきれていません...

多くの機能は他のプロキシツールと同じだとは思いますが、**iPhone の端末のみで設定できる**のはとてもありがたいですね！