一文读懂 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》

相关推荐
NightCyberpunk26 分钟前
HTML、CSS
前端·css·html
xcLeigh36 分钟前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
zhenryx38 分钟前
前端-react(class组件和Hooks)
前端·react.js·前端框架
ZwaterZ40 分钟前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
zhangjr05752 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱3 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
木子七3 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼3 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态3 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚3 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise