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 を使用して、そのサイトが利用できる Cookie を JavaScript で追加し、読み取ることもできます。document.cookie に割り当てると、そのキーを使用して Cookie を作成またはオーバーライドします。たとえば、ブラウザの JavaScript コンソールで次のことを試してください。
→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"
document.cookie を読み取ると、現在のコンテキストでアクセス可能なすべての Cookie がセミコロンで区切られて出力されます。
→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
document.cookie を使用して Cookie にアクセスできます。
いくつかの人気サイトでこれを試すと、ほとんどのサイトで Cookie が 3 つよりもはるかに多く設定されていることがわかります。ほとんどの場合、そのドメインに対するリクエストのたびにこれらの Cookie が送信されますが、これには多くの影響があります。多くの場合、ユーザーのアップロード帯域幅はダウンロードよりも制限されているため、すべての送信リクエストのオーバーヘッドにより、最初のバイトまでの時間が遅延します。設定する Cookie の数とサイズは控えめにしてください。Cookie が必要以上に長く残らないよう、Max-Age 属性を使用してください。
ファーストパーティ 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 を使用してインテントを明示的に記述する方法はありませんでした。promo_shown Cookie はファーストパーティのコンテキストでのみ送信されるべきですが、ウィジェットのセッション Cookie は他のサイトに埋め込まれることを意図したもので、サードパーティのコンテキストでログイン状態を提供するために意図的に存在します。
適切な SameSite 属性を設定することで、Cookie を使用してインテントを明示的に示すことができます。
ファーストパーティ Cookie を識別して適切な属性を設定するには、ファーストパーティ Cookie のレシピをご覧ください。