无论如何，每天有 46.6 亿人积极使用互联网并与 HTTP cookie 进行交互。在许多方面，HTTP cookie 为您提供简化和个性化的网站体验，而对于某些人来说，这些服务经常被忽视或误解。
除了用户端，HTTP cookie 还允许 Web 开发人员为其用户创建更加个性化和方便的网站访问。除了 HTTP cookie 提供的好处之外，还需要考虑安全问题。在过去几年中更普遍地讨论的是，许多人关心自己的个人信息隐私和安全。
无论您对 HTTP cookie 的背景知识如何，我们都希望提供有关 HTTP cookie 如何工作的全面帖子。这是我们今天要介绍的内容：
什么是 HTTP cookie？
Cookie 是浏览器中用作存储介质的小块数据，并随每个请求发送到服务器。它们有助于会话管理、用户个性化和跟踪。
会话管理：
会话管理有助于用户与某些服务或应用程序之间的安全交互。当用户继续与 Web 应用程序交互时，他们会提交有助于在会话期间跟踪用户状态的请求。
*示例：*登录、自动填写的表单字段、购物清单
用户个性化：
用户个性化保留用户首选项和设置，以便在用户登录或应用程序启动时重新应用。设置被保存并与中央数据库同步，以帮助用户返回他们在第一次应用程序交互期间使用的首选设置。
*示例：*用户首选项、主题、语言
追踪：
跟踪记录和分析用户的网页浏览习惯，找出用户访问的页面数量和类型。详细信息包括用户会话中在页面和页面序列上花费的时间。由于跟踪背后的敏感信息，用户应该意识到访问不安全网页的漏洞。
*示例：*广告跟踪
如何创建 HTTP cookie
有两种方法可以创建 HTTP cookie。无论是通过 Google Chrome 还是 Mozilla Firefox，您都可以使用您访问的任何浏览器输入 Javascript 代码以将 cookie 设置到控制台中。另一种选择涉及 Web 服务器发送一个或多个 set-cookie 标头。
1. 客户端
打开控制台后，您可以通过键入以下代码来使用 JavaScript 设置 cookie：
document.cookie="example=1"
要检查您的 cookie 是否已设置，请打开“应用程序”选项卡并单击“cookies”选项卡以访问您的新 cookie。这是一张图片，显示您应该看到的内容：
2.Web服务器端
如果您希望建立自己的网站，您可以创建一个 HTML 脚本，其中一个按钮会创建一个 cookie。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-compatible" content ="ie=edge">
<title>Document</title>
</head>
<body>
<button id = 'btnCreateCookie'>Create Cookie </button>
<script>
const btnCreateCookie = document.getElementbyID("btnCreateCookie")
btnCreateCookie.addEventLister("click", e=> document.cookie = "example-3")
</script>
</body>
</html>
准备好 HTML 文件后，您可以创建一个 index.js 应用程序，该应用程序将使用 Node.js 的 Express 应用程序返回 HTML 文件。
您会注意到，每次单击网站上的按钮时，您都会创建一个名为“example-3”的 cookie。
如果您希望您的服务器在不手动编写 JavaScript 的情况下设置 cookie，您可以传递一组 cookie。
const app = require("express")()
app.get("/", (req, res) => {
res.setHeader("set-cookie", ["setfromserver=1"])
res.sendFile(`${__dirname}/index.html`)
})
app.listen(8080, ()=>console.log("listening on port8080"))
通过让浏览器设置 cookie，您无需手动输入 JavaScript 来为每个访问者创建 cookie。
HTTP Cookie 属性
无论 cookie 的类型如何，cookie 属性在所有 cookie 类型中都保持一致。您应该注意的 cookie 属性包括：
- 饼干范围
cookie 的范围决定了 cookie 应该发送到哪些 URL。cookie 的作用域分为两个不同的属性：
- 领域
更简单地说，域属性是放置 cookie 的“桶”。每个 cookie 都为自己分配一个唯一的域名，这有助于保持 cookie 的组织性和特定于用户输入的页面。
下面是一个例子：
Domain=example.io将设置 cookie 可用于所有子域，例如developer.example.io
- 小路
path 属性指示发送 cookie 标头的特定 URL 路径。为了给不同的路径设置cookies，可以编写如下代码：
document.cookie="examplepath1=1; path=/path"
document.cookie="examplepath2=2; path=/blog"
现在，当您通过任何带有 的 URL 进入网站时/path，例如https://www.example.io/path/，您将发送一个 cookie 标头"educativepath1=1"。
再举一个例子，如果您要通过任何带有 的 URL 进入网站/blog，例如https://www.example.io/blog
您将发送一个 cookie 标头"educativepath2=2"。
其他请求的路径，例如：
/bloglearn
/pathlearn
/learnpath
除非为这些 URL 设置了路径属性，否则不会发送 cookie 标头。
Expires和Max-age
要考虑的另一个属性是 cookie 的生命周期，或者更简单地说，cookie 的到期日期。在Expires和Max-Age下一个属性下降永久性Cookie类。尽管名称为“永久 cookie”，但该Expires属性会在指定日期删除 cookie。相反，该Max-Age属性会在指定时间段后删除 cookie。
另一方面，当当前会话结束时，会话 cookie 会被删除。请记住，某些浏览器会定义当前会话的结束时间，这可能是不确定的时间。
SameSite
我们之前介绍了如何为直接 URL 设置 HTTP cookie，但是如何单击该直接 URL 中的链接呢？单击页面内的链接时，您的 cookie 可以从您被定向到的新页面发送。这就是SameSite属性发挥作用的地方。简而言之，Samesite指定 cookie 是随跨站点请求发送还是在您单击任何给定页面上的链接时发送。例如，让我们按照以下顺序了解在一个网页与另一个网页之间导航时如何发送和接收 cookie。
- 您输入 URL www.example.com
- 您将收到第一方 cookie
- 在www.example.com 上，您单击向www.cookie.com发送 Fetch 请求的链接或按钮。
- www.cookie.com使用Domain=cookie.com设置 cookie
- www.example.com现在持有来自www.cookie.com的第三方 cookie 。
一个SameSite属性指定是否使用三个值发送第三方 cookie：
- 严格的
随着SameSite价值strict，饼干将只通过第一方Cookie背景，而不是第三方的cookies发送。
- 松懈
随着SameSite价值lax，饼干只会当用户点击主动链接到第三方网站发送。如果该SameSite属性没有直接设置，则lax成为默认值。
- 没有任何
随着SameSite价值None，饼干将在所有环境中被发送。
Cookie 类型
会话 cookie
也称为临时 cookie，会话 cookie 会在您关闭或离开浏览器后过期。当您每次打开页面时都必须输入登录凭据时，您会注意到网站正在使用会话 cookie。
要考虑的一个示例是任何电子商务网站上的购物车。当您单击某个项目以打开新选项卡时，会话 cookie 有助于将项目保留在购物车中。如果没有会话 cookie，网站将不会记住您之前点击的项目。
第一方 cookie
第一方 cookie 由您正在访问的网站直接存储在您的计算机上。该网站收集分析和有用信息以改善您的用户体验。
需要考虑的一个用例是本博文前面给出的示例。在访问www.example.com等网站时，该网站将向您的计算机发送请求，该请求在域www.example.com下提供唯一的 cookie 值。如果没有第一方 cookie，网站将不会自动让您登录或记住您过去会话的偏好。
第三方 cookie
第三方 cookie 是由您直接访问的域以外的域创建的。通常用于跟踪目的，即使在浏览器关闭后，第三方 cookie 也会被存储。一个常见的用例涉及从您访问的网站以外的网站跟踪广告。例如，在浏览电子商务网站上的各种产品页面时，您可能会接触到来自您访问过的特定网站之外的域的第三方 cookie。稍后，当您关闭浏览器时，第三方 cookie 可用于跟踪您是否购买了在网站上看到的产品。
从您所在的特定域之外的第三方网站提取的特定图片可能包含第三方 cookie，这些 cookie 使其他域能够为您查看但未购买的项目发送有针对性的电子邮件或广告。
安全 cookie
安全 cookie 可防止未经授权的各方观察在 HTTP 响应中发送给新用户的 cookie。使用 Secure 属性，HTTP 请求将仅在通过安全通道传输时包含 cookie。
HttpOnly cookie 最初由 Microsoft Internet Explorer 开发人员在 2002 年实现，HttpOnly 标志可以包含在Set-CookieHTTP 标头中。HttpOnly 属性降低了用户意外访问可能利用跨站点脚本缺陷的链接的风险。
跨站点脚本攻击是添加到受信任网站的恶意脚本，使攻击者可以访问 cookie 和其他敏感信息。
僵尸饼干
顾名思义，僵尸 cookie 是即使被删除或浏览器关闭也会恢复生命的 cookie。僵尸 cookie 将自己存储在 Web 浏览器专用 cookie 存储之外的位置。当用户销毁 cookie 时，僵尸 cookie 可以获取存储在其他地方的副本，并将其再次附加到用户的 cookie 存储中。
从历史上看，Quantcast 等广告公司因使用僵尸 cookie 来跟踪用户和存储个人信息而被起诉。加利福尼亚等州将僵尸 cookie 的使用视为非法侵犯隐私。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
