Cookieについて個人的にまとめる
⚠️個人的な技術記事なので、細かい箇所の誤りはご容赦ください
Cookieとは?(簡単に)
Cookieとは、自分自身のスマートフォンやパソコンのブラウザに保存される情報です。
Webサイトに訪れた時間、ECサイトの買い物かごの情報などを保存しておくことができます。
Cookieには属性を設定することで制約を与えることができ、例えば通信がセキュアではない場合にはCookieを送信しないように設定できます。
Cookieを図解
Cookieの解説
Cookieは個々のブラウザが保存する情報であり、Webサーバから情報を送信したものやJavaScriptが設定したものをブラウザに保存します。この場合、送り先のドメイン/パスに前方一致し、Secure/SameSite条件を満たすときに送信されます。
ECサイトで買い物カゴに商品を入れた後に、一度ブラウザを閉じて数時間後に立ち上げても買い物かごの中身が保持されているのはこのCookieの仕組みによるものです。
Cookieは、オリジンのドメイン・パスに一致する時に送信されます。また、SameSite=Lax属性が設定されている場合、オリジンとは異なるWebページへのトップレベルのGETリクエスト(ユーザーが直接リンクをクリックして遷移するような場合)でもCookieが送信されることがあります。
また、ファーストパーティクッキーは、ユーザーが現在アクセスしているWebサイトのドメインによって設定されるCookieです。一方、サードパーティクッキーは、ユーザーがアクセスしているWebサイトとは異なるドメイン(例えば、埋め込まれた広告やトラッキングサービスなど)によって設定されるCookieを指します。
Cookieは同一端末の同一ブラウザにのみ保存されるもので、スマートフォンやパソコン経由でCookieが共有されることはありません。
属性一覧
Cookieには制約条件を与えることができ、下記に倣います。
| 属性 | 内容 |
|---|---|
| Expires / Max-Age | 寿命を指定。Max-Age(秒)があれば優先。期限切れ後は送信されない(多くは削除)。 |
| Domain | 送信対象ドメインの上位スコープを指定。省略時はホスト限定(サブドメインへは送られない)。Domain=example.com で *.example.com に送信可。 |
| Path | 前方一致で送信パスを制限。省略時は発行時URLのディレクトリ(例:/app/)。 |
| Secure | HTTPS など安全な接続時のみ送信。 |
| HttpOnly | JS から参照不可(document.cookie で見えない)。XSS対策の一部。 |
| SameSite | クロスサイト送信の制御。Lax(既定: トップレベルGETは送信)/Strict(同一サイトのみ)/None(クロスサイト可・Secure必須)。未指定時にはLax が付与される。 |
| Partitioned | トップレベルサイトごとに分離して保存(CHIPS)。サードパーティ用途でも追跡性を抑える前提で利用。 |
| __Host- / __Secure- | プレフィックス。__Host- は Secure かつ Path=/、Domain なしが必須(ホスト固定に最適)。__Secure- は Secure 必須。 |
Cookieのサイズ
一般的に、1個のCookieのサイズキー:値 の全ての合計サイズが4096バイトとブラウザで制限されています。それを超えるとCookieの内容は丸ごと切り捨てられます。上記にある属性(Expiresなど)はそれに含まれません。
また、Domain と Path は属性値が1024バイトを超えると、その属性だけ無効として扱われます。
改めて図解
参考文献
Discussion