IT基礎
Cookie
初級読み方：クッキー｜英語：Cookie
ウェブサイトがブラウザに保存する小さなデータで、ログイン状態の維持などに使われるよ。
やさしい説明
Cookie（クッキー）とは、Webサイトがブラウザに保存する小さなデータです。次回アクセス時にサーバーに送信されます。
ログイン状態の維持、ユーザー設定の保存、アクセス解析などに使われます。「このユーザーは前にも来たことがある」と覚えておくための仕組みです。
サイズは4KB程度と小さく、有効期限を設定できます。httpOnly属性をつけるとJavaScriptからアクセスできなくなり安全です。
図解
Cookieの主な用途
- ログイン状態の維持 — ログインしたままページを移動しても、セッションIDをCookieで保持するため再ログイン不要になる
- ショッピングカート — カートに追加した商品をCookieで記憶し、ページを閉じても内容が残る
- ユーザー設定の保存 — 言語・テーマ（ダーク/ライト）などの好みをCookieに保存する
- 広告トラッキング — 閲覧履歴をCookieで追跡し、関連する広告を表示する（サードパーティCookie）
- アクセス解析 — Google Analyticsなどが訪問者を識別するためにCookieを使う
CookieとlocalStorageの違い
- Cookie：サーバーとブラウザの両方でアクセス可能。毎回リクエスト時にサーバーへ自動送信される。サイズ上限は約4KB。有効期限を設定できる
- localStorage：ブラウザ（クライアント）のみでアクセス可能。サーバーには送信されない。サイズ上限は約5MB。有効期限がなく削除するまで残る
認証トークンなどサーバーが必要な情報はCookie、テーマ設定など純粋にブラウザ側だけで使う設定はlocalStorageを使うのが一般的です。
Cookieの属性
HttpOnly— JavaScriptからCookieを読み取れなくする。XSS攻撃でCookieが盗まれるリスクを減らすSecure— HTTPS通信のときだけCookieを送信する。HTTP通信では送らないSameSite— 別のサイトからのリクエスト時にCookieを送信するかどうかを制御する。CSRF攻撃の対策Expires / Max-Age— Cookieの有効期限を設定する。設定しない場合はブラウザを閉じると削除される（セッションCookie）
よくある疑問
Q: Cookieは危険？
A: Cookie自体は危険ではありませんが、サードパーティCookieによる広告トラッキングや、セキュリティ設定が不十分な場合のCookie盗用リスクがあります。HttpOnly・Secure・SameSite属性を適切に設定することでリスクを減らせます。
Q: Cookieの同意バナーはなぜ表示される？
A: EUのGDPRや日本の個人情報保護法などの規制により、トラッキング目的のCookieを使用するサイトはユーザーの同意を得る必要があります。そのため「このサイトはCookieを使用しています」というバナーが表示されます。
Q: JavaScriptでCookieを操作できる？
A: HttpOnly属性がついていないCookieは document.cookie で読み書きできます。ただし扱いにくいため、実務ではjs-cookieなどのライブラリを使うことが多いです。
関連用語
- localStorage — クライアントのみで使うブラウザ保存領域
- ブラウザ — Cookieを保存・管理するクライアント
- サーバー — Cookieを設定・受信する側
- HTTP — Cookieがやりとりされる通信プロトコル
📖 関連レッスン
レッスンを見る →