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

相关推荐
小华同学ai15 分钟前
ShowDoc:Star12.3k,福利项目,个人小团队的在线文档“简单、易用、轻量化”还专门针对API文档、技术文档做了优化
前端·程序员·github
王解32 分钟前
Vue CLI 脚手架创建项目流程详解 (2)
前端·javascript·vue.js
刘大浪35 分钟前
vue.js滑动到顶便锁定位置
前端·javascript·vue.js
小金刚®42 分钟前
构建简洁之美:我的第一个前端页面
前端
ordinary901 小时前
指令-v-for的key
前端·javascript·vue.js
rpa_top1 小时前
RPA 助力电商:自动化商品信息上传,节省人力资源 —— 以影刀 RPA 为例【rpa.top】
大数据·前端·人工智能·自动化·rpa
新时代农民工--小明1 小时前
前端自动化部署更新,自动化打包部署
运维·前端·自动化
前端Hardy2 小时前
HTML&CSS:酷炫的3D开关控件
前端·javascript·css·3d·html
小马超会养兔子2 小时前
如何写一个数字老虎机滚轮
开发语言·前端·javascript·vue
m0_672449602 小时前
前端(组件传参案例)
前端