HTTPメッセージ（リクエストとレスポンス）の中身について

こんにちわ

がじぇったー (@hackmylife7) | Twitter

です。

gadgeterkun.hatenablog.com

の続きです。

HTTPメッセージの中身

昨日はクライアントとサーバの役割について書きました。
リクエストとレスポンスのやりとりをまとめて「HTTPメッセージ」と呼びます。

今日はクライアントとサーバがやりとりをする際の
HTTPメッセージの中身ついて書いていきます。

curlコマンドでHTTPメッセージを確認する

"curl -v -s URL"でHTTPメッセージを確認できます。
jqコマンドで整形すると見やすくなります。

>から始まるのがリクエストのメッセージで<から始まるのがレスポンスのメッセージです。

❯ curl -v -s https://gadgeterkun.hatenablog.com | jq .
* Rebuilt URL to: https://gadgeterkun.hatenablog.com/
*   Trying 13.115.18.61...
* TCP_NODELAY set
* Connected to gadgeterkun.hatenablog.com (13.115.18.61) port 443 (#0)
* TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384
* Server certificate: hatenablog.com
* Server certificate: Sectigo RSA Domain Validation Secure Server CA
* Server certificate: USERTrust RSA Certification Authority
> GET / HTTP/1.1
> Host: gadgeterkun.hatenablog.com
> User-Agent: curl/7.54.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Server: nginx
< Date: Sat, 12 Oct 2019 02:13:32 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 67556
< Connection: keep-alive
< Vary: Accept-Encoding
< Vary: User-Agent, X-Forwarded-Host, X-Device-Type
< Access-Control-Allow-Origin: *
< Content-Security-Policy-Report-Only: block-all-mixed-content; report-uri https://blog.hatena.ne.jp/api/csp_report
< P3P: CP="OTI CUR OUR BUS STA"
< X-Cache-Only-Varnish: 1
< X-Content-Type-Options: nosniff
< X-Dispatch: Hatena::Epic::Web::Blogs::Index#index
< X-Frame-Options: DENY
< X-Page-Cache: hit
< X-Revision: a7694746800267be0e2d318311d7b13e
< X-XSS-Protection: 1
< X-Runtime: 0.023645
< X-Varnish: 987737655 993663699
< Age: 15
< Via: 1.1 varnish-v4
< X-Cache: HIT
< Cache-Control: private
< Accept-Ranges: bytes
<
{ [15613 bytes data]
* Connection #0 to host gadgeterkun.hatenablog.com left intact

リクエストメッセージ

リクエストメッセージの部分は下記の通りです。

> GET / HTTP/1.1
> Host: gadgeterkun.hatenablog.com
> User-Agent: curl/7.54.0
> Accept: */*

一行一行見ていきましょう。

> GET / HTTP/1.1

リクエストメッセージの一行目は「リクエストライン」と呼び、

• メソッド(GET)
• リクエスト(URI: /)
• プロトコルのバージョン（HTTP/1.1）

から成り立ちます。

> Host: gadgeterkun.hatenablog.com

リクエストの二行目以降はヘッダが続きます。
ヘッダは「名前：値」という構成をとり、Host:gadgeterkun.hatenablog.comは
リクエストを送る先を指定します。
ちなみにHostヘッダは必須でリクエストの送信先ホスト名やポート番号を指定します。

つまりgadgeterkun.hatenablog.comのパス（/）に対して、HTTPでGETすなわちページの情報を取得する、
という意味になります。

GETやPOSTなどのHTTPメソッドについては明日以降また書きます。

> User-Agent: curl/7.54.0
> Accept: */*

二行目以降はHTTPヘッダです。
> User-Agent: curl/7.54.0
はWebブラウザの固有情報を表します。今回はcurlを使っているので、curlと表示されていますが、
プラウザでアクセスすると以下のように表示されます。

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

PCとスマホではハードに合わせてWEBのページが表示されると思います。それはサーバ側がこのUser-Agentヘッダを見て、対応するコンテンツを返しているからです。

> Accept: */*
は受信可能なレスポンスデータのメディアタイプを指定します。
省略した場合は，「*」が指定されたと見なします

例えば、以下のように-HでヘッダーのAcceptを"Accept: application/json"と指定すると、
レスポンスはjsonのみ受け取ると指定できます。

curl -v -s -H "Accept: application/json"  https://gadgeterkun.hatenablog.com | jq .

レスポンスメッセージ

サーバからかえってくるレスポンスのメッセージを見ていきましょう
レスポンスメッセージは以下でした。

< HTTP/1.1 200 OK
< Server: nginx
< Date: Sat, 12 Oct 2019 02:13:32 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 67556
< Connection: keep-alive
< Vary: Accept-Encoding
< Vary: User-Agent, X-Forwarded-Host, X-Device-Type
< Access-Control-Allow-Origin: *
< Content-Security-Policy-Report-Only: block-all-mixed-content; report-uri https://blog.hatena.ne.jp/api/csp_report
< P3P: CP="OTI CUR OUR BUS STA"
< X-Cache-Only-Varnish: 1
< X-Content-Type-Options: nosniff
< X-Dispatch: Hatena::Epic::Web::Blogs::Index#index
< X-Frame-Options: DENY
< X-Page-Cache: hit
< X-Revision: a7694746800267be0e2d318311d7b13e
< X-XSS-Protection: 1
< X-Runtime: 0.023645
< X-Varnish: 987737655 993663699
< Age: 15
< Via: 1.1 varnish-v4
< X-Cache: HIT
< Cache-Control: private
< Accept-Ranges: bytes

ステータスライン

< HTTP/1.1 200 OK

レスポンスメッセージの一行目はステータスラインと呼び、

• プロトコルのバージョン
• ステータスコード(200)
• テキストフレーズ

から成り立ちます。

ステータスコード200は、リクエストが成功したことを意味します。
サーバ側にページがない場合は404、サーバの内部エラーにより、ページを表示できない場合は50xで返って来ます。

二行目以降はヘッダです。

ヘッダ

大事なポイントだけ記載します。

< Server: nginx

レスポンスを送るWEBサーバの種別です。

< Date: Sat, 12 Oct 2019 02:13:32 GMT

日付です。

< Content-Type: text/html; charset=utf-8

メディアタイプ(HTML)、文字エンコーディングはutf-8を指定します。

< Content-Length: 67556

コンテンツのサイズです。データ量を示します。

< Connection: keep-alive

Connectionの方法を示します。
keep-alive が設定されて送信されると、接続が維持され、後続のリクエストで再利用されます。

次はHTTPのメソッド、GETやPOSTなどを取り扱おうと思います。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか