浏览器Cookie分析

浏览器Cookie

维基百科定义:

Cookie(复数形态Cookies),类型为「小型文本文件」,指某些网站为了辨别用户身份而储存在用户本地终端上的数据。

  • 规格:不超过4kb
  • 存值方式: Key - Value 键值对
  1. 客户端发送HTTP请求到服务器
  2. 服务器收到HTTP后,在响应头添Set-Cookie字段
  3. 浏览器收到后保存Cookie
  4. 后续对该服务器每次请求都通过Cookie字段将信息发送到服务器

Cookie的属性

Name/Value

Name/Value Value会进行编码处理

Expires

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

用于设置过期时间,会存在用户硬盘中,为持久性Cookie,只有被清除和过期才失效

缺省时会显示为Session,一般来说,会话Cookie在存储在内存,关闭浏览器时失效.

有些浏览器会默认提供会话恢复功能,即使关闭列浏览器,会话cookie在会存在

Max-Age

Set-Cookie: id=a3fWa; Max-Age=604800;

失效之前需要经过的秒数,可以为正数, 负数(会话Cookie), 0 (立即删除这个Cookie)

同时存在Expires 和 Max-Age时, Max-Age优先级更高

使用Max-Age存储,在chrome控制台会自动转化显示为Expires,两者公用一列

Domain

Domain 指定了 Cookie 可以送达的主机名。假如没有指定,那么默认值为当前文档访问地址中的主机部分,即是window.location.host部分。

不能跨域设置 Cookie,比如.aliyun.com域名下的页面把 Domain 设置成.baidu.com是无效的

如cookie设置为.huawei.com,子域名访问如.his.huawei.com 和 .heds.huawei.com 都会生效

Path

Path 指定了一个 URL 路径,这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部。

Domain 和 Path 标识共同定义了 Cookie 的作用域:即 Cookie 应该发送给哪些 URL。

Secure&HttpOnly

设置了secure 只能被HTTPS请求携带, 设置了HttpOnly后不能通过脚本用document.cookie方式获取,有助于避免XXS

因此用document.cookie设置cookie不能设置HttpOnly属性

SameSite

SameSite 属性可以让 Cookie 在跨站请求时不会被发送,从而可以阻止跨站请求伪造攻击(CSRF)。

允许为以下值:

  1. Strict 仅允许一方请求携带 Cookie即浏览器将只发送相同站点请求的 Cookie,即当前网页 URL 与请求目标 URL 完全一致。
  2. Lax 允许部分第三方请求携带 Cookie.
  3. None 无论是否跨站都会发送 Cookie.

同源/跨源和同站/跨站(第一方/第三方)是有区别的

  • 同源是指 两个URL 的协议/主机名/端口一致
  • 同站只要求(顶级域名和二级域名相同就可以) 如 his.huawei.comheds.huawei.com 即是同站

Cookie的作用

  1. 会话状态管理(多用于用户登录状态)
  2. 个性化设置(用户自定义设置)
  3. 埋点系统(一些埋点用把用户id埋到cookie里)

缺点

  1. 太小, 只有4kb
  2. 同站点的所有请求会携带所有符合要求的cookie,性能浪费
  3. 由于http请求时无状态的, 可能会存在安全问题

参考

  1. MDN
  2. 浏览器系列之 Cookie 和 SameSite 属性
  3. 深入理解浏览器Cookie
相关推荐
GuWenyue22 分钟前
不用第三方SDK!Vue3原生Fetch实现DeepSeek流式输出,90%前端都会踩的分片解析坑一次性解决
前端·人工智能·llm
独隅24 分钟前
前端离线暂停更新策略:Service Worker 与 PWA 实战指南
前端
不如摸鱼去1 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·ui·微信小程序·前端框架·uni-app
Cloud_bread1 小时前
从ReAct到自主闭环:Agentic Coding核心执行引擎的技术演进
前端·react.js·前端框架
cidy_981 小时前
OptMem 使用教程
前端
满栀5851 小时前
原生JS + ECharts 多图表可视化实战:从业务实现到工程化优化
开发语言·javascript·echarts
杉氧1 小时前
用 Compose 挑战交互与动效天花板:ComposeCraftLab 开源实验室全解析
android·前端·kotlin
Canace2 小时前
AI 生成到 90% 突然断了:你的解决方案是?
前端·人工智能
TinssonTai2 小时前
Vite 8 版 Chrome 插件全家桶,popup/options/sidepanel 一次集齐
前端·vue.js
玉鸯2 小时前
让 Agent 面向用户:AG-UI 协议构建 Agent 前端
前端·python·agent