再好好聊聊 HTTP 里的 Cookie | 实用 HTTP

时间 2019-12-05

原文原文链接

题图：by Juan Pablo Arenashtml

1、序

Hi，你们好，我是承香墨影！前端

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

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

HTTP 协议是一种无状态的“松散协议”，它不会记录不一样请求的状态，而且由于它自己包含了两端（客户端和服务端），根据请求和响应来区分，它大部分的内容都只是一个建议，其实双边是能够不遵照此建议的。小程序

“这里写了建议零售价 2 元...”
“哦，不接受建议！”跨域

文本是本系列的第四篇，前三篇传送门：浏览器

自己 HTTP 就是一个无状态的协议，可是有时候咱们又有须要增长状态的需求，这个时候延伸出来了 Cookie，利用 Cookie 可让传输的时候保持一些状态信息。缓存

本文就来说讲 Cookie 的全部细节。安全

2、Cookie的使用

2.1 什么是 Cookie？

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

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

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

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

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

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

2.2 一个完整的 Cookie 传输流程

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

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

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

在响应头（Response Header）中，使用 Set-Cookie 传递不一样的 Cookie 数据，多个数据能够分开成多个 Set-Cookie 头。

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

3、Cookie 的细节

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

3.1 Cookie 的类型

cookie 其实都是存储在客户端，一般咱们说 cookie 对应的客户端，就是在说浏览器。

对于 cookie，咱们能够简单的将 cookie 分为两类：

会话 cookie。
持久 cookie。

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

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

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

3.2 Cookie 的配置参数

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

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

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

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

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

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

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

Name:Value ：Cookie 存储的数据就是一个 Key-Value 的键值对，因此这两个参数没什么争议，就是数据的 Key 和 Value。
Domain：Cookie 的域，限制请求头传输的域。
Path：域中与 Cookie 相关的路径前缀。
Expires/Max-Age：过时时间或者超时间隔。
http：此属性为 True，表示只会在 HTTP 请求头中携带此 Cookie 信息，而没法经过 document.cookie 来访问此 Cookie。
Secure：安全，是否只有在使用 SSL 链接时才发送这个 Cookie。

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

3.3 Set-Cookie2 和 Cookie2

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

你们了解一下便可，有兴趣能够参考 RFC 6265。

RFC 6265:
https://tools.ietf.org/html/r...

3.4 浏览器对 Cookie 的限制

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

我简单找了一些资料，来讲明不一样浏览器对 Cookie 的支持状况。

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

4、Cookie的查缺补漏

4.1 Cookie 安全

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

1. http 属性

设置了 http 属性，标识它是一个 “HttpOnly” 的，那么经过一些脚本程序（例如 JS的 document.cookie）将没法读取到这个 Cookie 信息，它只会出如今请求的报文头内。

2. secure 属性

secure 属性强制该 Cookie 只有在 SSL 的环境下才会想服务器传输，相对也保证了传输的安全。

4.2 Cookie 不支持跨域

Cookie 自己是不支持跨域的，必定程度也保证了 Cookie 的安全，若是非要跨域其实做为前端基本上能作的不多，大部分都须要服务端的二次配合。

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

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

5、Cookie 小结

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

1. Cookie 主要是为了解决 HTTP 协议无状态的问题。

2. 服务端经过 Set-Cookie 响应头来向客户端设置 Cookie。

3. 客户端经过 Cookie 请求头向服务端发送以前存储的 Cookie 数据。

4. Cookie 依据过时时间进行区分，将类型分为：临时 Cookie 和持久 Cookie。

5. Cookie 能够经过配置不一样的参数，进行限制，例如过时时间、支持的域名、是否安全（secure）等。

6. Cookie 不支持跨域，跨域还须要其余的方式绕开来实现。

7. Cookie 只能作到相对的安全，任何事情没有绝对的安全。

参考：

「联机圆桌」👈一年 50 个优质问题，上桌联机学习。

公众号后台回复成长『成长』，将会获得我准备的学习资料，也能回复『加群』，一块儿学习进步；你还能回复『提问』，向我发起提问。