クッキー（Cookie）

データ・DB

ブラウザが保存し、条件に一致するHTTP要求でサーバーへ送る小さな名前と値のデータです。ログイン用識別子や表示設定などに使われ、セッション限りのものと期限付きで残るものがあります。

🐾 猫で例えると？

PCのキーボードに左手を乗せ、画面上に謎の文字列「UUUUUUU」の痕跡を残している茶トラ猫 — キーボードに残された、確かな訪問の痕跡

キーボードに手を乗せ、「UUUUUUU」という謎の文字列を残していく茶トラ。Cookieも、訪問のあとに小さなメモを残すイメージです。保存場所はブラウザーで、次に同じサイトへアクセスするとき、条件に合うCookieが一緒に送られます。サイトはその値を使って、前回の設定やログイン状態などを引き継ぎます。

💻 IT現場における「クッキー」とは？

HTTPでは、一回の要求だけで前の要求と同じ利用者だと自動的に分かるわけではありません。サーバーが必ず記憶を消すという意味ではなく、Cookie等の識別子とサーバー側の保存情報を対応付けることで、継続した状態を扱います。

これを解決し、ユーザーに「状態（ステート）」を持たせるために発明されたのがクッキーです。ECサイトでの買い物や、SNSでのログイン状態の維持など、現代のWebサービスにおいてクッキーは必要不可欠な技術として様々な場面で活用されています。

⚠️ クッキーの仕組みと注意点

クッキーには、現在見ているWebサイト自身が発行する「ファーストパーティクッキー」と、広告配信などの目的で第三者のドメインが発行する「サードパーティクッキー」が存在します。近年ではプライバシー保護の観点から、サードパーティクッキーを利用したユーザーの行動追跡（トラッキング）を制限する動きが世界的に強まっており、Webマーケティングの現場では対応に追われています。

セッションハイジャックの危険性

クッキーの中に保存されている「セッションID（ユーザーの証明書）」が悪意のある第三者に盗まれると、アカウントを乗っ取られてしまう危険性があります。そのため、重要な情報は直接クッキーに書き込まず、サーバー側で管理するのが鉄則です。

// JavaScriptでの簡単なCookie操作例（※非推奨な簡易的な実装）
// Cookieにユーザー名を保存（有効期限は1日）
document.cookie = "username=Tora; max-age=86400; path=/";

// Cookieから値を取得する処理
const cookies = document.cookie.split(';');
cookies.forEach(cookie => {
    const [name, value] = cookie.trim().split('=');
    if (name === 'username') {
        console.log(`おかえりなさい、${value}さん！`);
    }
});

この例は表示用のユーザー名を記録するだけで、本人確認には使えません。利用者がCookieを書き換えられることを前提に、サーバー側で値を検証します。JavaScriptから使う表示設定と、HttpOnlyを付ける認証用Cookieでは用途が異なります。

🛠️ クッキーを賢く使うためのポイント

便利で強力な仕組みだからこそ、開発者はセキュリティとプライバシーに対する十分な配慮が求められます。

用途に合う属性を付ける： 認証用にはHttpOnlyやSecureを設定し、SameSiteや有効期限も検討します。HttpOnlyはJavaScriptの読取りを制限する属性で、XSSの発生自体を防ぐものではありません。
利用目的を明確にする： 設定保存や広告・計測では目的が異なります。必要な説明や同意の扱いは対象地域・用途・適用規則によって変わるため、すべてのCookieに同じバナーを置けば足りるとは考えないようにします。
保存先を使い分ける： Cookieは要求に付随して送られるため、大量データを入れないようにします。localStorageは自動送信されませんがJavaScriptから読めるので、移せば機密情報が安全になるわけではありません。

茶トラが残したキーボードの痕跡のように、Cookieもブラウザに残る情報の一つです。用途はログインの維持から表示設定までさまざまなので、保存目的と有効期限を確認しましょう。削除するとログインや設定が解除される場合があり、Cookieを消すだけですべての追跡を防げるわけでもありません。

参考資料

MDN：HTTP Cookieの使用（別タブで開く）