Question

HTTP 的 Cookie 细节

Answer 1

HTTP 协议在网络知识中占据了重要的地位，HTTP 协议最基础的就是请求和响应的报文，而报文又是由报文头（Header）和实体组成。大多数 HTTP 协议的使用方式，都是依赖设置不同的 HTTP 请求/响应 的 Header 来实现的。

本系列《实用 HTTP》就抛开常规的 Header 讲解式的表述方式，从实际问题出发，来分析这些 HTTP 协议的使用方式，到底是为了解决什么问题？同时讲解它是如何设计的和它实现原理。

HTTP 协议是一种无状态的“松散协议”，它不会记录不同请求的状态，并且因为它本身包含了两端（客户端和服务端），根据请求和响应来区分，它大部分的内容都只是一个建议，其实双边是可以不遵守此建议的。

本身 HTTP 就是一个无状态的协议，但是有时候我们又有需要增加状态的需求，这个时候延伸出来了 Cookie，利用 Cookie 可以让传输的时候保持一些状态信息。
本文就来讲讲 Cookie 的所有细节。

先明确一点，Cookie 就是为了解决 HTTP 协议无状态的问题，接下来举个例子说明。

早年间医院对患者的病例还没有在线建档的时候，都需要患者在就医之前，办理一个病历的小册子，医生会在病历中写上此次就医的情况，什么时间、有什么表现的反映、诊断是什么病、开了一些什么药等等。如果下次又生病了，有病历的情况下，都会要求患者再把病历带上，这样医生就能通过病历了解到之前的情况。

在 Cookie 的实现上，也是这样的。

服务端（医生）在收到客户端（患者）请求的时候，将一些用户标识信息加入到 Cookie （病例）中，随着响应返回给客户端，客户端将 Cookie 中的信息存储在本地，下次再请求此服务器的时候，再将 Cookie 中携带的数据原样传输给服务端，此时服务端就能通过 Cookie 中的用户标识，识别出这是之前请求过的某个用户。

在这个例子中，服务端就是医生的角色、客户端是患者的角色、Cookie 就是病历。

Netscape 官方文档中的定义为：Cookie 是指在 HTTP 协议下，服务器或脚本可以维护客户端计算机上信息的一种方式 。通俗地说，Cookie 是一种能够让网站 Web 服务器把少量数据储存到客户端的硬盘或内存里，或是从客户端的硬盘里读取数据的一种技术。 Cookie 文件则是指在浏览某个网站时，由 Web 服务器的 CGI 脚本创建的存储在浏览器客户端计算机上的一个小文本文件。

HTTP 协议中的规则，都是通过在请求头和响应头中写入输入来实现，Cookie 也是这样的。

服务端通过 Set-Cookie 这个响应头来向客户端中写入 Cookie 信息，而客户端读取 Set-Cookie 这个响应头中的信息存储起来，在下次请求的时候取出来，再通过 Cookie 这个请求头，将 Cookie 的数据传输给服务端。

再看一个浏览器中，Cookie 使用的实例。

在请求头中（Request Header）中，使用 Cookie 这个请求头传递 Cookie 数据，不同的数据通过 ;分割。

到这里，我想你应该弄清楚了 cookie 的整个执行流程，接下来我们再来探究一些 cookie 的细节。

cookie 其实都是存储在客户端，通常我们说 cookie 对应的客户端，就是在说浏览器。

对于 cookie，我们可以简单的将 cookie 分为两类：

会话 cookie 是一种临时的 cookie，用于存储一些临时的信息，存储在内存中，会话 cookie 在用户退出浏览器的时候，会被清空删除。而持久 cookie 的生存周期会更长久一些，被存储在磁盘上，浏览器重启后它们依然存在，但是他们会有一个过期的时间，只在此时间之后会被置为失效。

会话 cookie 和持久 cookie 之间唯一的区别就是它们的过期时间，只要是设置了过期时间的 cookie 就是持久 cookie，反之则是会话 cookie。

仔细看前面的流程图中，有一个 domain 的字段是用于标识当前 Cookie 支持的域名的，而想要设置过期时间，可以使用 Expires 或者 Max-Age 参数进行设置，有点类似我们前面讲 HTTP 缓存的参数。

到现在我们已经介绍了两个 Cookie 配置的信息，Domain 和 Expires/Max-Age，分别用来配置域名和过期策略。

这些都很好理解，毕竟浏览器是开放的，它会访问很多不同的网址，如果每个请求都将所有的 Cookie 信息都传递过去，基本上是不现实的。而这些配置参数，就是对 Cookie 增加一些附加的设置，进行一些简单的限制和过滤，在减少传输量的同时也保证了安全。

Domain 这个参数可以限制只在此域名下的请求，才传递该 Cookie，其他的不传递。

Cookie 其实还支持其他的一些参数配置，打开 Chrome 的调试模式，在 Application 中就可以看到当前页面的 Cookie 信息。

下面以一篇微信文章页面所存储的 Cookie 为例。

这个表中，就是当前存储的所有 Cookie 信息，而表头，则是 Chrome 支持的 Cookie 信息。

下面我们分别来介绍它们。

其实都很好理解，就不展开讲解了。

有些资料里会提到 Set-Cookie2 和 Cookie2 ，这些都是历史遗留问题，当初想对 Cookie 再进行一些功能上的扩展，但并未得到广泛的实施，现在已经弃用了。

大家了解一下即可，有兴趣可以参考 RFC 6265。

大部分时候我们聊到 Cookie 都在说的是服务器和浏览器进行通信时候，而不同的浏览器对 Cookie 存储的限制是不一样的。例如：单个域名可存储的 Cookie 数量、Cookie 大小等。

我简单找了一些资料，来说明不同浏览器对 Cookie 的支持情况。

这些数据我没有验证过，但是也能说明不同浏览器对 Cookie 的支持情况。在进行页面 Cookie 操作的时候，应该尽量保证 Cookie 的个数小于 20 个，总大小小于 4KB，这是一个安全且保险的范围。

前面配置 Cookie 参数的时候，有两个参数：http 和 secure 属性，它们就在一定程度上保证了安全。

Cookie 本身是不支持跨域的，一定程度也保证了 Cookie 的安全，如果非要跨域其实作为前端基本上能做的很少，大部分都需要服务端的二次配合。

例如：nginx 反向代理、Jsonp、nodejs 的 superagent、iframe 等方法。

有兴趣再单独了解就好了。

HTTP 中的 Cookie 知识点，基本上都已经讲解清楚了，我们再次总结一下关键知识点。

参考：

Cookie 个数限制及大小： https://my.oschina.net/gaollg/blog/71299 。

RFC 6265： https://tools.ietf.org/html/rfc6265

cookie 小结： http://www.cnblogs.com/xianyulaodi/p/6476991.html

MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies

https://github.com/mqyqingfeng/Blog/issues/157