面试取经：网络篇-cookie

cookie

场景

登录凭证

服务器识别是谁在请求的一个凭证，由于http是无状态的，服务器无法识别后续请求是否属于同一来源

登录流程

• 登陆成功
• 服务器生成一个带身份认证的cookie
• 服务器将cookie设置到响应头
• 后续请求，浏览器后自动附带cookie

cookie的组成

• key
• value
• domain，域，表示cookie属于哪个域名下
• path，路径，表示cookie属于当前网站哪个基路径
• secure，是否使用安全传输
• expire，过期时间
• max-age，相对过期时间
• httponly，

浏览器自动附带cookie到请求头的条件（同时满足）

• cookie 没过期

• cookie 中的域和当前请求的域是匹配的

  • test.com 可匹配 test.com，www.test.com，blogs.test.com 等等
  • cookie 无关乎端口

• cookie中path和当前请求的path是匹配的

  • / 可以匹配任意

• 验证cookie的安全传输

  • secure = true && https
  • secure = false ，则http，https都可

如何设置cookie

• 服务器响应
• 客户端自行设置

服务器设置cookie

服务器通过设置响应头，来设置cookie

set-cookie:key=value;path?;domain=?;expire=?;secure?;httponly?

除了key=value必须设置，其他皆可选

• path，如果不设置，浏览器会将其自动设置为当前请求的路径
• domain，如果不设置，浏览器会将其自动设置为当前请求的域
• exipre，过期时间，要求是一个有效的格林威治时间Fri,07 Aug 2025 22:03:00 GMT
• max-age，相对过期时间，expire和max-age取其一，两者都没设置，则会话结束过期
• secure，设置cookie是否是安全连接，表示cookie只能在https请求发送
• httponly，设置cookie是否能用于传输，表示仅能用于传输，不允许客户端通过js获取，有效防止XSS（跨站脚本攻击）

删除cookie

服务器响应一个同样的域、同样的路径、同样的key、max-age=-1

set-cookie:key=;domain=当前域;path=/;max-age=-1

客户端设置cookie

// 设置
documnet.cookie = "key=value;path?;domain=?;expire=?;secure?;httponly?"
// 读取
document.cookie
// 删除
document.cookie = "key=;domain=当前域;path=/;max-age=-1"