随着 Web 应用程序的出现,直接在客户端存储用户信息的需求也随之出现。这背后的想法是合理的:与特定用户相关的信息应该保存在用户的机器上。无论是登录信息、个人偏好,还是其他数据,Web 应用程序提供者都需要有办法把它们保存在客户端。对该问题的第一个解决方案就是 cookie。

cookie

cookie 是 HTTP 请求标头,其中含有先前由服务器通过 set-cookie 标头投放或通过 JavaScript 的 Document.cookie 方法设置,然后存储到客户端的 HTTP cookie。例如下面是包含这个头部的一个 HTTP 响应:

HTTP/1.1 200 ok
Content-type: text/html
Set-Cookie: name=value

这个 HTTP 响应会设置一个名为 name,值为 value 的 cookie。名和值在发送时都会经过 URL 编码。浏览器乎存储这些会话信息,并在之后的每个请求中都会通过 HTTP 头部 cookie 再将它们分会服务器,比如:

GET /index.js HTTP/1.1
Cookie: name=value

这些发送会服务器的额外信息可用于唯一标识发送请求的客户端。

为什么 HTTP 需要 cookie

HTTP 是一种无状态的协议,这意味着服务器无法在连续的请求之间保持客户端的任何记忆。

接下来我们就来举一个生活的例子:

假设你假设去一家麦当劳,他们提供了一个优惠活动,就是买满 2 杯可乐可以送一只炸鸡。

1. 你进入这家店店了一杯可乐,收银员会将你的点单信息输入他们的系统中。如果没有 cookie 的话,这服务员在你下次来的时候,压根就不知道你是新客还是之前就已经点过了;
2. 服务器为你分配一个唯一的会话标识符,并将其存储在一个名为 session_id 的 cookie 中。这个 cookie 会存储在你的浏览器中;
3. 在你买完付款后,服务器会将一些与你的购买相关的信息存储在 cookie 中,如购买的可乐数量和金额;
4. 在你继续购买咖啡的过程中,服务器会在每个请求中检查你的 session_id cookie,并根据其中存储的购买信息来判断是否满足送咖啡的条件;
5. 当你购买的可乐数量达到 2 杯时,服务器会识别出你已经满足了送炸鸡的条件。它会在你的购买信息中添加一条记录,表示你可以获得一只免费的炸鸡;
6. 当你下次访问咖啡店并购买咖啡时,服务器会读取你的 cookie 中的购买信息,并在检查后继续更新送咖啡的记录;
7. 当你结账时,服务器会检查购买信息中的送咖啡记录,如果满足条件,会从账单中减去相应的金额,表示免费咖啡的抵扣;

通过使用 cookie,麦当劳的服务器可以跟踪你的购买数量,并根据设定的条件来提供送炸鸡的优惠。这样,当你购买满足要求的数量时,服务器可以自动判断并为你提供一杯免费的咖啡，使你在购买咖啡时能够享受到优惠和奖励。

cookie 的限制

cookie 是与特定域绑定的,设置 cookie 后,它会与请求一起发送到创建它的域,这个限制能保证 cookie 中存储的信息只对被认可的接收者开发,不被其他域访问。

因为 cookie 存储在客户端机器上,所以为保证它不会被恶意利用,浏览器会施加限制,同时 cookie 也不会占用太多磁盘空间。

通常,只要遵守以下大致的限制,就不会在任何浏览器中碰到问题:

1. 容量限制: 每个 cookie 的存储容量通常被限制在几个 kb 到几十 kb 之间,不同浏览器可能会有不同的限制,如果超过了这个限制,浏览器可能会拒绝保存 cookie 或将其截断;
2. 数量限制: 浏览器对每个域名或整个浏览器的 cookie 数量也有限制,如果超过了这个数量限制,旧的 cookie 可能会被覆盖或丢弃;
3. 安全限制: 浏览器实施了一些安全策略来限制 cookie 的使用,例如它使用 HttpOnly 属性来来防止通过 JavaScript 访问 cookie,从而减少了被跨站脚本攻击(Cross-site-scripting,XSS) 对 cookie的信息窃取。同样使用 Secure 属性用于限制仅在 HTTPS 安全连接时,才可以发送 Cookie;
4. 域名和路径限制: cookie 可以设置域名和路径限制,指定了可以接收该 cookie 的域名范围和 URL 路径。这样 cookie 只能在指定的域名和路径下被发送和接收。例如,如果将 cookie 的域名限制为 .example.com,则只有以 example.com 结尾的子域名可以接受该 cookie;

需要注意的是,不同的浏览器和设备可能存在差异,对 cookie 的限制和实施策略可能会有所不同。此外,随着隐私和安全意识的提高,相关的法规和标准也可能对 cookie 的使用提出更严格的要求。因此,在开发和使用 cookie 时,需要遵守相关的法规和最佳实践,以确保用户隐私和数据安全。

cookie 的构成

一个标准的 HTTP cookie 通常由以下几个组成部分构成:

1. 名称(name): cookie 的名称通常用于标识和引用该 cookie;
2. 值(value): cookie 的值是否于名称相关联的信息,它可以是任意文本或数据;
3. 域(Domain): cookie 的域定义了可以访问该 cookie 的域名范围,只有与该域匹配的网站才能读取发送该 cookie;
4. 路径(Path): 路径规定了可以访问该 cookie 的 URL 路径,只有与指定匹配的页面才能访问该 cookie；
5. 过期时间(Expiration): cookie 的过期时间指定了该 cookie 的有效期限。一旦超过了过期时间,浏览器将删除该 cookie。如果没有指定过期时间,那么该 cookie 将成为会话 cookie,只在当前会话期间有效,即关闭浏览器后将被删除;
6. 安全标志(Secure)：如果设置了安全标志为 true,那么浏览器只会在通过加密的安全连接 HTTPS 发送该 cookie。这可以增加 cookie 的安全性,防止在传输过程中被窃取或篡改;
7. HTTPOnly 标志: 如果设置了 HTTPOnly 标志为 true,那么该 cookie 将不允许通过客户端的 JavaScript 代码访问。这有助于减少跨站脚本攻击 XSS 对 cookie 的利用;

这些组成部分以键值对的形式存储在 cookie 中,并由浏览器在 HTTP 请求和响应中进行传输。这些标志用于告诉浏览器什么情况下应该在请求中包含 cookie,这些参数并不会随请求发送个服务器,实际发送的只有 cookie 的 `键/值 对。

cookie 的缺点

尽管 HTTP cookie 是广泛使用的机制,但它也存在一些缺点:

1. 隐私问题: Cookie 可以用于跟踪用户的行为和偏好,这引发了隐私方面的担忧。第三方 cookie 可以在不同的网站之间共享和跟踪用户信息,可能导致用户的隐私泄露和个人数据被滥用的风险;
2. 安全风险: 由于 cookie 存储在用户的浏览器中,攻击者可能会通过各种手段窃取 cookie,如 网络嗅探、跨站脚本攻击 XSS 和跨站请求伪造 CSRF 等。一旦攻击者获取了 cookie,他们可能会模拟用户的身份，并访问敏感信息或执行未经授权的操作;
3. 性能影响: 每个 HTTP 请求中都会包含所有与当前域相关的 cookie 信息,这会增加数据传输的大小,对于每个 HTTP 请求,浏览器都需要将 cookie 信息发送给服务器,这会增加网络流量和延迟,特别是当 cookie 的数量或大小较大时;
4. 容量限制: 每个 cookie 的存储容量是有限的,通常在几 KB 到几十 KB 之间。对于需要存储大量数据的应用程序,cookie 的容量限制可能会成为问题;
5. 跨域限制: 浏览器实施了一些安全策略,限制了对其他域名的 cookie 访问,跨域请求(跨域 ajax 请求)不能访问其他域的 cookie,这对于某些应用程序可能会带来限制;
6. 用户控制性不足: 尽管浏览器提供了一些控制 cookie 的选项,如禁用第三方 cookie 或使用 隐身模式,但用户对于如何管理和控制 cookie 的细粒度控制有限;

鉴于这些缺点,对于保护用户隐私和数据安全的考虑,开发人员和网站运营者应该谨慎使用 cookie,并遵循隐私和安全最佳实践,以确保合理使用和保护用户的个人信息。

总结

为了合理使用 Cookie 并保护用户隐私,开发人员应遵循隐私和安全最佳实践,限制 Cookie 的使用,并提供用户对 Cookie 的控制选项。用户也可以通过浏览器设置来管理和删除 Cookie,以控制其数据的使用和共享。

不要在 cookie 中存储重要或敏感的信息,cookie 数据不是保存在安全的环境中,因此任何人都可能获得,应该避免把信用卡号或个人地址等信息保存在 cookie 中。

参考资料

• 书籍: JavaScript高级程序设计第四版