Cookie とは、サーバーがブラウザ(クライアント)に送信する小さなデータのことです。ブラウザは受け取ったデータを保存し、サーバーへのリクエスト時にそれを一緒に送信します。

ポイントは、Cookie の取り扱いの主導権がサーバー側にあることです。サーバーが「このデータを保存して、次回アクセス時に送ってほしい」とブラウザに指示を出す形になります。ブラウザはこの指示に従います。ただし、ユーザーはブラウザの設定で Cookie を削除したり、プライベートモードなどで受け入れを拒否することも可能です。

Cookie の主な用途は、セッション管理、パーソナライゼーション、トラッキングです。特に分かりやすい例としては、ログイン状態の保持や EC サイトのショッピングカートの情報管理があります。

各サイトごとにどのような Cookie が保存されているかは、ブラウザの開発者ツールで確認できます。Google Chrome であれば、Developer Tools の Application タブ内、Storage > Cookies で閲覧可能です。

送受信

サーバーがブラウザに Cookie を送信するには、レスポンスヘッダーに Set-Cookie を設定します。

1
Set-Cookie: <name>=<value>

レスポンスを受け取ったブラウザは Set-Cookie を読み取り、指定された名前と値で Cookie を保存します。この処理はブラウザが自動で行います。

複数の Cookie を送信する場合は、それぞれの Set-Cookie を個別に指定します。

1
2
Set-Cookie: name1=value1
Set-Cookie: name2=value2

なお、Set-Cookie には後述する属性(有効期限など)も指定できます。これらはブラウザで確認することが可能です。

ブラウザがサーバーに Cookie を送信するには、リクエストヘッダーに Cookie を設定します。

1
Cookie: <name>=<value>

サーバーはこのヘッダーを読み取り、該当するデータを取得します。複数の Cookie がある場合は、セミコロン(;)で区切ります。

1
Cookie: name1=value1; name2=value2

この送信処理も、ブラウザが自動で行います。

有効期限

Cookie には有効期限を設定できます。設定がある場合、ブラウザを閉じても期限までは保持されます。

有効期限は Expires または Max-Age 属性で指定します。両方が設定されている場合は Max-Age が優先されます。どちらも指定がなければ、ブラウザを閉じたタイミングで Cookie は削除されます(セッション Cookie)。

Expires

Expires には、特定の日時を指定します。その日時まで Cookie は有効です。

1
Set-Cookie: name=value; Expires=Thu, 1 Jun 2021 07:28:00 GMT

Max-Age

Max-Age には、保存されてからの有効期間を秒数で指定します。

1
Set-Cookie: name=value; Max-Age=3600

Cookie を安全に利用するには、HttpOnly および Secure 属性の設定が重要です。特にログイン情報などの重要なデータを扱う場合は、これらを必ず設定してください。

HttpOnly

HttpOnly を設定すると、Cookie を HTTP 通信でのみ利用できるようになります。JavaScript(document.cookie)からのアクセスが制限されるため、XSS(クロスサイトスクリプティング)による情報漏洩のリスクを軽減できます。

1
Set-Cookie: name=value; HttpOnly

Secure

Secure を設定すると、Cookie は HTTPS(SSL/TLS)通信でのみ送信されます。これにより、平文通信(HTTP)による盗聴リスクを防ぐことができます。

1
Set-Cookie: name=value; Secure

送信制御

Cookie の送信先を制御するには、DomainPathSameSite 属性を利用します。

Domain

Domain 属性は、Cookie を送信するドメイン範囲を指定します。デフォルトでは、Cookie は発行元と同一ドメインにのみ送信されます。サブドメインにも送信したい場合は、以下のように指定します。

1
Set-Cookie: name=value; Domain=hoge.com

これにより、www.hoge.com などのサブドメインにも Cookie が送信されます。

Path

Path 属性は、Cookie を送信するリクエストパスを指定します。たとえば以下のように設定すると、/fuga 以下のパスに対してのみ送信されます。

1
Set-Cookie: name=value; Path=/fuga

SameSite

SameSite 属性は、クロスサイトリクエスト時に Cookie を送信するかどうかを制御します。以下の3つの値が指定可能です。

説明
Strict クロスサイトリクエストでは Cookie を送信しない
Lax トップレベルナビゲーションかつ安全なメソッドのリクエストのみ Cookie を送信
None 常に Cookie を送信(Secure 属性の併用が必須)

StrictLax を設定することで、CSRF(クロスサイトリクエストフォージェリ)対策になります。通常は Lax が推奨されます。

なお、Lax の「トップレベルナビゲーション」とは、ブラウザのアドレスバーに表示される URL が変更されるような遷移(例:リンククリック)を指します。このような遷移では Lax 設定でも Cookie は送信されます。