共计 3067 个字符，预计需要花费 8 分钟才能阅读完成。
好久不见。
又来了
- 好久好久好久不见。
- 但有时候我想想，人还是得学习。
- 保持真的是个无益的能力。
同源策略（主讲 Chrome 91 的坑）
简要介绍
- 同源 (same-origin)：那就是常见的三个元素，协定，主机名，端口(scheme, hostname, port) 都得一样。
- 同站(same-site)：无效的顶级域名 + 顶级域名前的局部，都得一样。
Same Origin
上图中的 scheme, hose name, port 都雷同则为 same origin，否则为 cross origin。
| Origin A(雷同的例子) | Origin B | Explanation of whether Origin A and B are “same-origin” or “cross-origin” |
|---|---|---|
| https://www.example.com:443 | https://www.evil.com:443 | cross-origin: different domains |
| https://www.example.com:443 | https://example.com:443 | cross-origin: different subdomains |
| https://www.example.com:443 | https://login.example.com:443 | cross-origin: different subdomains |
| https://www.example.com:443 | http://www.example.com:443 | cross-origin: different schemes |
| https://www.example.com:443 | https://www.example.com:80 | cross-origin: different ports |
| https://www.example.com:443 | https://www.example.com:443 | same-origin: exact match |
| https://www.example.com:443 | https://www.example.com | same-origin: implicit port number (443) matches |
Same Site
上图中的 eTLD+1 雷同则为 same site，否则为 cross site。
| Origin A(雷同的例子) | Origin B | Explanation of whether Origin A and B are “same-site” or “cross-site” |
|---|---|---|
| https://www.example.com:443 | https://www.evil.com:443 | cross-site: different domains |
| https://www.example.com:443 | https://login.example.com:443 | same-site: different subdomains don’t matter |
| https://www.example.com:443 | http://www.example.com:443 | same-site: different schemes don’t matter |
| https://www.example.com:443 | https://www.example.com:80 | same-site: different ports don’t matter |
| https://www.example.com:443 | https://www.example.com:443 | same-site: exact match |
| https://www.example.com:443 | https://www.example.com | same-site: ports don’t matter |
Schemeful Same Site
上图中的 scheme, eTLD+1 都雷同则为 schemeful same site，否则为 cross site。
| Origin A(雷同的例子) | Origin B | Explanation of whether Origin A and B are “same-site” or “cross-site” |
|---|---|---|
| https://www.example.com:443 | https://www.evil.com:443 | cross-site: different domains |
| https://www.example.com:443 | https://login.example.com:443 | schemeful same-site: different subdomains don’t matter |
| https://www.example.com:443 | http://www.example.com:443 | cross-site: different schemes |
| https://www.example.com:443 | https://www.example.com:80 | schemeful same-site: different ports don’t matter |
| https://www.example.com:443 | https://www.example.com:443 | schemeful same-site: exact match |
| https://www.example.com:443 | https://www.example.com | schemeful same-site: ports don’t matter |
如何查看
Chrome 的 Network 面板中查看 http 申请头中的 Sec-Fetch-Site 字段值。
该字段的值有四个：
- cross-site
- same-site
- same-origin
- none
其中命中了 cross-site 和 cross-origin，则命中 Chrome 的同源同站策略，Chrome 会做出认为平安的拜访限度，比方 Cookie 是带不过来了。
解决方案
- 就只能全副同源同站，这样页面和接口申请永远平安。
- 登录态的计划不采纳 Cookie，采纳 Token 或者其余平安计划。
- 共事还提供了一个计划，nginx 配置代理后端接口申请，对立走页面域名。
我真的是被 Chrome 始终吊打，80 版本的时候就不放过我，91 版本仍然有老我的项目命中。
我始终也是 get 不到这个限度的意义，因为我感觉轻易在 headers 约定一个字段就越过了这个限度，但有的共事解释说次要是为了避免第三方，比方统计工具之类的，并不是防我。。。
我的 case 略微有点简单，简略形容一下，提供应用。公司的老我的项目，不似当初的脚手架能够做申请代理，然而部署到环境上的页面和接口申请又是同站的，所以只须要解决本地开发问题。
- 页面和接口申请都在 host 配置同站的域名
- 同为 http 申请不会命中 Schemeful Same Site，那如果命中了，就在 chrome 配置 中禁用 Schemeful Same-Site 选项，重启即可。
以上是 91 版本的坑。80 之后 91 之前的版本，是没有这么严格的，能够在 chrome 配置 中禁用 same-site-by-default-cookies 及 cookies-without-same-site-must-be-secure 即可。但这些禁用也仅限开发者应用，非长久之计。
没了，还想再记录一下跨域的问题。尽管都是很常见的问题。
参考
- Understanding “same-site” and “same-origin”
- W3 / The Sec-Fetch-Site HTTP Request Header
- The Chromium Projects / Portals
- Chrome Flags
好忘性不如烂笔头。
