Zenn
🍪

Cookieにおけるセキュリティ対策のベストプラクティスを考える

に公開
Security
cookie
tech

こんにちは！今回はWeb開発でよく使われるCookieについて、基礎から応用まで分かりやすく解説します。特にセキュリティに関連する属性にフォーカスして、実務で役立つノウハウをお伝えします。

Cookieとは何か？

Cookieは、Webサイトがユーザーのブラウザに保存する小さなテキストデータです。サーバーがユーザーのコンピュータに情報を保存し、後で再度取り出せる仕組みとして機能します。

よく保存されるデータ例

Cookieには以下のようなデータが保存されることが多いです：

  • ログイン情報（セッションID）
  • ユーザー設定（言語設定、テーマ設定など）
  • ショッピングカートの内容
  • トラッキングID（サイト訪問履歴、広告識別子など）
  • フォームに入力した情報の一時保存

Cookieのセキュリティを高める3つの重要属性

1. HTTPOnly属性

HTTPOnlyは、JavaScriptからのCookieアクセスを防止する非常に重要な属性です。

どんな時に役立つ？

XSSと呼ばれるクロスサイトスクリプティング攻撃からCookieを守ります。悪意のあるスクリプトが注入された場合でも、Cookieの内容を盗み取られるリスクを軽減できます。

設定方法

Set-Cookie: id=a3fWa; HttpOnly

実際のユースケース

セッションIDなど重要な認証情報を含むCookieには必ず設定しましょう。フロントエンドのJavaScriptからアクセスする必要がないCookieは基本的にHTTPOnlyを付けるべきです。

2. Secure属性

Secure属性は、Cookieの送信をHTTPS接続に限定する属性です。

どんな時に役立つ？

公共Wi-Fiなどでの「中間者攻撃」からの保護と、Cookieデータの通信経路上での漏洩を防止します。

設定方法

Set-Cookie: id=a3fWa; Secure

実際のユースケース

本番環境ではほぼすべてのCookieにSecure属性を付けるべきです。現代のWebサイトはHTTPSが標準なので、この属性を付けることに問題はないでしょう。

3. SameSite属性

SameSite属性は比較的新しく、CSRFと呼ばれるクロスサイトリクエストフォージェリ攻撃を防ぐための属性です。

3つの設定値

  1. Strict：最も厳格な設定

    Set-Cookie: id=a3fWa; SameSite=Strict
    • 完全に同一サイトからのリクエストでのみCookieを送信
    • 他サイトからのリンクでアクセスした場合、最初のリクエストではCookieは送信されない
    • 管理画面や決済系など、高セキュリティが必要な機能に適しています

  2. Lax：バランスの良い設定（多くのブラウザのデフォルト）

    Set-Cookie: id=a3fWa; SameSite=Lax
    • 別サイトからリンクを踏んだ場合はCookieを送信するが、POST/PUT/DELETEリクエストやiframeなどでは送信しない
    • 一般的なログイン状態の維持に最適です

  3. None：制限なし（Secure属性と必ず併用が必須）

    Set-Cookie: id=a3fWa; SameSite=None; Secure
    • すべてのクロスサイトリクエストでCookieを送信
    • サードパーティCookieや埋め込みコンテンツに必要な場合に使います

Web Storageとの違い

CookieとlocalStorage、sessionStorageの主な違いを比較表にまとめました：

Cookie localStorage sessionStorage
容量 約4KB 約5MB 約5MB
有効期限 手動設定可能 永続（手動削除まで） ブラウザセッション終了まで
サーバー送信 毎リクエスト自動送信 送信されない 送信されない
アクセス範囲 複数ドメイン設定可 同一オリジンのみ 同一オリジン・同一タブのみ
アクセス サーバー/クライアント両方 クライアントのみ クライアントのみ

ベストプラクティス：安全なCookie設定例

セキュリティを考慮したCookieの設定例です：

Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Lax; Max-Age=3600; Path=/

これにより：

  • JavaScriptからのアクセス防止（HttpOnly）
  • HTTPS接続でのみ送信（Secure）
  • CSRF攻撃からの基本的な保護（SameSite=Lax）
  • 1時間後に失効（Max-Age=3600）
  • サイト全体で有効（Path=/）

まとめ

近年のWeb開発では、セキュリティリスクを減らすため、必要最小限の情報だけをCookieに保存し、他のデータはlocalStorageやsessionStorageを使う傾向があります。特に認証情報を扱う場合は、ここで紹介した属性を適切に設定し、ユーザーデータを守りましょう！

皆さんのWeb開発が安全で効率的になることを願っています。何か質問があればコメントでお気軽にどうぞ！

Discussion