了解 Cookie

Cookie 是存储在浏览器中的数据块,用于保留网站执行其功能所需的状态和其他信息。

Rowan Merewood
Rowan Merewood

Cookie 是网站存储在用户计算机上的一个小文件,其中存储的信息会在浏览器和网站���间来回传输。

每个 Cookie 都是一个键值对,以及一些用于控制 Cookie 的使用时间和地点的属性。这些属性用于设置到期日期或指明 Cookie 应仅通过 HTTPS 发送等内容。您可以在 HTTP 标头中或通过 JavaScript 界面设置 Cookie。

Cookie 是向网站添加永久性状态的方法之一。这些功能多年来不断发展演变,但也给该平台留下了一些棘手的旧问题。为解决此问题,浏览器(包括 Chrome、Firefox 和 Edge)正在更改其行为,以强制执行更注重隐私保护的默认设置。

Cookie 的实际应用

假设您有一个博客,想向用户展示“新品动态”宣传信息。用户可以关闭促销信息,之后便不会再看到该信息一段时间。 您可以将该偏好设置存储在 Cookie 中,将其设置为一个月后(260 万秒),然后仅通过 HTTPS 发送。该标题如下所示:

Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
服务器在响应中向浏览器发送三个 Cookie
服务器使用 Set-Cookie 标头设置 Cookie。

当读者查看符合这些要求的网页(他们使用的是安全连接,并且 Cookie 的有效期不超过一个月)时,其浏览器会在请求中发送以下标头:

Cookie: promo_shown=1
在请求中从浏览器发送到服务器的三个 Cookie
浏览器会在 Cookie 标头中发回 Cookie。

您还可以使用 document.cookie 在 JavaScript 中添加和读取可供该网站使用的 Cookie。向 document.cookie 赋值将创建或替换使用该键的 Cookie。例如,您可以在浏览器的 JavaScript 控制台中尝试以下操作:

→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"

读取 document.cookie 将输出当前上下文中可访问的所有 Cookie,每个 Cookie 之间用英文分号分隔:

→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
JavaScript 在浏览器中访问 Cookie
JavaScript 可以使用 document.cookie 访问 Cookie。

如果您在一些热门网站上尝试这样做,就会发现大多数网站设置的 Cookie 远远不止 3 个。在大多数情况下,这些 Cookie 会在向该网域发出的每个请求中发送,这会产生一系列影响。上传带宽通常比下载带宽更受限制,因此所有出站请求的开销都会增加首字节时间。请谨慎设置 Cookie 的数量和大小。请使用 Max-Age 属性来帮助确保 Cookie 的保留期限不会超过所需的时间。

什么是第一方 Cookie 和第三方 Cookie?

如果您返回之前查看过的网站,可能会发现其中存在来自多个网域的 Cookie,而不仅仅是您当前访问的网域。与当前网站的网域(即浏览器地址栏中显示的内容)匹配的 Cookie 称为第一方 Cookie。同样,来自当前网站以外网域的 Cookie 称为第三方 Cookie。这不是一个绝对标签,而是与用户的上下文相关;同一 Cookie 可以是第一方 Cookie,也可以是第三方 Cookie,具体取决于用户当时所在的网站。

同一网页上的不同请求向浏览器发送三个 Cookie
网页上的 Cookie 可能来自多个不同的网域。

接着上面的示例,假设您的某篇博文中有一张特别可爱的猫咪照片,该照片托管在 /blog/img/amazing-cat.png 上。由于这张图片非常出色,另一个人直接在其网站上使用了该图片。如果访问者访问过您的博客并拥有 promo_shown Cookie,那么当他们在其他人的网站上查看 amazing-cat.png 时,系统会在请求图片时发送该 Cookie。这对任何人来说都没有特别实用,因为 promo_shown 不会用于此其他用户网站上的任何用途,只会给请求增加开销。

如果这是意外的副作用,您为什么要这样做?正是这种机制让网站能够在第三方环境中使用时保持状态。例如,如果您在自己的网站上嵌入了 YouTube 视频,那么访问者会在播放器中看到“稍后观看”选项。如果访问者已登录 YouTube,则第三方 Cookie 会在嵌入式播放器中提供该会话,这意味着“稍后观看”按钮只会一次性保存视频,而不是提示他们登录,也不必让他们离开您的网页返回 YouTube。

同一 Cookie 在三种不同的环境中发送
在访问��同的网页时,系统会发送第三方环境中的 Cookie。

网络的文化特征之一是,它通常默认处于开放状态。正因如此,很多人得以利用 YouTube 打造自己的内容和应用。不过,这也带来了许多安全和隐私问题。跨站请求伪造 (CSRF) 攻击利用以下事实:Cookie 会附加到对给定来源的任何请求,无论是谁发起的请求。例如,如果您访问 evil.example,则它可能会触发对 your-blog.example 的请求,而您的浏览器会乐意附加关联的 Cookie。如果您的博客不谨慎验证这些请求,则 evil.example 可能会触发删除帖子或添加自己的内容等操作。

用户也越来越了解 Cookie 如何用于跟踪他们在多个网站上的活动。不过,迄今为止还没有一种方法来使用 Cookie 明确声明您的意图。您的 promo_shown Cookie 应仅在第一方环境中发送,而想要嵌入其他网站的 widget 的会话 Cookie 会特意用于提供第三方环境中的登录状态。

您可以通过设置适当的 SameSite 属性,明确说明 Cookie 的用途。

如需识别您的第一方 Cookie 并设置适当的属性,请参阅第一方 Cookie 食谱