Web開発をしていると、「Cookie」という言葉を頻繁に耳にします。
ユーザーのログイン状態を保持したり、アクセス解析に使われたりと、CookieはWebアプリのあらゆる場面で活躍します。
しかし、Cookieの仕組みやセッションとの違い、安全な扱い方を正確に理解している開発者は意外と少ないものです。
この記事では、Web開発者が知っておくべきCookieの基本から実践的な使い方までを、初心者にもわかりやすく解説します。
Cookieとは？
Cookieとは、Webサーバーがユーザーのブラウザに保存する小さなテキストデータです。
1つのCookieには「名前」「値」「有効期限」などのユーザー情報が含まれており、ブラウザが自動的に送受信を行います。
CookieはHTTPヘッダーの一部として扱われ、サーバーとクライアントの間で次のようにやり取りされます。
- サーバーがレスポンスヘッダーに
Set-Cookieを含めて送信 - ブラウザがCookieを保存
- 次回以降、同じドメインへのリクエスト時に
Cookieヘッダーを自動で送信
2. Cookieの仕組みと流れ
実際のHTTP通信の流れを見てみましょう。
サーバーからCookieを送信
HTTP/1.1 200 OK
Set-Cookie: user_id=12345; Path=/; Max-Age=3600ブラウザからCookieを送信
GET /profile HTTP/1.1
Host: example.com
Cookie: user_id=12345このように、サーバー側で Set-Cookie ヘッダーを返すことでブラウザに情報を保持させ、以降のリクエストで自動的に送信される仕組みです。
Cookieの主な用途
Cookieは、Webアプリケーションで次のような場面によく使われます。
Cookieは基本的に状態を保持するための仕組み」ですが、サーバーサイドのセッションと組み合わせることで、より安全にユーザーを識別できます。
JavaScriptでのCookie操作
JavaScriptを使えば、ブラウザ上でCookieを直接操作できます。
Cookieを設定する
document.cookie = "theme=dark; max-age=3600; path=/";Cookieを取得する
console.log(document.cookie);Cookieを削除する
document.cookie = "theme=; max-age=0; path=/";ただし、JavaScriptで操作できるCookieは、HttpOnly 属性が付いていないものに限られます。
セキュリティ上の注意点（Secure・HttpOnly・SameSite）
Cookieは非常に便利な仕組みですが、セキュリティを意識して設定しなければ危険です。
以下の3つの属性は必ず理解しておきましょう。
| 属性名 | 説明 |
|---|---|
Secure | HTTPS通信のときのみCookieを送信 |
HttpOnly | JavaScriptからCookieを参照不可にする（XSS対策） |
SameSite | クロスサイトリクエスト時の送信を制限（CSRF対策） |
設定例：
Set-Cookie: session_id=abcd1234; Secure; HttpOnly; SameSite=Strictこれらを正しく設定することで、XSS・CSRFなどの攻撃リスクを大幅に軽減できます。
まとめ
Cookieは、Webアプリケーションの状態を維持するための重要な仕組みです。
正しく理解すれば、ユーザー体験を向上させつつ、安全なセッション管理を実現できます。
最後にポイントをまとめましょう。
Cookieは古くからある技術ですが、現代のWeb開発においても欠かせない基礎知識です。
これを理解することで、より安全で快適なWebアプリケーションを開発できるようになります。
コメント