第三方 Cookie 工作原理解析

在 Web 开发中，Cookie 的归属权由其 Domain 属性决定。理解第一方和第三方 Cookie 的区别，关键在于理解请求的上下文和资源的来源域。

核心概念

• 第一方 Cookie (First-Party Cookie): 当你访问网站 example.com 时，由 example.com 服务器设置的 Cookie。其 Domain 属性通常是 .example.com。浏览器只会将此 Cookie 发送给 example.com 的服务器。

• 第三方 Cookie (Third-Party Cookie): 当你访问网站 example.com 时，网页中加载了来自另一个域（如 ads-network.com）的资源（例如脚本、图片或 iframe）。如果 ads-network.com 的服务器在响应中设置了 Cookie，那么这个 Cookie 对于当前在 example.com 页面中的你来说，就是第三方 Cookie。它的 Domain 属性是 .ads-network.com。

工作流程示例

假设一个广告网络 ads-network.com 想跟踪用户行为。

1. 用户访问网站A (blog.com)

   • blog.com 的页面中嵌入了一个来自 ads-network.com 的 1x1 像素的追踪图片：

     <img src="https://ads-network.com/pixel.gif?event=view_article_123" width="1" height="1">
     

   • 浏览器向 ads-network.com 发起请求。ads-network.com 的服务器在响应头中通过 Set-Cookie 设置一个唯一的标识符：

     HTTP/1.1 200 OK
     Set-Cookie: user_id=xyz123; Domain=.ads-network.com; Secure; SameSite=None
     

   • 浏览器收到了这个 Cookie，并将其与 ads-network.com 域关联起来。

2. 用户访问网站B (news.com)

   • news.com 也使用了同一个广告网络，页面中嵌入了另一个广告脚本：

     <script src="https://ads-network.com/ad.js"></script>
     

   • 当浏览器请求 ad.js 时，它会自动检查 ads-network.com 域下是否有可用的 Cookie。它找到了 user_id=xyz123。
   • 浏览器在请求头中将这个 Cookie 发送给 ads-network.com：

     GET /ad.js HTTP/1.1
     Host: ads-network.com
     Cookie: user_id=xyz123
     

3. 实现跨站跟踪

   • ads-network.com 的服务器收到了 user_id=xyz123，从而知道了访问 blog.com 和 news.com 的是同一个人。通过收集和分析用户在不同网站上的行为数据，广告网络可以建立详细的用户画像，用于精准广告投放。

SameSite 属性

为了限制第三方 Cookie 的滥用，现代浏览器引入了 SameSite Cookie 属性：

• Strict: 完全禁止第三方请求携带 Cookie。
• Lax: 大多数情况下禁止，但允许在顶层导航（如点击链接）时发送。
• None: 允许在任何跨站请求中发送 Cookie，但必须同时设置 Secure 属性（即只能通过 HTTPS 发送）。

目前，主流浏览器（如 Chrome）已将 SameSite 的默认值设为 Lax，这极大地限制了第三方 Cookie 的跟踪能力，也是其逐步被淘汰的主要原因之一。

本仓库的处理方式

考虑到现代浏览器对第三方 Cookie 的限制以及提升用户体验，本仓库默认关闭了 Cookie 同意提示（Consent Banner）。

具体实现方式是，在 src/modules/shared/components/Document.tsx 文件中，我们将 ConsentProvider 的 initialConsent 属性硬编码为 true。这意味着系统会默认用户已经同意了 Cookie 的使用，因此不会再弹出任何提示。

如何重新启用 Cookie 提示？

如果你需要重新启用 Cookie 同意提示（例如，为了满足特定地区的法律要求），可以按照以下步骤操作：

1. 打开 src/modules/shared/components/Document.tsx 文件。
2. 找到以下代码行：

   <ConsentProvider initialConsent={true}>
   

3. 将其修改为读取实际的 Cookie 值：

   const cookieStore = await cookies();
   const consentCookie = cookieStore.get("consent");
   
   // ...
   
   <ConsentProvider initialConsent={consentCookie?.value === "true"}>
   

通过以上修改，系统将再次根据用户的实际选择来显示或隐藏 Cookie 同意提示。