Cookie は、ブラウザに保存されるデータの塊で、ウェブサイトが機能を実行するために必要な状態やその他の情報を保持するために使用されます。
Cookie は、ウェブサイトがユーザーのパソコンに保存する小さなファイルで、保存された情報はブラウザとウェブサイトの間を行き来します。
各 Cookie は Key-Value ペアで、その Cookie がいつ、どこで使用されるかを制御するさまざまな属性があります。これらの属性は、有効期限の設定や、HTTPS 経由でのみ Cookie を送信する必要があることを示すために使用されます。Cookie は、HTTP ヘッダーまたは JavaScript インターフェースで設定できます。
Cookie は、ウェブサイトに永続的な状態を追加するために使用できる方法の 1 つです。長年にわたり、その機能は拡大し進化してきましたが、プラットフォームにはいくつかの問題のあるレガシーの問題が残っています。この問題に対処するため、ブラウザ（Chrome、Firefox、Edge など）は、よりプライバシーの保護を重視したデフォルトを適用するように動作を変更しています。
Cookie の動作
ブログで、ユーザーに「新着情報」のプロモーションを表示したいとします。ユーザーはプロモーションを閉じることで、しばらくの間は表示されなくなります。 この設定は Cookie に保存し、1 か月（2,600,000 秒）後に有効期限が切れるように設定し、HTTPS 経由でのみ送信するようにします。このヘッダーは次のようになります。
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
Set-Cookie ヘッダーを使用して Cookie を設定します。
読者がこれらの要件を満たすページ（安全な接続を使用しており、Cookie が 1 か月未満である）を表示すると、ブラウザはそのリクエストでこのヘッダーを送信します。
Cookie: promo_shown=1
Cookie ヘッダーで Cookie を返送します。
document.cookie を使用して、JavaScript でそのサイトで使用できる Cookie を追加して読み取ることもできます。document.cookie に代入すると、そのキーを持つ Cookie が作成またはオーバーライドされます。たとえば、ブラウザの JavaScript コンソールで次の操作を試すことができます。
→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"
document.cookie を読み取ると、現在のコンテキストでアクセス可能なすべての Cookie が出力され、各 Cookie はセミコロンで区切られます。
→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
document.cookie を使用して Cookie にアクセスできます。
人気のサイトでこれを試すと、ほとんどのサイトで 3 つ以上の Cookie が設定されていることがわかります。ほとんどの場合、これらの Cookie はそのドメインへのすべてのリクエストで送信されるため、いくつかの影響があります。アップロード帯域幅はダウンロードよりも制限されることが多いため、すべての送信リクエストのオーバーヘッドにより、最初のバイトまでの時間が長くなります。設定する Cookie の数とサイズは控えめにしてください。Max-Age 属性を使用して、Cookie が必要以上に長く残らないようにします。
ファーストパーティ Cookie とサードパーティ Cookie とは何ですか？
以前と同じサイトの選択に戻ると、現在アクセスしているサイトだけでなく、さまざまなドメインの Cookie が存在していることに気づくでしょう。現在のサイトのドメイン（ブラウザのアドレスバーに表示されるもの）と一致する Cookie は、ファーストパーティ Cookie と呼ばれます。同様に、現在のサイト以外のドメインからの Cookie は、サードパーティ Cookie と呼ばれます。これは絶対的なラベルではなく、ユーザーのコンテキストに相対的なものです。同じ Cookie でも、ユーザーがアクセスしているサイトによってファーストパーティ Cookie になることも、サードパーティ Cookie になることもあります。
前の例に続けて、ブログ投稿の 1 つに特に素晴らしい猫の写真が含まれていて、/blog/img/amazing-cat.png でホストされているとします。非常に素晴らしい画像なので、別のユーザーが自分のサイトで直接使用しています。訪問者がブログにアクセスして promo_shown Cookie を持っている場合、その訪問者が別のユーザーのサイトで amazing-cat.png を表示すると、その Cookie が画像のリクエストで送信されます 。promo_shown はこの他のユーザーのサイトでは何も使用されていないため、これは誰にとっても特に役立つものではなく、リクエストにオーバーヘッドを追加するだけです。
意図しない影響がある場合、その目的は何でしょうか。このメカニズムにより、サイトはサードパーティのコンテキストで使用されているときに状態を維持できます。たとえば、YouTube 動画をサイトに埋め込むと、訪問者はプレーヤーに [後で見る] オプションが表示されます。訪問者がすでに YouTube にログインしている場合、そのセッションはサードパーティ Cookie によって埋め込みプレーヤーで利用できるようになります。つまり、[後で見る] ボタンをクリックすると、ログインを求めるプロンプトが表示されたり、ページから移動して YouTube に戻ったりすることなく、動画がすぐに保存されます。
ウェブの文化的特性の 1 つは、デフォルトでオープンであることです。これにより、多くの人が独自のコンテンツやアプリを作成できるようになりました。しかし、これにより、セキュリティとプライバシーに関する懸念も生じています。クロスサイト リクエスト フォージェリ（CSRF）攻撃は、リクエストを開始したユーザーに関係なく、Cookie が特定のオリジンへのリクエストに付加されるという事実を利用しています。たとえば、evil.example にアクセスすると、your-blog.example へのリクエストがトリガーされ、ブラウザは関連する Cookie を問題なく付加します。ブログでこれらのリクエストの検証方法に注意しないと、evil.example が投稿の削除や独自のコンテンツの追加などのアクションをトリガーする可能性があります。
ユーザーは、Cookie を使用して複数のサイトでアクティビティをトラッキングする方法についても意識が高まっています。しかし、これまで、Cookie の意図を明示的に示す方法はありませんでした。Your promo_shown Cookie はファーストパーティの文脈でのみ送信する必要がありますが、他のサイトに埋め込むためのウィジェットのセッション Cookie は、サードパーティのコンテキストでログイン状態を提供するために意図的に存在しています。
適切な SameSite 属性 を設定することで、Cookie の意図を明示的に示すことができます。
ファーストパーティ Cookie を特定して適切な属性を設定するには、ファーストパーティ Cookie のレシピをご覧ください。