初代編集長ブログ―安田英久

HTTPリクエスト/レスポンスとは? HTTPヘッダーを理解しよう

HTTPは「HTTPリクエスト」と「HTTPレスポンス」に分けて考えます。これらは一体どのようなものなのか? よく耳にするリファラー(Referer)やクッキー(Cookie)などはどんな働きをしているのか? HTTPヘッダーを理解しておくとサイト上での仕組み作りの視野が広がるかもしれません。また、知っておくと役に立つステータスコードやHTTPヘッダーの確認方法も紹介します。

41 224 1370

今日は、少し技術的な話ですが、Web担当者も知っておくといい知識を。テーマは「HTTPヘッダー」です。知らなくてもWebサイトは作れますが、知っておくとサイト上での仕組み作りの視野が広がるかもしれません。

ブラウザでWebページを表示するときに、ブラウザはWebサーバーと通信しています。そのときに使われるのが「HTTP」というルールです。

HTTPは「HTTPリクエスト」と「HTTPレスポンス」に分けて考えます。ブラウザがサーバーに「このページを見たい」と頼む通信が「HTTPリクエスト」で、そのリクエストに応えてサーバーがブラウザに返す通信が「HTTPレスポンス」です。

HTTPリクエスト

まず、ブラウザ → サーバーの「HTTPリクエスト」から説明しましょう。

HTTPリクエストはブラウザが送るものですから、HTTPリクエストを作るのはブラウザです。サーバーは、受け取ったHTTPリクエストの内容からどんな情報を返すかを判断します。

HTTPリクエストには「HTTPリクエスト行」「HTTPヘッダー」「データ本体」の3つのパートがあります。

HTTPリクエストの1行目が、リクエスト内容を示す「HTTPリクエスト行」です。ここには、「メソッド」「URL」「HTTPのバージョン」の3つの情報が含まれています。
「メソッド」はWebではほとんどの場合「GET」で、この場合、HTTPリクエストでは「データ本体」は送られません。メソッドが「POST」の場合（フォームから情報を送信するなどでmethod="POST"が指定されている場合）は、HTTPヘッダーの後にデータ本体が続きます。
2行目以降が「HTTPヘッダー」で、次のようなものが代表的です。
- ユーザーエージェント名（User-Agent）
  ブラウザの種類やOSの情報。アクセスしているのがブラウザではなく検索エンジンのクローラの場合、「Googlebot」などの名前が入ります。
- リファラ（Referer）
  どのページから発生したリクエストなのかを示します。よく知られているのは、ページAにあるリンクをクリックしてページBに行った場合に、ページBへのHTTPリクエストにリファラーとしてページAが入ることです。ほかにも、ページCを表示する際にページ内で使われている画像をリクエストする際に、画像のHTTPリクエストにリファラーとしてページCが入っています。
- 更新されていたら（If-Modified-Since）／同じでなければ（If-None-Match）
  ブラウザは、一度表示したデータを「ローカルキャッシュ」として保存しておき、同じデータは何度も通信して取得しなくてもいいようにしています。そのときに、ローカルキャッシュのデータが変更されていないかチェックするために、ファイルの変更日付や管理情報をリクエストに含めておきます。すると、「更新されていなければその旨教えて」という意味になります。
- クッキー（Cookie）
  ブラウザに保存されているクッキーデータは毎回サーバーに送られています。ログイン状態を続けられるのは、ログイン時にサーバーから送られたクッキーをブラウザが保存しておいて、リクエストの際に送っているからですね。
- 受け取り希望（Accept、Accept-Language、Accept-Encoding、Accept-Charset）
  どんなデータを受け取りたいか、画像の種類や、言語、文字コードなどの希望を伝えます。英語バージョンと日本語バージョンなど複数の内容を提供している場合、サーバーはこの情報を元に適切な情報を返したり、動的なページでうまく提案したりできます。

HTTPレスポンス

次に、サーバー → ブラウザの「HTTPレスポンス」を説明します。

HTTPレスポンスはサーバーがブラウザに送るものですから、HTTPレスポンスを作るのはサーバーです。ブラウザは、受け取ったHTTPレスポンスを処理して画面に表示します。

HTTPレスポンスには「レスポンス状態行」「HTTPヘッダー」「データ本体」の3つのパートがあります。「データ本体」は、みなさんが通常見ているHTMLや画像のデータです。実際にはブラウザは、データ本体の前に「レスポンス状態行」と「HTTPヘッダー」を受け取っていますが、通常、画面には表示してくれません。

HTTPレスポンスの1行目が、リクエストに対する返答の状態を示す「レスポンス状態行」です。ここには、「状態コード」（「HTTPステータスコード」とも呼ばれる）などが含まれます。
HTTPステータスコードは3桁の数字で表されます。よく使われるステータスコードは、次のように分類されます。
- 200番台は成功
  - 200：OK、データを送ります
- 300番台はリダイレクト
  - 301：新しい場所から取得してください（今後もずっと）
  - 302：新しい場所から取得してください（今回だけ）
  - 304：変更されていません（データ本体は送られない）
- 400番台はクライアント側のエラー
  - 401：ユーザー認証が必要です
  - 403：アクセスが禁止されています
  - 404：見つかりませんでした
- 500番台はサーバー側のエラー
  - 500：内部エラー
  - 503：現在はサービス提供不可能
「HTTPヘッダー」は、データ本体の前に送られてくる、各種の状態を示す情報が入れられている部分です。HTTPレスポンスの代表的なHTTPヘッダーには次のようなものがあります。
- コンテンツタイプ（Content-Type）
  データがHTMLなのか画像なのかや、文字コードなどの情報。
- 再利用期限（Expires）
  取得したデータを再度サーバーに問い合わせなくてもブラウザが再利用していい期限（キャッシュの制御に使われる）。
- データの最終更新日時（Last-Modified）やエンティティ情報（ETag）
  HTMLや画像などがいつ更新されたものかの情報や、サーバー上のファイルの場所ID、ファイルのサイズ、更新日時などから算出した、更新チェック情報。次回同じデータをリクエストする際に、これらの情報を使って更新されているかどうかを確認します。
- キャッシュ制御（Cache-ControlやPragma）
  ブラウザや通信を橋渡しするプロキシが、データのキャッシュをどう扱うかの情報。
- 接続状況（Connection）
  接続を持続するのか（keep-alive）、毎回接続を切断するのか（close）。ブラウザもサーバーもHTTPバージョン1.1の持続接続（keep-alive）を使える場合、通信のやりとりが効率良くなります。
- 移動先（Location）
  リクエストと違う場所からデータを取得するように示す指示。新しい場所のURLが含まれます。いわゆるリダイレクト先を示す情報です。

HTTPヘッダーの小ネタ

ちなみに、HTTPヘッダーに関する小ネタとして、次のようなものがあります。

「リファラー」の綴りは本当は「referrer」が正しいのだだけれども、当初間違って使われた「referer」がそのまま使われている。
HTMLの<meta http-equiv="xxx" content="xxx">タグは、「この内容がHTTPレスポンスのHTTPヘッダーに含まれていたとして扱いなさい」という意味。だから、meta http-equivでContent-TypeやCache-Controlを指定するんですね。

HTTPヘッダーの確認方法

いかがでしょうか、「HTTPヘッダー」や「ステータスコード」といった用語に少しなじみができたでしょうか？

実際にどんなHTTPヘッダーがやりとりされているのかを確認するには、
http://web-sniffer.net/
にアクセスして、サイトのURLを入力してみるといいでしょう。

または、ブラウザにFirefoxを使ってアドオンをインストールするのが簡単です。HTTPヘッダーを確認できるアドオンには次のようなものがあります。

Firebug
https://addons.mozilla.jp/firefox/details/1843
インストール後、[ツール]＞[Firebug]＞[Firebugを開く]でFirebugを開いて[接続]タブを[有効]にし、目的のサイトへアクセス。各通信が表示されるので左の[+]ボタンで項目を開いて[ヘッダ]タブを確認。使い終わったら[接続]タブを[無効]にしておくといい。
Live HTTP Headers
https://addons.mozilla.jp/firefox/details/3829
インストール後、目的のサイトへアクセス。[ツール]＞[ページ情報]メニューでダイアログボックスを開いて[ヘッダ]タブを確認。
または、[ツール]＞[Live HTTP Headers]メニューでダイアログボックスを開いた状態で目的のサイトへアクセス。
Tamper Data（英語版のみ）
https://addons.mozilla.org/en-US/firefox/addon/966
インストール後、[ツール]＞[Tamper Data]でTamper Dataを開いて目的のサイトへアクセス。各通信が表示されるので確認したい項目をクリックすると下にヘッダーが表示される。[Start Tamper]でリクエストのヘッダー内容を偽装することも可能。