彻底搞懂「同源Same-Origin」和「同站Same-Site」的区别

作为一名前端,肯定会接触到「同源」和「同站」这两个名词,比如:

  • Ajax 请求会受到浏览器同源策略的制约
  • Cookie 的 SameSite 属性表示该 Cookie 是否能被跨站发送

那究竟什么是同源(Same-Origin)、什么是同站(Same-Site)呢?在弄清楚这两个概念之前,必须先弄清楚「源」和「站」的区别:

源(Origin)

源(origin)= 协议(scheme)+ 主机名(hostname)+ 端口号(port)

源

举例

假如网址是:

1
https://www.example.com:443/foo

那么该网址的源就是:

1
https://www.example.com:443

站(Site)

站(site)= eTLD+1

站

TLD 表示顶级域名,例如 .com.org.cn 等等,顶级域名并不是一成不变的,会随着时间推移增加,例如前段时间就增加了 .gay 顶级域名,可以说是广大同性交友爱好者的福音,目前所有顶级域名被收录到了顶级域名数据库里面。

TLD+1 表示顶级域名和它前面二级域名的组合,例如网址是:

1
https://www.example.com:443/foo

那么:

  • TLD.com
  • TLD+1example.com

但是,这种表示方式是有缺陷的,例如对于下面的网址:

1
https://www.example.com.cn

如果按照上面的规则,它的 TLD+1 就是 com.cn,并不能表示这个站点,真正能表示这个站点的应该是 example.com.cn 才对,所以衍生出 eTLD 的概念,即有效顶级域名:

  • eTLDcom.cn
  • eTLD+1example.com.cn

eTLD 由 Mozilla 维护在公共后缀列表(Public Suffix List)中,而「站」的定义就是这里的 eTLD+1

有了上面的解释之后,相信大家对「源」和「站」的概念都理解了,接下来就解释一下「同源」和「同站」的含义:

同源和同站

  • 同源:协议(scheme)+ 主机名(hostname)+ 端口号(port) 完全一致。
  • 同站:eTLD+1 完全一致。

https://www.example.com:443 为例,下面给出了一系列的网址是否与其同源或同站的解释:

对比网址 是否同源 是否同站
https://www.other.com:443 否,因为 hostname 不同 否,因为 eTLD 不同
https://example.com:443 否,因为 hostname 不同 是,子域名不影响
https://login.example.com:443 否,因为 hostname 不同 是,子域名不影响
http://www.example.com:443 否,因为 scheme 不同 是,协议不影响
https://www.example.com: 80 否,因为 port 不同 是,端口号不影响
https://www.example.com:443 是,显式完全匹配 是,完全匹配
https://www.example.com 是,隐式完全匹配 (https端口号是443) 是,端口号不影响