#はじめに

「ログイン状態が維持されるのはなぜ？」「ショッピングカートの中身が消えないのはなぜ？」——その答えがCookieです。

HTTPはステートレス（状態を持たない）プロトコルです。つまり、サーバーは「このリクエストを送ってきたのは、さっきログインしたユーザーだ」ということを、HTTP単体では知ることができません。この問題を解決するのがCookieです。

この記事を読むと、以下のことができるようになります：

  • Cookieの仕組みと用途を理解できる
  • Domain、Path、Expires、Max-Ageの各属性の意味がわかる
  • DevToolsでCookieを確認・操作できる

#Cookieとは

Cookieとは、Webサーバーがブラウザに保存させる小さなデータです。 ブラウザは、以後のリクエストでこのデータをサーバーに自動的に送り返します。

[ブラウザ]                           [サーバー]
    |                                    |
    |------ ログイン情報を送信 ----------->|
    |                                    |
    |<----- Set-Cookie: session=abc123 --|
    |       "このCookieを保存して"          |
    |                                    |
    |------ Cookie: session=abc123 ----->|
    |       "保存したCookieを送信"          |
    |                                    |
    |<----- ようこそ、山田さん -----------|

この仕組みにより、ステートレスなHTTPでも「状態」を擬似的に実現できます。

#Cookieの設定と送信

#サーバーからのCookie設定

サーバーはSet-CookieレスポンスヘッダーでCookieを設定します。

HTTP/1.1 200 OK
Set-Cookie: session_id=abc123
Set-Cookie: theme=dark

複数のCookieを設定する場合は、複数のSet-Cookieヘッダーを使用します。

#ブラウザからのCookie送信

ブラウザはCookieリクエストヘッダーで、保存したCookieをサーバーに送信します。

GET /dashboard HTTP/1.1
Host: example.com
Cookie: session_id=abc123; theme=dark

複数のCookieはセミコロン;で区切って1つのヘッダーにまとめます。

#Cookieの属性

Cookieには、その動作を制御するための属性を指定できます。

Set-Cookie: session_id=abc123; Domain=example.com; Path=/; Max-Age=3600; Secure; HttpOnly

#Expires と Max-Age（有効期限）

Cookieの有効期限を指定します。

#Expires

特定の日時を指定します。

Set-Cookie: session_id=abc123; Expires=Thu, 01 Jan 2026 00:00:00 GMT

#Max-Age

現在からの秒数を指定します。

Set-Cookie: session_id=abc123; Max-Age=3600

この例では、3600秒（1時間）後に有効期限が切れます。

#セッションCookie

ExpiresもMax-Ageも指定しない場合、セッションCookieとなります。セッションCookieは、ブラウザを閉じると削除されます。

Set-Cookie: session_id=abc123

ただし、最近のブラウザはセッション復元機能があるため、完全に削除されない場合もあります。

#Domain（適用ドメイン）

Cookieを送信するドメインを指定します。

Set-Cookie: session_id=abc123; Domain=example.com

#Domainを指定した場合

指定したドメインとそのサブドメインすべてに送信されます。

Domain=example.com

→ example.com          ✅ 送信
→ www.example.com      ✅ 送信
→ api.example.com      ✅ 送信
→ other.com            ❌ 送信しない

#Domainを省略した場合

Cookieを設定したオリジンのホストのみに送信されます（サブドメインには送信されない）。

www.example.com でSet-Cookieした場合

→ www.example.com      ✅ 送信
→ example.com          ❌ 送信しない
→ api.example.com      ❌ 送信しない

#Path（適用パス）

Cookieを送信するパスを指定します。

Set-Cookie: session_id=abc123; Path=/admin

指定したパスとその配下のパスにのみ送信されます。

Path=/admin

→ /admin              ✅ 送信
→ /admin/users        ✅ 送信
→ /admin/settings     ✅ 送信
→ /                   ❌ 送信しない
→ /public             ❌ 送信しない

省略した場合は、Cookieを設定したパスがデフォルト値となります。

#Cookieの用途

#1. セッション管理

最も一般的な用途です。ログイン状態の維持、ショッピングカートなどに使用されます。

Set-Cookie: session_id=abc123; HttpOnly; Secure

#2. ユーザー設定の保存

言語設定、テーマ（ダーク/ライト）などを保存します。

Set-Cookie: theme=dark; Max-Age=31536000

#3. トラッキング・分析

ユーザーの行動を追跡するために使用されます（プライバシーの観点から規制が強化されています）。

Set-Cookie: _ga=GA1.2.123456789.1234567890

#Cookieの制限

#サイズ制限

  • 1つのCookieは約4KB（4096バイト）まで
  • 1つのドメインで保存できるCookieは約50個まで

#セキュリティ上の注意

Cookieには機密情報を直接保存しないでください。

# ❌ 絶対にダメ
Set-Cookie: password=secret123

# ✅ サーバー側で管理するセッションIDを使う
Set-Cookie: session_id=abc123

#DevToolsでCookieを確認する

#手順

  1. DevToolsを開く（F12）
  2. 「Application」タブ（または「Storage」）を選択
  3. 左サイドバーの「Cookies」を展開
  4. ドメインを選択してCookieの一覧を表示

#確認できる情報

列説明
NameCookie名
Value値
Domain適用ドメイン
Path適用パス
Expires / Max-Age有効期限
Sizeサイズ（バイト）
HttpOnlyHttpOnly属性の有無
SecureSecure属性の有無
SameSiteSameSite属性の値

#Cookieの編集・削除

  • ダブルクリックで値を編集できる
  • 右クリック → 「Delete」で削除
  • 右クリック → 「Clear All」で全削除

#JavaScriptからのCookie操作

JavaScriptでdocument.cookieを使ってCookieを読み書きできます。

#Cookieの読み取り

console.log(document.cookie);
// "session_id=abc123; theme=dark"

#Cookieの設定

document.cookie = "username=yamada; max-age=3600; path=/";

注意: document.cookieへの代入は上書きではなく追加です。既存のCookieは保持されます。

#Cookieの削除

有効期限を過去に設定することで削除できます。

document.cookie = "username=; max-age=0; path=/";

ただし、HttpOnly属性が付いたCookieはJavaScriptからアクセスできません。これはセキュリティ上の重要な制限です（次の記事で詳しく学びます）。

#まとめ

  • CookieはHTTPのステートレス性を補うための仕組み
  • Set-Cookieヘッダーで設定、Cookieヘッダーで送信
  • 主要な属性:
    • Expires / Max-Age: 有効期限
    • Domain: 送信先ドメイン
    • Path: 送信先パス
  • セッションCookieは有効期限なし、ブラウザを閉じると削除
  • DevToolsのApplicationタブでCookieを確認・編集できる

#次のステップ

Cookieの基本がわかったところで、次はSameSite属性について学びましょう。「なぜCookieがサードパーティに送信されると危険なのか」「CSRF攻撃とは何か」——SameSite属性を理解することで、Cookieのセキュリティをより深く理解できます。

#参考リンク