乐趣区

关于浏览器:Chrome的同源

好久不见。


又来了

  • 好久好久好久不见。
  • 但有时候我想想,人还是得学习。
  • 保持真的是个无益的能力。

同源策略(主讲 Chrome 91 的坑)

简要介绍

  1. 同源 (same-origin):那就是常见的三个元素,协定,主机名,端口(scheme, hostname, port) 都得一样。
  2. 同站(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 是带不过来了。

解决方案

  1. 就只能全副同源同站,这样页面和接口申请永远平安。
  2. 登录态的计划不采纳 Cookie,采纳 Token 或者其余平安计划。
  3. 共事还提供了一个计划,nginx 配置代理后端接口申请,对立走页面域名。

我真的是被 Chrome 始终吊打,80 版本的时候就不放过我,91 版本仍然有老我的项目命中。
我始终也是 get 不到这个限度的意义,因为我感觉轻易在 headers 约定一个字段就越过了这个限度,但有的共事解释说次要是为了避免第三方,比方统计工具之类的,并不是防我。。。

我的 case 略微有点简单,简略形容一下,提供应用。公司的老我的项目,不似当初的脚手架能够做申请代理,然而部署到环境上的页面和接口申请又是同站的,所以只须要解决本地开发问题。

  1. 页面和接口申请都在 host 配置同站的域名
  2. 同为 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

好忘性不如烂笔头。

退出移动版