次のデモは、ブラウザが Cookie をどのように処理するかを示しています。
- ファーストパーティ Cookie: アクセスしているサイトによって設定されます。
- サードパーティ Cookie: 別のサイトによって設定されます。
ファーストパーティ Cookie のデモ
👉 デモ: 1pc.glitch.me
デモページには、トップレベル ページと同じサイトの画像と iframe が含まれています。
画像と iframe の両方のリクエストに対するレスポンスには Set-Cookie
ヘッダーが含まれますが、Set-Cookie
ヘッダーの Path
値と Max-Age
値は異なります。

サードパーティ Cookie のデモ
👉 デモ: 3pc.glitch.me
デモページの画像と iframe は、別のサイト(3p-site.glitch.me)のものです。
Set-Cookie
ヘッダーは、画像と iframe の両方のリクエストに対するレスポンスに含まれます。ただし、画像と iframe の Set-Cookie
レスポンス ヘッダーにはそれぞれ異なる SameSite
値があり、ブラウザによる処理方法に影響します。
このデモは、ブラウザの制限、ユーザー設定、デベロッパー フラグ、エンタープライズ ポリシーによってサードパーティ Cookie がブロックされる仕組みを示しています。
詳細:

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

SameSite Cookie のデモ
このデモは、それぞれ異なるサイトにある 2 つのウェブページで構成されています。
👉 samesite-a.glitch.me
👉 samesite-b.glitch.me
各ページには以下が含まれます。
- 他のサイトの画像。
- 他のサイトへのリンク。
どちらのサイトも、リクエストに応答して Cookie を設定し、デフォルトの SameSite
値 Lax
を使用します。
SameSite=Lax
を使用すると、クロスサイト ナビゲーション リクエスト(リンクのクリック)に応答して Cookie を設定できますが、他のクロスサイト リクエスト(画像の読み込みなど)では設定できません。
デモページにアクセスして、リンクをたどるときと画像を読み込むときに、ブラウザによって SameSite=Lax
Cookie がどのように処理されるかを確認してください。

クロスサイト Cookie トラッキングのデモ
このデモは次の 2 つのサイトで構成されています。
👉 example-a.glitch.me
👉 example-b.glitch.me
example-a.glitch.me と example-b.glitch.me のホームページには、どちらも tracker-site.glitch.me の iframe が含まれています。この iframe は Cookie を使用して、iframe が埋め込まれているページでのブラウジング アクティビティをトラッキングします。
example-a.glitch.me と example-b.glitch.me 間を移動すると、トラッカーの iframe のコンテンツが更新され、tracker-site.glitch.me がこれらの 2 つのサイトでユーザーのアクティビティをトラッキングしていることが示されます。(他のサイトには埋め込まれていません)。
このデモでは、トラッカーが Cookie を使用して複数のサイトでのユーザーのアクティビティを記録する仕組みを示します。

トラッキング ピクセルのデモ
このデモは次の 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 を使用して、複数のサイトにわたるユーザーのアクティビティを記録する方法を示します。

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