Cookie
用于服务端辨别用户身份,储存在用户本地的数据。
可以解决客户端与服务端会话状态的问题,这个状态是指后端服务的状态而非通讯协议(HTTP)的状态。
Cookie 值的存储
域名下的 cookie 一般来说是最大是 4KB。当然大家也不会真的放这么多。
Name / Value
存储是以 Name=Value
的形式。
Domain / Path 作用域
Domain
是限制域名,设置为 www.lilnong.top
的话,cors.lilnong.top
就获取不到了。
Path
是限制路径,如果设置为 /cors
的话,/api
下的请求就不会携带该 cookie
。
Expires / Max-Age 有效性
Expires
是当前 Cookie
的过期时间,默认是会话级别。
Max-Age
是当前 Cookie
经过多少秒失效。
- 大于 0 是计算经过多少秒失效
- 等于 0 是会话级别,关闭浏览器就失效
- 小于 0 是指 cookie 无效,立即删除
Max-Age
的优先级比 Expires
更高。
HttpOnly 安全性
设置以后客户端脚本就无法通过 document.cookie
等方式获取。
有助于避免 XSS 攻击。
Secure 安全性
设置以后客户端只有 HTTPS
协议下才会发送给服务端。
使用 HTTPS
安全协议,可以保护 Cookie 在浏览器和 Web 服务器间的传输过程中不被窃取和篡改。
SameSite 安全性
可以设置 Cookie
在什么场景下会被发送。从而屏蔽跨站时发送 cookie,用于阻止跨站请求伪造攻击(CSRF)。
SameSite
可以设置下面三个值:
- Strict 只允许同站请求携带 Cookie。比如
lilnong.top
跳转到www.lilnong.top/cors/
,就属于同站。
- Lax(chrome 80 后的默认值) 允许部分第三方请求场景 携带Cookie。
- None(chrome 80 前的默认值) 无论是否跨站都会发送 Cookie。必须同时加上 Secure 属性,否则无效,也就是说只支持 HTTPS。
IOS 12 的 Safari 以及老版本的一些 Chrome 会把 SameSite=none 识别成 SameSite=Strict,所以服务端必须在下发 Set-Cookie 响应头时进行 User-Agent 检测,对这些浏览器不下发 SameSite=none 属性
接下来我们来比对一下跨站的各个场景,Demo 晚点给吧。
场景类型 | 场景备注 | Strict | Lax | None |
链接 | <a href> |
不发 | 发 | 发 |
预加载 | <link rel="prerender"> |
不发 | 发 | 发 |
get 表单 | <form method="get"> |
不发 | 发 | 发 |
post 表单 | <form method="post"> |
不发 | 不发 | 发 |
iframe | <iframe src> |
不发 | 不发 | 发 |
AJAX | <a href> |
不发 | 不发 | 发 |
图片 | <img src> |
不发 | 不发 | 发 |
script | jsonp |
查看 Cookie
- 开发者工具 -> application -> Storage -> Cookies -> 选择对应的域名
document.cookie
这里只能获取到允许获取 (HTTPOnly) 的。
- 去本地文件中查看。因为他是持久化的,所以存放在磁盘上。一些优化管家可以删除垃圾(缓存文件)。
设置 Cookie
- 响应头中的
Set-Cookie
,这个属于最常用的方式。
Set-Cookie: key1=value1; path=path; domain=domain; max-age=max-age-in-seconds; expires=date-in-GMTString-format; secure; httponly; SameSite=None
document.cookie="key=value"
这种是前端设置 cookie 。
概念解释
「同站 (same-site)、跨站 (cross-site)
」与「第一方 (first-party)、第三方 (third-party)
」这两个概念是等价的。但是和 浏览器同源策略(SOP) 中的「同源 (same-origin)、跨域 (cross-origin)
」是完全不同的概念
同站和跨站
同站是指二级域名+顶级域名,相等即可。
比如 www.lilnong.top
解析一下就是 主机名.二级域名.顶级域名
,所以判断规则还是比较松的。
eTLD 表示有效顶级域名,注册于 Mozilla 维护的公共后缀列表( Public Suffix List )中,例如,.com、.co.uk、.github.io 等。eTLD+1 表示,有效顶级域名+二级域名,例如 taobao.com 等。
同源和跨域
同源策略的同源是指两个 URL 的协议/主机名/端口一致。
域名 | 备注(请求 https://www.lilnong.top) |
https://www.lilnong.top | (同源)同协议、同主机、同端口 |
http://www.lilnong.top | (跨域)不同协议 |
https://www.lilnong.top:8081 | (跨域)不同端口 |
http://www.lilnong.top:8081 | (跨域)不同协议、不同端口 |
https://cors.lilnong.top | (跨域)不同主机 |
总结
- 基于上面关于 Cookie 的介绍我们可以知道,Chrome 跨站时 Cookie 会因为
SameSite
的设置导致异常。
- 跨域时要携带
Cookie
时,我们还要注意withCredentials
的设置。然后就是清除 cookie,重启浏览器了。