【検証ツール利用】外部サイトにPOST送信した値を確認する

2024-12-02Google Chrome, HTML

はじめに

システム開発推進部システム開発第一Gの望月です。

先日、自社のウェブサイトから外部のサイトに対してPOST送信を行った時に、HTMLのinputタグのvalue属性にセットした値を正確に渡せているかどうかを検証したい場面がありました。
ただ、送信先は外部サイトであるため受信側の環境に入って確認することはできないし、受信データの確認を依頼をするのも手間がかかってしまうため送信側から確認をしたい、という状況でした。

結果として、ブラウザの検証ツールを使って送信側からでも確認をすることができました。

以降はGoogle Chromeの検証ツールを使用して確認する方法と解説になります。
他ブラウザの検証ツールの場合、手順や確認できる内容が異なる場合がありますのでご注意ください。

方法

以下のようなフォームを用いて、指定した2つの値を https://xxxx.com/index.phpにPOST送信したいとします。

<button type="submit">POST送信</button>

</form>

送信側のサイトにいる状態でブラウザの検証ツールを開く
↓
検証ツールを開いたままの状態でフォームの送信を実行する
↓
https://xxxx.com/index.phpに遷移後、検証ツール内のネットワークパネルを選択

↓
確認したいリクエストを選択
※ここではindex.php

↓
ペイロードタブから実際に送信されている値を確認
methodのパラメータとしてpostが、testのパラメータとしてtest-valueが渡っています

ネットワークパネル概要

ネットワークパネル

今回使用したネットワークパネルでは、検証ツールを開いた後にそのページ内で行われた全通信のログを確認することができます。
リクエストを送ったものについても送られてきたものについても表示されるため、今回のように受信側のウェブサイトにて受け取ったvalueを確認することができます。

各ログの確認

「名前」の各項目をクリックすると、それぞれの通信内容の詳細を確認することができます。

各メニューの概要

項目	概要
ヘッダー	HTTPヘッダー情報が表示されており、リクエストの送信元や受信先などを確認できる。
ペイロード	POSTやPUTなどのデータを含むリクエストに関して、具体的なデータの内容を確認できる。
プレビュー	レスポンスの内容を視覚的に確認でき、画像やHTMLページなどが表示される。
レスポンス	整形等がされていないレスポンスの純粋なデータを確認できる。
イニシエーター	リクエストがどのように発生したかを確認でき、リクエストの発生源であるファイルやコードの行を特定することができる。
タイミング	リクエストが発生・終了したタイミングと、どの通信にどれくらいの時間が使われたかなどの情報を確認できる。
Cookie	リクエストやレスポンスにCookieが含まれている場合、その詳細情報を確認できる。

補足

通信ログ記録の有効化

ネットワークパネル左上のボタンが赤くなっていれば、通信ログの記録が有効化されています。
赤くなっていない場合はクリックで記録を有効化できます。

キャッシュの無効化

「キャッシュを無効化」にチェックをいれると、ブラウザキャッシュを無視して常にサーバーから最新のデータを取得できます。
キャッシュが有効のままだと、キャッシュされたリソースはネットワークパネルでリクエストが表示されなかったり、読み込み時間を正確に計測できないなどが発生するため、無効化しておくのが良さそうです。