【Fiddler】Windows 上で HTTP / HTTPS 通信をキャプチャする

本記事では Windows 上で HTTP / HTTPS 通信のリクエスト、レスポンスを確認したり、そのトラブルシューティング等に利用できる便利なツール「Fiddler」をご紹介します。

色々便利な機能はありますが、とりあえず今回の記事ではシンプルに導入からキャプチャ・保存するまでの流れをざっと紹介しようと思います。

# Fiddler について
Fiddler はタイトルにもあるように、HTTP および HTTPS トラフィックをログ記録できる Web Debugging Proxy ツールです。HTTPS の復号にも対応している点 (要設定) もトラシュー時には大変便利です。WebSocket も取得可能です。

なお、今回は Windows のみで利用できる Fiddler Classic という種類をご紹介します。
Mac でも利用可能な Fiddler Everywhere もありますが、こちらは今回は紹介しません。

# 本記事の流れ
<事前準備>
- [Fiddler のインストール](https://qiita.com/nt-7/items/c897e9460ef43af6ed14#1-fiddler-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [Fiddler のセットアップ](https://qiita.com/nt-7/items/c897e9460ef43af6ed14#2-fiddler-%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97)

<再現>
- [キャプチャ開始 -> 再現 -> キャプチャ終了](https://qiita.com/nt-7/items/c897e9460ef43af6ed14#fiddler-%E3%81%A7%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3)

<ファイルに保存 (任意)>
- [.saz 形式で保存](https://qiita.com/nt-7/items/c897e9460ef43af6ed14#%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%E3%82%92%E4%BF%9D%E5%AD%98-%E4%BB%BB%E6%84%8F)


## 1. Fiddler のインストール
以下サイトから、Fiddler Classic をダウンロードし、トレースを取得したい端末にインストールします。

  Download Fiddler Classic
  https://www.telerik.com/fiddler/fiddler-classic

## 2. Fiddler のセットアップ
1 . 接続元クライアントにて、Fiddler を起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/35aad59e-d02e-4589-3fd7-da9808df5367.png)

2 . [File] メニューの [Capture Traffic] のチェックを外し、ログ採取停止状態にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/c7efa3ac-97f3-f9b6-0756-558b56b2b522.png)

3 . [×] 印を押し、[Remove all] で一旦ログを削除します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/3be674f2-a56c-a03b-7082-093b1abc80d5.png)

4 . 画面右側のタブにある Filters - User Filter がオフになっていることを念の為確認します。

5 . Fiddler のメニュー バーから [Tools] - [Options] を選択します。

6 . HTTPS タブをクリックし、"Capture HTTPS CONNECTS" および "Decrypt HTTPS traffic" の
チェック ボックスをオンにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/f8c9fb1e-4def-3e04-a335-7ac02cfefcb0.png)

"Decrypt HTTPS traffic" のチェック ボックスをオンにすることで、以下の警告が表示されますので、Yes ボタンをクリックします。
"Fiddler generates a unique root CA certificate to intercept HTTPS traffic. You may choose to have Windows trust this root certificate to avoid security warnings about the untrusted root certificate. You should ONLY click 'Yes' on a computer used exclusively for TEST purposes."

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/693e9bac-4fcf-07ce-4279-4399c9b98231.png)

上記警告で Yes を選択すると、セキュリティ警告が表示されますので、"はい" を選択します。
これにより、個人ストア、および信頼されたルート証明機関ストアに発行者が "DO_NOT_TRUST_FiddlerRoot" である証明書が追加されます。

7 . 上記同 HTTPS タブ内の Protocols の欄をクリックし、今回は <client>; ssl2; ssl3; tls1.0; tls1.1; tls1.2 で指定しておきます。その後、OK ボタンをクリックし、Fiddler Options を閉じます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/28911bac-f5db-7e87-04b9-0f8f035b6dab.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/885f97a0-c2ae-51e4-ddc3-749f8c16f7bb.png)

## Fiddler でキャプチャ

0 . 再現に利用するブラウザにて、キャッシュや Cookie 等は削除します。一旦該当のブラウザを終了しておきましょう。また不要な他のアプリ等は停止しておきます。

1 . [File] より [Capture Traffic] をクリックし、トラフィックをキャプチャ開始します。
正常に Fiddler がキャプチャされている際は以下のように左下に [Capturing] と表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/6c28fbdf-dc27-00cf-8278-918868ad2598.png)

2 . 新たにブラウザを起動し、キャプチャしたい動作を再現させます。

3 . [File] メニューの [Capture Traffic] のチェックを外し、ログ採取停止状態にします。

このような感じでキャプチャされるので、それぞれクリックすると、右側の Inspectors タブにて、各リクエストとレスポンスの中身等詳細が見れます。レスポンス上部に表示される "Response body is encoded. Click to decode." でデコードを行うとレスポンスの中身が圧縮されていてもデコード前の中身を閲覧可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/c232c308-e09f-f715-8661-e5d84b248e6c.png)

## キャプチャを保存 (任意)
そのままキャプチャした通信を見るのは勿論可能ですが、例えばトラブルシューティング時では、誰かに Fiddler で取得したキャプチャを共有したいときもあるかと思います。

そんな時は Fiddler のメニュー バーから [File] - [Save] - [All Sessions] を選択し、.saz 形式でログを保存することも勿論可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/10942565-59a3-e375-cfb7-3fedd032c79c.png)

## 参考 : Fiddler でも実は見れる edge://net-export の NetLog
突然ですが、Edge や Chrome の調査では net-export の NetLog というネットワーク系のイベントに関するログを取得する事が可能です。実は edge://net-export や chrome://net-export の NetLog は実は Fiddler Classic でも拡張の機能をダウンロードすることで見ることが可能です。(POST request の body が含まれなかったりといった通常の Fiddler とは異なる制約はあるのでご注意ください)

net-export の取得手順は ​[net-export の使い方 (Japan Developer Support Internet Team Blog)](https://jpdsi.github.io/blog/internet-explorer-microsoft-edge/how-to-use-net-export/) に書いてあるため、こちらは省略します。

0. 前提 : [Fiddler のセットアップ](https://qiita.com/nt-7/items/c897e9460ef43af6ed14#%E6%9C%AC%E8%A8%98%E4%BA%8B%E3%81%AE%E6%B5%81%E3%82%8C)
1. [FiddlerImportNetlog](https://github.com/ericlaw1979/FiddlerImportNetlog/releases) の拡張機能をインストール
2. File > Import Serssions > net-export で取得した NetLog json ファイルを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/14edcf5f-89e5-fe53-d5c1-d72e2117c456.png)

以下のように NETLOG 特有のイベントも表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/427c08a1-1ab0-57dd-b7c7-51076e0f3b6c.png)

NETLOG イベントの /CAPTURE_INFO では以下のような情報も表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/65b3fa3a-88fc-6f46-1f5c-8c4c17675175.png)

他にはお馴染みの URL REQUEST や SOCKET の情報のリストも別途表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150728/517a2943-4e77-84f3-1ffb-1545ae52a101.png)

# まとめ
今回は Fiddler Classic の導入からキャプチャ、そして共有用に保存の仕方をご紹介しました。ぜひ Windows で HTTP (S) の通信をキャプチャしたいときなどはお試しください。

ちなみに、今回はシンプルなキャプチャのみの紹介でしたが、Fiddler では .saz 形式で保存したレスポンスを基に、別環境でも疑似的に (プロキシとして) 応答を返すことで、コンテンツをキャプチャ時のレスポンスを基に再現 (再生) するようなことも可能です。またブレイクを張るようなこともできるので、実は様々な用途でトラシューに利用できる便利ツールです！