HTTP Cookies

HTTP Cookie，也称为 Web Cookie，是服务器发送给 Web 浏览器的一小段数据。浏览器可能会存储这些 Cookie，并在其他请求中将它们发送回服务器。Cookie 的典型用途是识别来自同一资源（浏览器）的多个请求。它有助于用户保持登录状态并跟踪其数据，例如用户名和会话。它也有助于为无状态的 HTTP 协议记住有状态信息。

如果您是开发人员，您无法跳过 Cookie，因为它们对于会话管理和其他用户信息跟踪非常有用。Cookie 在如今非常重要，就像应用程序的任何其他功能一样。Cookie 使许多事情对用户和开发人员都更加容易。

Cookie 已经使用了很长时间，并且得到了令人瞩目的发展。Cookie 只是关于 Web 应用程序的文本信息。当用户访问网站时，一些信息会被保存在系统的本地存储中，以便当他们再次访问时，应用程序能够识别用户并显示相关结果。

当用户访问任何站点时，他会从服务器请求应用程序的主页，并且当他选择任何特定操作时，他会再次请求应用程序的另一个页面。因此，即使用户是第 100 次访问，每次的请求都会是唯一的。由于对服务器的请求非常密集，因此无法直接将数据保存在服务器上；此外，这可能会导致服务器过载。而且，如果用户不再访问，收集到的信息将是冗余的。因此，为了记住用户的身份，服务器会随响应一起发送 Cookie，这些 Cookie 被保存在系统的本地存储中。下次同一客户端发出请求时，服务器将识别其身份并相应地显示结果。

Cookie 对服务器是唯一的，因此用户可能在他们的系统中拥有许多 Cookie，但服务器会识别自己的 Cookie。

在本节中，我们将讨论关于 Cookie 的以下主题

• Cookie 的用途
• Cookie 的工作原理
• JavaScript Cookies
• Cookie 的属性
• Cookie 的类型

Cookie 的用途

以下是 Cookie 的一些常见用途

会话管理

Cookie 的主要用途是管理用户登录、购物车详细信息、游戏分数或服务器下次用户登录时应记住的任何其他内容。

通常，会话管理有助于用户通过应用程序与服务器进行安全交互。由于用户继续与 Web 应用程序交互，因此他们每次访问网站时都会创建一个新请求。因此，它提供了一种在会话期间跟踪其状态和活动的简便方法。

追踪

跟踪涉及记录用户活动并分析他们的行为，以便为他们个性化内容。它记录和分析他们的习惯和兴趣，并查找他们访问的页面。跟踪详细信息可能包括在会话期间花费在页面或网站上的时间。用户跟踪中存在一些敏感信息，因此用户应意识到访问不安全网站的漏洞，并尽可能避免访问此类网站。

个性化

Cookie 有助于个性化用户偏好、主题和其他设置。大多数时候，这些设置会与中央数据库同步，以便在用户首次登录时为用户进行个性化设置。用户个性化会保留用户偏好和设置的信息，以便在用户登录或重新启动应用程序时重新应用。

认证

Cookie 在用户身份验证中也非常重要。当用户登录时，服务器会在响应中使用 Set-Cookie HTTP 标头来设置一个包含唯一“会话标识符”的 Cookie。

下次同一用户请求同一域时，浏览器将使用 Cookie HTTP 标头在网络上传送 Cookie。

这样，服务器就可以知道谁发出了请求。

Cookie 的工作原理

当用户与网站互动时，会向服务器发送一个新的请求，当他在应用程序中执行任何操作时，每次都会向服务器发送一个新的请求。服务器将每个新请求视为由不同用户发送的。

为了识别同一用户的请求，开发人员需要在服务器的响应中添加 Cookie，这些 Cookie 存储在系统的本地内存中。因此，如果同一用户向服务器发送请求，服务器将使用 Cookie 识别用户。

从客户端通信来看，Web 浏览器是从客户端向服务器发送请求的媒介。

一旦开发人员添加了 Cookie，用户发送的请求就会被识别，并且服务器会根据个性化发送响应。

从用户和开发人员的角度来看，Cookie 都非常重要。它有助于两者获得正确的响应。

JavaScript Cookies

让我们了解如何在 JavaScript 中创建 Cookie

创建 Cookie

当服务器收到请求时，它可以在响应中发送一个或多个 Set-Cookie 标头。它将被存储在系统的本地存储中。因此，下次浏览器向服务器发送请求时，它也会将 Cookie 与请求一起发送。

我们还可以指定过期日期或时间段，之后 Cookie 将过期并且不应被发送。我们还可以对特定域和路径设置一些额外的限制，以限制 Cookie 的发送时间。

JavaScript 通过 document.cookie 属性来创建、读取、更新和删除 Cookie。

以下是创建 Cookie 的语法

有两种不同的方法可以创建 HTTP Cookie。我们可以使用浏览器控制台在客户端创建 Cookie，或者从服务器的文件脚本部分添加它们。要从客户端添加，我们可以打开控制台并通过键入 JavaScript 代码在浏览器中添加。要从服务器端添加，我们可以添加 set-cookie 标头来创建 Cookie 或多个 Cookie。

让我们了解如何从客户端和服务器端创建 Cookie。

客户端

要从客户端打开 Cookie，请打开浏览器的控制台并执行以下代码

我们还可以使用 Web 浏览器的开发者工具查看保存在本地系统中的 Cookie。要测试是否已添加 Cookie，请导航到开发者工具的应用选项卡，然后选择 Cookie 选项卡。请看下面的应用选项卡截图

从上图可以看出，Cookie 已存储在我们的本地系统中。

Web 服务器端

要从服务器添加 Cookie，我们需要在用户访问网站时创建一个 Cookie。

考虑下面的示例

从上面的示例中，它将在我们的网页上渲染一个按钮组件。当我们点击按钮时，它将为我们的系统存储创建指定的 Cookie。

类似地，我们可以添加任何其他事件侦听器来创建 Cookie。我们还可以添加 onload 事件来设置 Cookie。

让我们了解 Cookie 的属性

Cookie 的属性

Cookie 的属性在所有类型的 Cookie 中都保持一致，以下是不同类型 Cookie 的一些常见属性

Cookie 作用域

Cookie 的作用域决定了 Cookie 将发送到哪些 URL。Cookie 的作用域可以分为两个不同的属性

1) Path (路径)

Path 是定义 Cookie 作用域的属性之一。它指定了在 HTTP 标头中发送 Cookie 的特定 URL 路径。要将 Cookie 设置到不同的路径，我们可以编写以下代码

现在，当您访问指定 URL 的网站时，例如 example.com/path1，您将发送一个 Cookie 标头“cookie_first=1”。

如果您访问另一个 URL 的网站，例如 example.com/path2，您将发送一个 Cookie 标头“cookie_second=2”。

除指定 URL 外，其他请求路径不会发送任何 Cookie 标头。

2) Domain (域)

Cookie 的第二个属性是域。域充当 Cookie 被放置的存储桶。Cookie 分配给自己一个唯一的域名，这有助于管理员为 Web 页面的每个 HTTP 请求保持 Cookie 的特定和有条理。以下是一个特定域 Cookie 的示例

Expires and Max-age (过期和最大年龄)

Cookie 的“Expires”和“Max-Age”属性决定了 Cookie 的生命周期或过期日期。它们属于持久化 Cookie 类别。“Expires”属性可以删除指定日期的 Cookie，除了“permanent cookie”这个名称。“Max-Age”属性则会在指定时间后删除 Cookie。

相比之下，会话 Cookie 在当前会话结束时会被删除。一些浏览器能够指定当前会话何时结束，这可以是任何时间，包括无限时间。

SameSite

SameSite 属性允许我们在点击页面内的链接时设置 Cookie。我们已经讨论了如何为特定 URL 设置 HTTP Cookie，但如果您想在直接 URL 内的链接点击时设置 Cookie 怎么办？使用 SameSite，我们可以通过点击新页面的链接来发送 Cookie，从而实现重定向。我们可以将 SameSite 指定为在跨站请求或用户点击网页上的链接时发送 Cookie。

让我们通过以下示例了解 SameSite 属性如何支持跨站 Cookie。以下流程将解释从一个页面导航到另一个页面时 Cookie 的发送和接收方式。

用户访问一个 URL（例如，TpointTech.com）

他将收到一个第一方 Cookie

在 TpointTech.com 上，用户将点击一个链接，该链接将向另一个站点发送一个 fetch 请求，例如 www.tutorialandexample.com。

Tutorialandexample.com 将设置一个 Cookie，其 Domain=tutorialandexample.com

现在，TpointTech.com 将拥有来自 tutorialandexample.com 的第三方 Cookie

SameSite 属性指定是否发送第三方 Cookie，具有以下三个值

严格

值为“strict”的 SameSite 属性只能在第一方 Cookie 上下文中发送。它不会考虑第三方 Cookie。

Lax (宽松)

SameSite 属性的“Lax”值仅在用户点击具有第三方导航的链接时发送。如果 SameSite 属性未直接设置为第三方链接，则 lax 是默认值。

无

如果 SameSite 属性的值为“None”，则 Cookie 将在所有上下文中发送。

我们已经讨论了 Cookie 及其属性；让我们了解 Cookie 的类型

Cookie 的类型

以下是根据其使用和行为确定的 Cookie 类型

First-Party cookies (第一方 Cookie)

第一方 Cookie 是直接从您正在访问的网站服务器发送到系统的 Cookie。这些 Cookie 由访问的网站直接存储在您的计算机上。大多数网站都会向客户端发送 Cookie，以收集有用的信息和分析，从而改善用户体验。

第一方 Cookie 的最佳示例是身份验证。当用户登录应用程序时，服务器会将 Cookie 发送给客户端并将其存储在本地系统中以识别用户。下次您登录应用程序时，您无需再次提交登录信息。

如果没有第一方 Cookie，网站将无法识别用户，也不会自动登录您或记住您过去会话中的偏好。

Third-Party cookies (第三方 Cookie)

第三方 Cookie 是由您重定向到的第三方域创建的。它不是由您登录的同一域创建的。这些 Cookie 通常用于跟踪目的，并且即使在浏览器关闭后也可以存储。

第三方 Cookie 的一个很好的例子是来自网站的广告跟踪。您可能已经注意到，您从不同的电子商务网站浏览了一些产品，然后您开始看到与这些产品相关的广告。因为在浏览产品的过程中，您可能接触到了该特定网站之外的某个域的第三方 Cookie。之后，当您关闭浏览器或特定网站时，可以使用第三方 Cookie 来跟踪您的浏览详细信息，例如您看过和购买（或未购买）的产品。之后，您将开始收到有关这些产品的电子邮件，并从不同的广告代理商那里看到广告。

Session cookies (会话 Cookie)

会话 Cookie 也是临时 Cookie，会在用户关闭浏览器标签页时过期。通常，当用户输入其登录凭据并登录应用程序时，会使用会话 Cookie。当使用会话 Cookie 时，用户每次尝试登录应用程序时都必须提供其凭据。

电子商务网站上的购物车处理是会话 Cookie 的一个绝佳示例。会话 Cookie 有助于组织用户的购物车。如果网站不使用会话 Cookie，那么记住他们选择了哪些产品将更加困难。

Secure cookies (安全 Cookie)

Cookie 提供 Secure 属性，以防止观察发送给用户的 Cookie 的未经授权的访问。当 Cookie 与 Secure 属性一起使用时，所有 HTTP 请求仅在通过安全介质传输时才包含该 Cookie。

最初，Microsoft Internet Explorer 于 2002 年实现了 HttpOnly Cookie。标记为 HttpOnly 的 Cookie 可以包含在 Set-Cookie HTTP 标头中。HttpOnly 属性降低了用户意外点击可能利用跨站脚本漏洞的恶意链接的风险。

通常，攻击者会尝试将恶意脚本添加到受信任的网站，并尝试访问本地系统存储中的 Cookie 和其他敏感信息。

Zombie cookies (僵尸 Cookie)

我们可以从名字猜出僵尸 Cookie。就像僵尸一样，这些类型的 Cookie 在被清除后可以“复活”。这些 Cookie 可以在清除或关闭浏览器后再次出现。

僵尸 Cookie 可以将自身存储在浏览器专用存储之外的其他地方。通常，僵尸 Cookie 可以创建原始 Cookie 的副本，将其存储在别处，然后将其重新附加到用户的 Cookie 存储中。

以前，一些公司使用僵尸 Cookie 来跟踪用户活动和访问个人信息。一些州已经禁止了僵尸 Cookie，并将其视为非法侵犯隐私的行为。

总结

HTTP Cookie 对开发人员和用户都非常有用。它们已经存在于 Web 中很长时间了，并提供了了解人们兴趣和改善用户体验的机会。在本节中，我们讨论了 HTTP Cookie 的许多重要方面，例如它们的属性和类型。

我们已经讨论了很多事情，但仍有许多事情需要讨论，以正确且安全地使用 Cookie。

要了解更多信息，请访问 JavaScript 中的 Cookie 示例。