HTTP Cookie のデモ

次のデモは、ブラウザが Cookie をどのように処理するかを示しています。

  • ファーストパーティ Cookie: アクセスしているサイトによって設定されます。
  • サードパーティ Cookie: 別のサイトによって設定されます。

👉 デモ: 1pc.glitch.me

デモページには、トップレベル ページと同じサイトの画像と iframe が含まれています。

画像と iframe の両方のリクエストに対するレスポンスには Set-Cookie ヘッダーが含まれますが、Set-Cookie ヘッダーの Path 値と Max-Age 値は異なります。

ファーストパーティ Cookie のデモサイト 1pc.glitch.me

👉 デモ: 3pc.glitch.me

デモページの画像と iframe は、別のサイト(3p-site.glitch.me)のものです。

Set-Cookie ヘッダーは、画像と iframe の両方のリクエストに対するレスポンスに含まれます。ただし、画像と iframe の Set-Cookie レスポンス ヘッダーにはそれぞれ異なる SameSite 値があり、ブラウザによる処理方法に影響します。

このデモは、ブラウザの制限、ユーザー設定、デベロッパー フラグ、エンタープライズ ポリシーによってサードパーティ Cookie がブロックされる仕組みを示しています。

詳細:

サードパーティ Cookie のデモサイト 3pc.glitch.me

👉 デモ: javascript-cookie.glitch.me

デモページに含まれている JavaScript は、Cookie を設定します。

document.cookie = 'cat=tabby';

設定すると、Cookie は javascript-cookie.glitch.me のリソースへのリクエストに含まれます。これは、アクセスしているサイトによって設定されるため、ファーストパーティ Cookie と見なされます。同じ JavaScript がクロスサイト iframe で呼び出された場合は、ブラウザによってサードパーティ Cookie として扱われます。

JavaScript Cookie のデモサイト javascript-cookie.glitch.me

このデモは、それぞれ異なるサイトにある 2 つのウェブページで構成されています。

👉 samesite-a.glitch.me
👉 samesite-b.glitch.me

各ページには以下が含まれます。

  • 他のサイトの画像。
  • 他のサイトへのリンク。

どちらのサイトも、リクエストに応答して Cookie を設定し、デフォルトの SameSiteLax を使用します。

SameSite=Lax を使用すると、クロスサイト ナビゲーション リクエスト(リンクのクリック)に応答して Cookie を設定できますが、他のクロスサイト リクエスト(画像の読み込みなど)では設定できません。

デモページにアクセスして、リンクをたどるときと画像を読み込むときに、ブラウザによって SameSite=Lax Cookie がどのように処理されるかを確認してください。

Samesite Cookie デモサイト samesite-a.glitch.me

このデモは次の 2 つのサイトで構成されています。

👉 example-a.glitch.me
👉 example-b.glitch.me

example-a.glitch.meexample-b.glitch.me のホームページには、どちらも tracker-site.glitch.me の iframe が含まれています。この iframe は Cookie を使用して、iframe が埋め込まれているページでのブラウジング アクティビティをトラッキングします。

example-a.glitch.meexample-b.glitch.me 間を移動すると、トラッカーの iframe のコンテンツが更新され、tracker-site.glitch.me がこれらの 2 つのサイトでユーザーのアクティビティをトラッキングしていることが示されます。(他のサイトには埋め込まれていません)。

このデモでは、トラッカーが Cookie を使用して複数のサイトでのユーザーのアクティビティを記録する仕組みを示します。

クロスサイト Cookie トラッキングのデモ: example-a.glitch.me

トラッキング ピクセルのデモ

このデモは次の 2 つのサイトで構成されています。

👉 tracking-pixel-a.glitch.me
👉 tracking-pixel-b.glitch.me

どちらにも tracking-pixel-server.glitch.me の 1 ピクセル画像が含まれています。これにより、Cookie を使用して、画像を含むサイトでのアクティビティをトラッキングできます。

どちらのページにも、トラッキング ピクセルを含むページで記録されたページ訪問数を示す、tracking-pixel-server.glitch.me の iframe が含まれています。

このデモでは、トラッキング ピクセルと Cookie を使用して、複数のサイトにわたるユーザーのアクティビティを記録する方法を示します。

トラッキング ピクセルのデモ: tracking-pixel-a.glitch.me

👉 デモ: fetch-cookie.glitch.me

このページに含まれる JavaScript は、3p-site.glitch.me/fetch へのクロスサイト fetch() 呼び出しを行い、レスポンスで fetch=true Cookie を設定します。

クロスサイト フェッチ Cookie のデモ: fetch-cookie.glitch.me

補足説明