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

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css