一文读懂 HTTP Cookies


引言

HTTP cookies,通常简称为"cookies",在网页开发中已经存在了相当长的时间。然而,尽管它们很常用,但许多人对它们的理解仍然存在一些误解,比如将其误认为间谍软件或病毒。其实,cookies 本质上是非常重要的,尤其是在 Web 开发中,如果没有 cookies 或类似的替代品,许多我们熟知的网络应用将无法正常运作。

Cookies 的起源

早期 Web 发展中的一个主要问题是如何管理状态。服务器无法识别两次请求是否来自同一浏览器。为了解决这个问题,开发人员尝试通过页面插入一个标识符,并要求下次请求时将该标识符一起发送回来。早期的解决方案包括在表单中隐藏字段或通过 URL 的查询字符串传递标识符,但这些方法过于繁琐,且容易出错。

1994 年,Netscape 的员工 Lou Montulli 提出了将"magic cookies"的概念应用到 Web 通信中,并成功解决了早期购物车系统的状态管理问题。这也是我们今天在几乎所有购物网站中看到购物车的起源。Montulli 的最初规范为 cookies 的工作方式提供了基础,并最终被 RFC 2109 规范化,后续演变为 RFC 2965。Netscape Navigator 自第一个版本起就支持 cookies,而今天的所有浏览器也都支持它。

什么是 Cookie?

简单来说,cookie 是浏览器在用户设备上存储的小型文本文件。它们是纯文本,包含一些数据信息,并没有可执行的代码。一个网页或服务器可以通过特定的指令要求浏览器存储这些信息,并在后续的请求中根据设定的规则发送回去。服务器通过这些 cookies 来识别不同的用户。例如,许多需要登录的网站会在用户登录后设置一个 cookie,只要这个 cookie 存在且有效,用户可以在站内自由导航。

服务器通过发送 Set-Cookie HTTP 头来指示浏览器存储 cookie。该头的格式如下:

复制代码
Set-Cookie: 值[; expires=日期][; domain=域名][; path=路径][; secure]

最常见的格式是 name=value,即名称和值的键值对。当 cookie 创建后,浏览器会在符合设定条件的请求中,将 cookie 的值通过 Cookie 头发送回服务器,例如:

复制代码
Cookie: 值

当存在多个 cookie 时,它们通过分号和空格分隔:

复制代码
Cookie: value1; value2; name1=value1

关于 cookie 值的编码存在一些误解。许多人认为 cookie 必须进行 URL 编码,实际上并非如此。根据最初的规范,只有分号、逗号和空白字符需要编码,URL 编码虽然可以使用,但并不是强制要求。然而,几乎所有的实现都对 cookie 值进行了一些形式的 URL 编码。

Set-Cookie 头中除了值,还可以包含一些其他的可选参数。这些参数定义了 cookie 的行为和生命周期。

expires 选项

expires 用来设定 cookie 的过期时间,格式为 Wdy, DD-Mon-YYYY HH:MM:SS GMT。例如:

复制代码
Set-Cookie: name=example; expires=Sat, 02 May 2025 23:38:25 GMT

如果没有设置 expires,则 cookie 为会话 cookie,即浏览器关闭时,cookie 会自动删除。

domain 选项

domain 选项指定了 cookie 适用的域名范围。默认情况下,cookie 的域为创建它的主机名。通过设置 domain,可以使 cookie 适用于更多的子域。例如:

复制代码
Set-Cookie: name=example; domain=nczonline.net

这样一来,nczonline.net 及其所有子域都会发送该 cookie。

path 选项

path 选项指定了请求 URL 中的路径匹配规则。只有在路径匹配时,cookie 才会发送。例如:

复制代码
Set-Cookie: name=example; path=/blog

这表示 /blog 及其所有子路径都会发送该 cookie。

secure 选项

secure 选项是一个标志,表示该 cookie 只能通过 HTTPS 发送,确保 cookie 不会通过不安全的连接传输。例如:

复制代码
Set-Cookie: name=example; secure

cookie 的生命周期由 Set-Cookie 头中的选项决定。任何带有相同名称、域和路径的 cookie 都会被更新。如果更改了其中任何一个属性,则会创建一个全新的 cookie。要删除一个 cookie,可以通过设置过期时间为过去的日期。例如:

复制代码
Set-Cookie: name=example; expires=Thu, 01 Jan 1970 00:00:00 GMT

通过 document.cookie 属性,JavaScript 可以创建、修改和删除 cookies。设置一个 cookie 时,格式和 Set-Cookie 头类似:

javascript 复制代码
document.cookie = "name=example; domain=nczonline.net; path=/";

当读取 document.cookie 时,返回的格式为 Cookie 头中的值,并需要手动解析。需要注意的是,通过 JavaScript 不能读取 HttpOnly 标志的 cookie。

HTTP-Only Cookies

HttpOnly 是一个特殊的标志,最早由微软在 Internet Explorer 6 SP1 中引入,旨在防止 cookie 被 JavaScript 访问,提升安全性,避免跨站脚本攻击。现在,主流浏览器如 Firefox、Opera 和 Chrome 都支持这个选项。设置方式如下:

复制代码
Set-Cookie: name=example; HttpOnly

结语

虽然 cookies 的概念已经有了十多年的历史,但它依旧是 Web 开发中不可或缺的一部分。本篇文章介绍了 cookies 的基础知识和使用方法,并探讨了如何通过浏览器和服务器进行有效的 cookie 管理。在未来的文章中,我们还会进一步讨论 cookies 的安全性及其相关的最佳实践。


参考资料: Zakas, Nicholas C.《HTTP cookies explained》

相关推荐
树下水月1 天前
纯HTML 调用摄像头 获取拍照后的图片的base64
前端·javascript·html
蜗牛攻城狮1 天前
Vue 中 `scoped` 样式的实现原理详解
前端·javascript·vue.js
豆苗学前端1 天前
前端工程化终极指南(Webpack + Gulp + Vite + 实战项目)
前端·javascript
比老马还六1 天前
Bipes项目二次开发/海龟编程(六)
前端·javascript
梨子同志1 天前
Node.js 文件系统 fs
前端
码农胖大海1 天前
微前端架构(二):封装与实现
前端
瘦的可以下饭了1 天前
2 数组 递归 复杂度 字符串
前端·javascript
Kellen1 天前
ReactDOM.preload
前端·react.js
岭子笑笑1 天前
vant 4 之loading组件源码阅读
前端
hxmmm1 天前
自定义封装 vue多页项目新增项目脚手架
前端·javascript·node.js