この記事は Postman Advent Calendar 2023 のシリーズ 2、11日目の記事です。
Web API を介してフロントエンドアプリと通信するサーバーを運用していて、その API の仕様が明らかではないけれども、デバッグを行う必要がある状況だったとすると、あなたはどうしますか？ あるいは、同じように Web API の詳細仕様が得られない外部システムにアクセスする、フロントエンドアプリを開発しなければいけない状況になったら、どうでしょうか？
こんな時、ブラウザーの DevTools（開発者ツール）を使って、その API に対するトラフィックを覗き見て、ヘッダーやリクエストパラメーター、レスポンスを確認するということがよく行われます。しかし、こんなリバースエンジニアリングが必要な状況で、とても役に立つのが Postman インターセプターです。
Postman インターセプターは、Postman デスクトップアプリと連携して機能するブラウザー拡張機能です。Postman インターセプターを使うと、ブラウザーのネットワークトラフィックからリクエストと Cookie を直接キャプチャして、Postman コレクションを生成することができます。
Postman インターセプターのインストール
Postman インターセプターは、現在よく使われている次のブラウザーに対応しています。各リンクをクリックすると、それぞれのブラウザーの拡張機能をインストールできます。
古いバージョンの Postman や Linux 版では、上記に加えてインターセプターブリッジのインストールが必要です。
拡張機能のインストールが完了すると、ブラウザーのツールバーに Postman アイコンが表示されます。アイコンをクリックすると、Postman インターセプターの設定画面が表示されます。
トラフィックのキャプチャ
拡張機能の設定画面に緑色のランプと「Ready to capture」の文字が表示されていれば、キャプチャの準備ができています。ここで「Start Capture」ボタンを押すと、ブラウザーの全トラフィックが Postman インターセプターによってキャプチャされ、Postman デスクトップアプリの中で記録されます。
オプションとして、プルダウンメニューからキャプチャする HTTP メソッドタイプを限定したり、キャプチャするドメインを正規表現でフィルタリングすることもできます。
キャプチャを終了するには「Stop Capture」ボタンをクリックします。そうするとセッションが終了して、自動的に Postman デスクトップアプリの画面に誘導が行われます。
結果を Postman デスクトップアプリで表示
さて、ここからが強力です。「Interceptor debug session」と名付けられたタブの中に、キャプチャされたすべてのリクエストの情報が含まれています。このタブは、画面左サイドバーの「履歴」から呼び出すこともできます。
「概要」タブでは、キャプチャしたリクエストを「メソッド」「ドメイン」「コンテンツタイプ」ごとに集計した概要をグラフで表示することができます。
「リクエスト」タブでは、リクエストを様々なフィルタを適用して絞り込めるほか、各リクエストをクリックすると、ヘッダーやパラメーター、ボディの詳細が表示されます。
さらに、リクエストにチェックボタンを入れて画面右上の「リクエストを保存」ボタンをクリックすると、選択したリクエストをコレクションとして保存できます。ダイアログが開きますので、既存のコレクションに保存するか、新しいコレクションとして保存するかを選べます。
一旦コレクションとして保存してしまえば、あとはリクエスト送信を再現するもよし、パラメーターを変えてレスポンスをチェックするのもよしです。
さあ、今日から Postman インターセプターを使いこなして、効率よくデバッグしていきましょう。