《用得上的前端知识》系列 - 你我都很忙，能用100字说清楚，绝不写万字长文

基本概念

Cookie：Cookie 就是服务器委托浏览器存储在客户端里的一些数据，而这些数据通常都会记录用户的关键识别信息。

Cookie 的工作原理

Cookie 是由浏览器负责存储的，而不是操作系统。所以，它是“浏览器绑定”的，只能在本浏览器内生效；它的工作需要用到两个头字段：

工作原理：

服务端在响应头中使用头字段 Set-Cookie 向客户端发送 Cookie，格式为“key=value”；如果有多个 Cookie 要发送，则添加多个 Set-Cookie 字段；
浏览器收到响应报文，看到里面有 Set-Cookie，知道这是服务器给的身份标识，于是就保存起来，下次再请求的时候就自动把这个值放进 Cookie 字段里发给服务器。多个“key-value”之间用分号加空格（“; ”）隔开；

Cookie 的生命周期可以通过 2 种方式设置：

- Expires 俗称“过期时间”，用的是绝对时间点，可以理解为“截止日期”（deadline）。
- Max-Age 用的是相对时间，单位是秒，浏览器用收到报文的时间点再加上 Max-Age，就可以得到失效的绝对时间。

Expires 和 Max-Age 可以同时出现，两者的失效时间可以一致，也可以不一致，但浏览器会优先采用 Max-Age 计算失效期。

让浏览器仅发送给特定的服务器和 URI，避免被其他网站盗用。

通过 Domain 和 Path 指定了 Cookie 所属的域名和路径。浏览器在发送 Cookie 前会从 URI 中提取出 host 和 path 部分，对比 Cookie 的属性。如果不满足条件，就不会在请求头里发送 Cookie；
通常 Path 就用一个“/”或者直接省略，表示域名下的任意路径都允许使用 Cookie。

属性 HttpOnly 会告诉浏览器，此 Cookie 只能通过浏览器 HTTP 协议传输，禁止其他方式访问，浏览器的 JS 引擎就会禁用 document.cookie 等一切相关的 API，脚本攻击也就无从谈起了；
属性 SameSite 可以防范“跨站请求伪造”（XSRF）攻击，设置成 SameSite=Strict 可以严格限定 Cookie 不能随着跳转链接跨站发送，而 SameSite=Lax 则略宽松一点，允许 GET/HEAD 等安全方法，但禁止 POST 跨站发送。
属性叫 Secure ，表示这个 Cookie 仅能用 HTTPS 协议加密传输，明文的 HTTP 协议会禁止发送。但 Cookie 本身不是加密的，浏览器里还是以明文的形式存在。