🍪

CookieとSession

2025/03/01に公開

Cookieは、サーバーまたはクライアント側で発行できるテキストデータ
ブラウザ側に保存される。
ブラウザがサイトを訪れたときに、サーバーとやり取りするためのデータを保持できる。

ブラウザを見てるときに出てくる広告もCookieを利用している。
検索・購入履歴をCookieに保存し、それを元に関連広告が表示されている。

📌 Cookieのポイント

  • ブラウザ側に保存される
  • HTTPヘッダーの中にCookieの情報が含まれる
  • ユーザーの状態を一時的に保持できる
  • セキュリティ的な理由で、重要な情報(パスワードなど)は直接保存しない!

📌 HTTPリクエストの例(ブラウザ → サーバー)

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Cookie: session_id=abc123  ← クッキー情報が含まれている

Session

Sessionとは、サーバー側でユーザーごとの状態を保持する仕組み。
サーバー側に保存される
各ユーザーにSession ID を割り振り、サーバーがログイン情報やカートの中身などユーザーの情報を管理する。

📌 Sessionのポイント

  • サーバー側に保存される
  • Session IDを割り振って管理する(Session IDはCookieに保存)
  • ログイン状態・カート情報・フォーム入力途中のデータなどを保持

📌 Sessionの仕組み
1️⃣ ログイン時にサーバーがSession IDを発行し、Cookieに保存

HTTP/1.1 200 OK
Set-Cookie: session_id=abc123; HttpOnly; Secure

2️⃣ サーバーはSession IDをもとにユーザーを特定

{
  "session_id": "abc123",
  "user_id": 1001,
  "name": "Aさん",
  "cart": ["商品A", "商品B"]
}

3️⃣ ブラウザがSession IDをCookieに保存し、次回リクエスト時に送信

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

この仕組みにより、ログイン情報やカートの情報が保持される!

HTTPヘッダー

HTTPヘッダーは、クライアント(ブラウザ)とサーバーがデータをやり取りする際に追加で送る情報 のこと。
Webページを開くとき、ブラウザとサーバーは「リクエスト(要求)」と「レスポンス(応答)」をやり取りするが、その中にHTTPヘッダーが含まれる。

📌 HTTPヘッダーには何が含まれる?

  • ユーザー情報(User-Agent)
  • 認証情報(Cookie)
  • データの形式(Content-Type)
  • セキュリティ設定(CORSなど)

なんでCookieとSessionが必要なの?

HTTPは**「ステートレス」(状態を持たない)ため、「誰が何をしたか」を覚えることができない。**
もしCookieやSessionがなかったら、次のような問題が起きる。

  1. ログイン状態を保持できない → ページを移動するたびにログインが切れる
  2. カートの中身が記憶されない → 別のページに移動すると空っぽになる
  3. ユーザーを特定できない → 決済時にどのカートか分からずエラーになる

💀 CookieとSessionがないと、ECサイトはまともに動かない!


まとめ

用語 役割
Cookie ブラウザ側で保存されるデータ。Session IDなどを保持する。
Session サーバー側でユーザーの状態を管理する仕組み。ログイン情報やカートの中身を記憶できる。
HTTPヘッダー クライアントとサーバー間の通信時に追加情報をやり取りする仕組み。Cookieもここでやり取りされる。

「Session IDをCookieに保存し、サーバーがSession IDを元にユーザーの情報を管理する」という仕組みで、Webアプリは「ログイン状態」や「カートの情報」を維持できる!


参考文献

動画で学習が一番わかりやすかったです。
https://youtu.be/RSKT4mAwVUg?si=scQggUP1hn-Z13wB
https://www.youtube.com/watch?v=t8Xxp_dk214&t=13s
https://www.youtube.com/watch?v=GAQitmvtYkE

Discussion