HTTPとWebページ

この章で学ぶこと

• URLを開いてからページが表示されるまでの流れ
• HTTPリクエストとHTTPレスポンスの構造
• メソッド、ステータスコード、ヘッダーの役割
• HTTPSが保護するもの

Webページが表示されるまで

ブラウザにURLを入力してから画面が表示されるまでには、複数の処理があります。

1. URLを解析し、接続先のホスト名や方式を確認する
2. DNSでホスト名に対応するIPアドレスを調べる
3. サーバーとの通信路を作る
4. HTTPSなら、相手を証明書で確認して暗号化の準備をする
5. HTTPリクエストを送る
6. HTTPレスポンスを受け取る
7. HTMLを解析し、必要なCSS、JavaScript、画像などを追加で取得する
8. 内容を組み立てて画面へ描画する

一つのWebページを開く場合でも、通信が1回だけとは限りません。HTMLから参照されたファイルごとに追加のリクエストが発生します。キャッシュ済みのファイルは、再取得せずに利用されることもあります。

HTTPは要求と応答の決まり

HTTPでは、クライアントがリクエストを送り、サーバーがレスポンスを返します。

ブラウザ ── HTTPリクエスト ──▶ Webサーバー
ブラウザ ◀─ HTTPレスポンス ─── Webサーバー

次は簡略化したリクエストの例です。

GET /lessons/network HTTP/1.1
Host: www.example.com
Accept: text/html

GETはメソッド、/lessons/networkは対象のパスです。HostやAcceptのようなヘッダーは、接続先や受け取りたい形式などの付加情報を表します。

サーバーは、状態を示すステータスコード、ヘッダー、必要に応じて本文を返します。

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 52

<!doctype html><html><body>Network</body></html>

本文とヘッダーの間には空行があります。実際のHTTP/2やHTTP/3ではネットワーク上の表現が異なりますが、メソッド、ステータス、ヘッダー、本文という考え方は共通です。

よく使うメソッド

• GET：情報を取得する
• POST：データを送り、処理や新しい作成を依頼する
• PUT：指定した対象を送信内容で置き換える
• PATCH：指定した対象の一部を変更する
• DELETE：指定した対象の削除を依頼する

メソッド名だけで安全性が決まるわけではありません。サーバー側がアクセス権を確認し、入力を検証する必要があります。また、パスワードなどの秘密情報をURLのクエリへ入れると、履歴やログに残るおそれがあります。

ステータスコードを読む

ステータスコードの先頭の数字は、結果の大きな分類を表します。

範囲	意味	例
2xx	成功	200 OK、201 Created
3xx	転送やキャッシュ	301 Moved Permanently、304 Not Modified
4xx	クライアント側の要求に関する問題	400 Bad Request、404 Not Found
5xx	サーバー側の処理に関する問題	500 Internal Server Error、503 Service Unavailable

404が出たときは通信そのものが切れているとは限りません。サーバーまでは要求が届き、「その対象は見つからない」というHTTPレスポンスが返っています。

HTTPは状態を自動で覚えない

HTTPでは、それぞれのリクエストは基本的に独立しています。ログイン状態や買い物かごを維持するため、WebサイトはCookieなどを使ってリクエスト同士を関連付けます。

Cookieには有効期限や送信先などを制限する属性があります。認証に使うCookieが盗まれると本人になりすまされる可能性があるため、WebアプリはSecure、HttpOnly、SameSiteなどを適切に設定します。

HTTPSが保護するもの

HTTPSは、HTTPをTLSで保護した通信です。主に次の性質を提供します。

• 機密性：通信内容を第三者から読まれにくくする
• 完全性：途中で内容を変更されたことを検出する
• 認証：接続先が証明書に示されたホスト名の相手か確認する

ただし、鍵のマークがあっても、そのWebサイトの内容や運営者が必ず安全とは限りません。HTTPSは通信路を保護しますが、詐欺サイトや不正な入力欄そのものを見分ける機能ではありません。送信前にドメイン名と内容を確認することが必要です。

やってみよう

ブラウザの開発者ツールを開き、Network（ネットワーク）タブを表示してからページを再読み込みします。自分が閲覧してよいページで、次を探してください。

1. 最初に取得したHTMLのリクエスト
2. リクエストメソッドとステータスコード
3. Content-Typeヘッダー
4. HTMLの後に取得されたCSS、JavaScript、画像
5. 同じページを再読み込みしたときの転送量や時間の変化

開発者ツールにはCookieや認証用ヘッダーなどが表示される場合があります。画面を共有・公開するときは、秘密情報が写っていないか確認してください。

確認問題

1. HTMLを受信したあとにも複数のHTTPリクエストが発生するのはなぜですか。
2. 404と、サーバーへ接続できない状態の違いを説明してください。
3. Cookieはどのような目的で使われますか。
4. HTTPSで接続できることだけでは、サイト自体の安全性を保証できないのはなぜですか。

まとめ

Webでは、ブラウザがHTTPリクエストを送り、サーバーがステータスやデータを含むレスポンスを返します。HTTPSはその通信路をTLSで保護します。最後の章では、問題が起きた場所を段階的に切り分ける方法を学びます。