次のデモでは、Cookie の使用方法に応じてブラウザが 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 Cookie のデモ
デモ: javascript-cookie.glitch.me
デモページに含まれる JavaScript が Cookie を設定します。
document.cookie = 'cat=tabby';
設定すると、Cookie は javascript-cookie.glitch.me のリソースに対するリクエストに含まれます。これは、アクセスしているサイトによって設定されるため、ファーストパーティ Cookie と見なされます。同じ JavaScript がクロスサイト iframe で呼び出された場合、ブラウザはこれをサードパーティ Cookie として扱います。
SameSite Cookie のデモ
このデモは、それぞれ異なるサイトにある 2 つのウェブページで構成されています。
各ページには次のものが含まれます。
- 他のサイトの画像。
- 他のサイトへのリンク。
両方のサイトが、リクエストへのレスポンスでデフォルトの SameSite 値 Lax を使用して Cookie を設定します。
SameSite=Lax を使用すると、クロスサイト ナビゲーション リクエスト（リンクのクリック）に対するレスポンスでは Cookie を設定できますが、他のクロスサイト リクエスト（画像の読み込みなど）では設定できません。
デモページにアクセスして、リンクをたどった場合や画像を読み込んだ場合に、ブラウザが SameSite=Lax Cookie をどのように処理するかを確認してください。
クロスサイト Cookie トラッキングのデモ
このデモは、次の 2 つのサイトで構成されています。
example-a.glitch.me と example-b.glitch.me のホームページには、tracker-site.glitch.me の iframe が含まれています。この iframe は、iframe が埋め込まれているページの閲覧アクティビティをトラッキングするために Cookie を使用します。
example-a.glitch.me と example-b.glitch.me を移動すると、トラッカー iframe のコンテンツが更新され、tracker-site.glitch.me がこれらの 2 つのサイトでアクティビティをトラッキングしていることが示されます。（他のサイトに埋め込まれていない）。
このデモでは、トラッカーが Cookie を使用してさまざまなサイトでのアクティビティを記録する方法を示します。
トラッキング ピクセルのデモ
このデモは、次の 2 つのサイトで構成されています。
どちらにも tracking-pixel-server.glitch.me の 1 ピクセル画像が含まれており、この画像を含むサイトでのアクティビティを Cookie でトラッキングできます。
両方のページには、tracking-pixel-server.glitch.me の iframe も含まれています。この iframe には、トラッキング ピクセルを含むページで記録されたページ訪問数が表示されます。
このデモでは、トラッキング ピクセルと Cookie を使用して、複数のサイトでのアクティビティを記録する方法を示します。
Cookie の取得のデモ
このページに含まれる JavaScript は、3p-site.glitch.me/fetch へのクロスサイト fetch() 呼び出しを行い、レスポンスで fetch=true Cookie を設定します。
関連リソース
- Cookie とは
- サードパーティ Cookie とは
- Cookie 属性
- HTTP リクエストとレスポンス
- Cookie ツール
- HTTP Cookie の使用
- SameSite Cookie の説明