前端cookie详解

原文地址

cookie的基本概念

cookie是存储在浏览器的一段数据，由于http协议是无状态的，为了识别用户信息，服务端会把session存储到cookie上，后续的请求会在请求头携带cookie发送给服务端，一般不超过4kb。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。

cookie使用场景

• 会话状态管理（登录状态，购物车，游戏分数）
• 个性化设置（自定义主题）
• 浏览器行为跟踪（跟踪分析用户行为）

cookie的定义

Set-Cookie: name=value[; expires=date][; max-age=secondes][; domain=domain][; path=path][; secure][; HttpOnly][; SameSite=Lax|Strict]

name: cookie的键，不区分大小写

value: cookie的值，必须URL编码

Expires: cookie的过期时间，值是GTM格式的，例如：Sat, 11 Dec 2021 13:06:06 GMT，默认情况下，浏览器会话结束就会删除cookie。不过也可以手动设置删除时间

Max-Age: cookie的有效期，单位s 例如 token=123456; max-age=3600，表示cookie有效期为3600s

Domain: 指定域，例如 domain=blog.1024nav.com 则只会在 blog.1024nav.com 域下有效

Path: 指定路径匹配，不匹配则不会设置cookie，例如 path=/blog 则只会在 /blog 路径下有效

Secure: 只能被 HTTPS 协议加密过的请求发送给服务端，因此可以预防中间人攻击

HttpOnly: cookie只在http传输，客户端无法通过js document.cookie 获取到

SameSite: Set-Cookie: key=value; SameSite=Strict，允许服务器要求某个 cookie 在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击

现在新版浏览器，例如Chorme或Firefox，如果网站不上HTTPS，就无法使用Cookie的 Secure 标记

cookie前缀

cookie可以使用自定义前缀，只有在cookie设置 Secure 指令，就可以包含 __Secure- 或者 __Host- 前缀，而且 Path 必须为整站 "/"

一个完整的cookie例子

Set-Cookie: id=u8dd; Expires=Mon, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly

nodejs设置Cookie的方法

response.setHeader('Set-Cookie', ['name=1024nav.com', 'Token=kjjijwe1231dsad']);

客户端操作cookie

通过 document.cookie 属性可创建新的 cookie，也可通过该属性访问非 HttpOnly 标记的 cookie

cookie安全

由于客户端能够直接通过js来操作cookie，这样无疑很容易被不良少年利用，但并不代表不能用，为了提高 cookie 的安全，可以通过以下解决方法

• 设置 HttpOnly，例如NodeJs的设置方法如下

response.setHeader('Set-Cookie', 'foo=bar; HttpOnly');

• 给 cookie 设置超期时间，设置 SameSite 值为 Strict 或 Lax
• 升级站点为 HTTPS