【web技术】了解Cookie

cookie是存储在浏览器中的一组数据，用于保存网站执行其功能所需的状态和其他信息。

注意：本文是SameSite cookie属性更改系列文章的一部分，其中包括：

• SameSite cookie解释
• SameSite饼干配方
• 有计划的相同站点

cookie是网站存储在用户机器上的一个小文件，它存储的信息在浏览器和网站之间来回传播。

每个cookie都是一个键值对，以及控制该cookie何时何地使用的许多属性。这些属性用于设置过期日期或指示cookie只能通过HTTPS发送等内容。您可以在HTTP头中或通过JavaScript接口设置cookie。

Cookie是可用于向网站添加持久状态的方法之一。多年来，他们的能力不断发展，但给平台留下了一些遗留问题。为了解决这一问题，浏览器（包括Chrome、Firefox和Edge）正在改变其行为，以强制执行更多的隐私保护默认值。

注：了解更多关于Chrome保护人们在线隐私的努力，并为公司和开发者提供工具来建立繁荣的数字业务。

Cookie正在行动

假设你有一个博客，你想在那里向你的用户展示“What's new”促销。用户可以取消该促销，然后在一段时间内不会再看到它。您可以将该首选项存储在cookie中，将其设置为一个月后（2600000秒）过期，并且只能通过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"

Reading document.cookie将输出当前上下文中可访问的所有cookie，每个cookie用分号分隔：

→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"

JavaScript访问浏览器中的cookie
JavaScript可以使用document.cookie访问cookie。

如果你在一些受欢迎的网站上尝试，你会注意到大多数网站设置的cookie远远不止三个。在大多数情况下，这些cookie会在每个请求时发送到该域，这有很多影响。对于用户来说，上传带宽通常比下载带宽更受限制，所以所有出站请求的开销都会增加第一个字节的时间延迟。设置cookie的数量和大小要保守。利用“最大年龄”属性来帮助确保cookie停留的时间不会超过所需时间。

什么是第一方和第三方cookie？

警告：浏览器正在限制第三方cookie的使用。如果您过去在cookie上设置了SameSite=None，则需要采取其他操作。了解如何准备第三方cookie限制。

如果你回到你以前浏览的同一个网站，你可能会注意到有各种域名的cookie，而不仅仅是你当前访问的那个。与当前网站的域相匹配的Cookie，即浏览器地址栏中显示的内容，被称为第一方Cookie。类似地，来自当前网站以外的域的cookie被称为第三方cookie。这不是一个绝对的标签，而是相对于用户的上下文；同一个cookie可以是第一方，也可以是第三方，这取决于用户当时所在的网站。

三个cookie从同一页面上的不同请求发送到浏览器
Cookie可能来自一个页面上的各种不同域。

继续上面的例子，假设你的一篇博客文章中有一张特别神奇的猫的照片，它位于/blog/ig/amazing-cat.png。因为这是一个如此惊人的图像，另一个人直接在他们的网站上使用它。如果访问者访问过你的博客并拥有promo_shown cookie，那么当他们在其他人的网站上查看amazing-cat.png时，该cookie将在该图像请求中发送。这对任何人来说都不是特别有用，因为promo_shown不会用于其他人网站上的任何内容，它只是增加了请求的开销。

如果这是一个意想不到的效果，你为什么要这样做？正是这种机制允许网站在第三方上下文中使用时保持状态。例如，如果你在网站上嵌入YouTube视频，那么访问者会在播放器中看到“稍后观看”选项。如果您的访问者已经登录到YouTube，则第三方cookie会在嵌入式播放器中提供该会话，这意味着“稍后观看”按钮将一次性保存视频，而不是提示他们登录或将他们从您的页面导航回YouTube。

同一个cookie在三种不同的上下文中发送
访问不同页面时，会发送第三方上下文中的cookie。
网络的一个文化特性是，它在默认情况下往往是开放的。这也是为什么这么多人能够在那里创建自己的内容和应用程序的部分原因。然而，这也带来了一些安全和隐私问题。跨站点请求伪造（CSRF）攻击依赖于cookie附加到给定来源的任何请求，无论是谁发起请求。例如，如果你访问evil.example，它可以触发对你的-blog.example的请求，你的浏览器会很高兴地附加相关的cookie。如果你的博客不小心验证这些请求，那么eviv.example可能会触发删除帖子或添加自己的内容等操作。

用户也越来越清楚如何使用cookie来跟踪他们在多个网站上的活动。然而，到目前为止，还没有一种方法可以用cookie明确地说明您的意图。您的promo_shown cookie应仅在第一方上下文中发送，而用于嵌入其他网站的小部件的会话cookie是有意在第三方上下文中提供登录状态的。

您可以通过设置适当的SameSite attribute.，用cookie明确说明您的意图。

要识别您的第一方cookie并设置适当的属性，请查看第一方cookie配方【First-party cookie recipes.】。