以下演示展示了浏览器如何处理 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。
对图片和 iframe 请求的响应中包含 Set-Cookie
标头。不过,图片和 iframe 的 Set-Cookie
响应标头各有不同的 SameSite
值,这会影响浏览器对它们的处理方式。
此演示展示了浏览器限制、用户设置、开发者标志或企业政策可能会如何阻止第三方 Cookie。
了解详情:

JavaScript Cookie 演示
👉 演示:javascript-cookie.glitch.me
演示页面中包含的 JavaScript 会设置一个 Cookie:
document.cookie = 'cat=tabby';
设置完毕后,该 Cookie 会包含在对 javascript-cookie.glitch.me 上资源的请求中。由于此 Cookie 是由您访问的网站设置的,因此属于第一方 Cookie。如果在跨网站 iframe 中调用相同的 JavaScript,浏览器会将其视为第三方 Cookie。

SameSite Cookie 演示
此演示包含两个网页,每个网页位于不同的网站上
👉 samesite-a.glitch.me
👉 samesite-b.glitch.me
其中每个页面都包含:
- 来自其他网站的图片。
- 指向其他网站的链接。
这两个网站都会在响应请求时设置 Cookie,并使用默认的 SameSite
值 Lax
。
SameSite=Lax
允许在响应跨网站导航请求(点击链接)时设置 Cookie,但不允许在其他跨网站请求(例如加载图片)中设置 Cookie。
访问演示页面,了解浏览器在用户点击链接和加载图片时如何以不同的方式处理 SameSite=Lax
Cookie。

跨网站 Cookie 跟踪演示
此演示包含两个网站:
👉 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 正在跟踪您在这两个网站上的活动。(未嵌入到任何其他网站上)。
此演示展示了跟踪器如何使用 Cookie 记录您在不同网站上的活动。

跟踪像素演示
此演示包含两个网站:
👉 tracking-pixel-a.glitch.me
👉 tracking-pixel-b.glitch.me
这两种广告都包含来自 tracking-pixel-server.glitch.me 的单像素图片,该图片允许使用 Cookie 跟踪您在包含该图片的网站上的活动。
这两个网页还包含来自 tracking-pixel-server.glitch.me 的 iframe,用于显示为包含跟踪像素的网页记录的网页访问次数。
此演示展示了如何将跟踪像素与 Cookie 搭配使用,以记录您在多个网站上的活动。

提取 Cookie 演示
此页面中包含的 JavaScript 会对 3p-site.glitch.me/fetch
进行跨站 fetch()
调用,后者会响应设置 fetch=true
Cookie。
