GET送信とPOST送信の違い、わかりやすく

こんにちは、オリンピック休暇(オリンピックは無い)で4連休に入りましたね。もともと自粛中なので僕はいつも通りプログラミングの勉強したり、プライムビデオで映画見たり、PUBG Mobileやったりしています。

最近はVue.jsにハマり気味で、いよいよVue/cliによるフレームワーク開発の勉強にとっかかっています。(CakePHPの勉強も半ばなので絶対途中でストップしそうな嫌いがあるけど気にしない)

今回は、webプログラマーの基本、「GETとPOSTの違い」についてまとめてみます。というのも、来週「HTML5プロフェッショナル認定試験レベル1」の本番が控えているのでそのついでにこちらでも基本をまとめながら振り返っとこうかなと。

webページを取得する仕組み

そもそも、webサイトを閲覧している時、どのような通信が行われているのでしょうか。

まず、ブラウザでURLを入力すると、そのURLのから判別されたサーバーと通信が開始されます。(サーバーまで行き着くまでの手順は割愛します)

こちらのパソコン・スマホ(このような端末をクライアントと呼びます;以後クライアント)からサーバーあてにエコー要求が渡されます。

通信が正常に繋がったら、サーバーからクライアントにエコー応答を返します。エコー応答が返ってきたら通信が成功したことを意味します。

通信が確立されたのが確認できたクライアントはリクエストを送ります。リクエストとは、データを送信してもらうように要求することです。

リクエストを受けたサーバーはレスポンスを返します。このレスポンスによってwebページや画像などのデータが送信されます。

ここで行われるリクエストには、GETメソッドとPOSTメソッドの2種類があります。

以上のような流れでwebサイトを閲覧しているということですね。意外と通信が行ったり来たりしています。

ここに、セキュリティを強化したり、キャッシュの設定をすることで通信はより複雑になっていきます。YouTubeなどの動画ストリーミングや、ビデオチャットだとさらに特殊になっていきます。

GETメソッドとPOSTメソッドの違い

リクエストの中身を確認します。

GET /search?id=test&password=12345678 HTTP/1.1
Host: example.jp:8080
POST HTTP/1.1
Host: example.jp:8080

(リクエストボディ)

上がGETメソッド、したがPOSTメソッド時のメッセージです。

2つの違いは、リクエストデータがどこにあるかです。GETメソッドでは1行目に「id」「password」の入力データが見えていますね。

この部分をクエリーパラメーターと言います。クエリーパラメーターはwebサイトで検索フォームを入力した時などにurlにくっついているので気になった方はみてみてください。

一方、POSTメソッドではクエリーパラメーターがありません。代わりにメッセージボディがあります。POSTメソッドではここにデータが格納されて送信されます。

両者の違いは、見えるか見えないかです。

どちらにもある上の2行をリクエストヘッダーと言いますが、このリクエストヘッダーは簡単に見ることができます。「ブラウザでリクエストヘッダー・レスポンスヘッダーを見る方法」を検索してみてください。

恐ろしいことに、このヘッダー部分は簡単に覗き見されてしまう可能性もあります。その時に、上のサンプルのようにid名とパスワード名が丸見えの状態だったらセキュリティ上よろしくないですね。

そのために、メッセージボディに情報を隠して流出を防ぐ働きをするのがPOSTメソッドの役割です。

なぜGETメソッドがあるのかというと、受け渡しをメッセージヘッダーだけにすることでパフォーマンスが向上したり、URL上でデータのやりとりができるため、開発性が向上したりとメリットもあります。

流出させたくないデータはPOSTメソッドで送受信する仕組みにすべきですね。