Cookie和Storage

简述

cookie是一种小型文本文件，大小通常不超过 4KB，主要用于在 “用户” 和 “网站服务器” 之间传递少量关键信息，解决 HTTP 协议 “无状态” 的问题
cookie可以存储少量用户信息，包括用户身份认证、用户个性化主题(暗黑模式等)、用户描述(方便广告投送)等

cookie类似一个卡包，具备以下功能：

能够存放多个出入证 这些出入证来自不同的网站，也可能是一个网站有多个出入证，分别用于出入不同的地方
能够自动出示出入证 客户端在访问不同的网站时，能够自动的把对应的出入证附带请求发送出去
正确的出示出入证 客户端不能将百度的出入证发送给1淘宝
管理出入证的有效期 客户端要能够自动的发现那些已经过期的出入证，并把它从卡包内移除

卡包内的每一张卡就是一个cookie

容量小（一般最大 4KB）
有过期时间（可以设置什么时候失效）
按域名隔离（百度的 Cookie 不会被淘宝读取）
会随着每次请求自动加入请求头再发送给服务器

node.js设置cookie

cookie 内容主体

key：键
value：值
cookie可配置项：
domain：域，表达这个cookie是属于哪个网站的
path：路径，表达这个cookie是属于该网站的哪个基路径的，就好比是同一家公司不同部门会颁发不同的出入证。比如/news，表示这个cookie属于/news这个路径的
secure：是否使用安全传输，即是否必须使用https
expire：过期时间，表示该cookie在什么时候过期
httpOnly：禁止JS脚本通过 document.cookie获取cookie1
signed：若为 true，Cookie 会被签名（需配合 cookie-parser 密钥），可通过 req.signedCookies 读取，用于防篡改

// main.ts
app.use(cookieParser("secret")); // 将cookie对象注入到res中

// service/test.ts
testRouter.post("/token", (req: Request, res: CustomResponse) => {
  // 给cookie设置名为token和user_id的字段
  res.cookie("token", "zheshitokendezhi", {
    maxAge: 60 * 60 * 1000,
    httpOnly: true, // 禁止客户端通过JS脚本获取cookie
    domain: "localhost",
    path: "/",
    signed: true
  });
  res.cookie("user_id", "10086", {
    maxAge: 24 * 60 * 60 * 1000,
    httpOnly: true,
    signed: true
  });
  res.header("Authorization", "Bearer zheyibanshizhenduiyidongduandelingpai");
  const headers = req.headers;
  const cookies = req.headers.cookie;
  res.send({
	 cookies,
  });
});

由于浏览器严格的域名隔离机制和同源策略，cookie并不支持跨域，对于SSO等复杂的业务场景无法实现需要由Token等技术实现
cookie存储容量比较小

cookie、sessionStorage、localStorage 都是保存本地数据的方式
其中，cookie 兼容性较好，所有浏览器均支持。浏览器针对 cookie 会有一些默认行为，比如当响应头中出现set-cookie字段时，浏览器会自动保存 cookie 的值；再比如，浏览器发送请求时，会附带匹配的 cookie 到请求头中。这些默认行为，使得 cookie 长期以来担任着维持登录状态的责任。与此同时，也正是因为浏览器的默认行为，给了恶意攻击者可乘之机，CSRF 攻击就是一个典型的利用 cookie 的攻击方式。虽然 cookie 不断的改进，但前端仍然需要另一种更加安全的保存数据的方式
HTML5 新增了 sessionStorage 和 localStorage，前者用于保存会话级别的数据，后者用于更持久的保存数据。浏览器针对它们没有任何默认3行为，这样一来，就把保存数据、读取数据的工作交给了前端开发者，这就让恶意攻击者难以针对登录状态进行攻击。
cookie 的大小是有限制的，一般浏览器会限制同一个域下的 cookie 总量不超过 4KB，而 sessionStorage 和 localStorage 则拥有更大的空间，多数浏览器一般要求不超过 5MB~10MB
cookie 会与 domain、path 关联，而 sessionStorage 和 localStorage 只与 domain 关联

Linzex

简述

cookie的功能

cookie的特点

node.js设置cookie

cookie的不足

cookie与sessionStorage/localStorage区别

Cookie和Storage

评论交流