Cookie（クッキー）の基本

Cookie とは

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

ポイントは、Cookie の取扱の主導権はサーバーにあることです。 サーバーがブラウザに対し、「このデータを保存しておいて、次にここにアクセスするときに一緒に送ってね」と指示を出しているイメージです。 ブラウザはこの指示に従っているわけです。 ただし、ブラウザから Cookie を削除したり、プライベートモードなどで Cookie を拒否することもできます。

Coockie の主な用途は、セッション管理、パーソナライゼーション、トラッキングです。 おそらく一番わかりやすいのがセッション情報で、ログインや EC サイトのショッピングカートなどがこれで管理されています。

サイトごとにどのような Cookie が保存されているかは、ブラウザで確認することができます。 Google Chrome であれば、ディベロッパーツールの Application タブ、サイドメニューの Storage > Cookies で確認できます。

送受信

Set-Cookie

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

Set-Cookie: <name>=<value>

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

複数値がある場合は、その数だけSet-Cookieを設定します。

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

後述しますが、Set-Cookieには、有効期限など Cookie に関するいくつかの属性を一緒に設定します。 属性にどのような値が設定されているかは、ブラウザで確認することができます。

Cookie

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

Cookie: <name>=<value>

リクエストを受け取ったサーバーはCookieを読み取り、該当のデータを取得します。 複数値がある場合は、セミコロン（;）で区切ります。

Cookie: name1=value;name2=value2

これらの Cookie の送信処理は、ブラウザが自動で行ってくれます。

有効期限

Cookie には有効期限を設定することができます。 有効期限を設定した場合は、ブラウザを閉じたとしても期限までは利用することができます。

有効期限の設定は、以下のExpiresとMax-Ageという属性によって設定します。 ExpiresとMax-Ageのどちらも設定がある場合は、Max-Ageが優先されます。 どちらの設定もない場合は、ブラウザを閉じるとともに Cookie は破棄されます（セッション Cookie）。

Expires

Expiresには、日時（Date）を指定します。 Cookie はこの日時まで有効となります。

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

Max-Age

Max-Ageには、秒数を指定します。 Cookie は、保存されてからその秒数が過ぎるまで有効となります。

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

セキュア Cookie

Cookie を安全に利用するためには、以下のHttpOnlyとSecure属性を設定するべきです。 特にログイン情報など重要な情報を取り扱う Cookie には、必ず設定してください。

HttpOnly

HttpOnlyは、Cookie の利用を HTTP プロトコルのみに制限する属性です。 要は、リクエスト時のみ利用できるように制限します。 これを設定しなかった場合、JavaScript（Document.cookie API）によって Cookie の情報が操作できてしまいます。 そのため XSS（クロスサイトスクリプティング）によって Cookie の情報が参照されるということがありえます。

Set-Cookie: name=value;HttpOnly

Secure

Secureは、Cookie の利用を SSL/TLS（HTTPS）に限定する属性です。 Cookie は HTTP プロトコルでやり取りを行うため、暗号化されてない通信では盗聴される恐れがあります。

Set-Cookie: name=value;Secure

送信制御

ブラウザからサーバーに対する Cookie の送信について、以下のDomainやPath属性によって制限をかけることができます。

Domain

Domainは、サブドメインへの Cookie を許可するための属性です。

通常 Cookie は、同一ドメインのサーバーに対してのみ送信されます。 ここにはサブドメインは含まれません。

具体的に、hoge.comからサブドメインであるwww.hoge.comへアクセスしても Cookie は送信されないということです。 サブドメインにも Cookie を送信するには、以下のようにDomainを設定します。

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

Path

Pathは、送信可能なパスを設定します。 例えば以下のように/fugaと設定すれば、/fuga、/fuga/piyoなど/fugaを含むパスへのリクエストのみ Cookie が送信されます。

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

SameSite

SameSiteは、別ドメインにリクエストを送信する際に、Cookie を送信するかという設定になります。 値として以下のいずれかを設定します。

strictまたはLaxを設定することで、CSRF（クロスサイトリクエストフォージェリ）に対する対策になります。 通常はLaxを設定するのが良いようです。

Laxの説明にある Top Level Navigation とは、ブラウザのアドレスバーにある URL が変わる遷移のことを指します。 具体的にサイト A（https://A.com）からリンク（<a>）によってサイト B（https://B.com）に遷移するのは、Top Level Navigation となります。 Laxであれば、このような遷移の時にもCookieは送信されます。