Origin

先说说origin是什么。origin是scheme(或者说协议描述符protocol identifier)，主机名和端口的组合。看下面的URL例子：

www.qq.com:443

这个URL中，scheme是https:，主机名是www.qq.com, 端口是443。那么它的origin就是www.qq.com:443 当然端口是可选的，HTTPs的默认端口就是443，因此www.qq.com 的origin就是www.qq.com 。

既然搞清了origin，那么什么是same-origin就很好理解了。我们通过对比"same-origin"和"cross-origin"来学习它们分别是什么。

从字面上来说，对于任何的网站，只要它们拥有同样的scheme，主机名和端口组合，那么它们就是属于same-origin，否则它们就是cross-origin。

因此，对于www.qq.com:443 ，下面的表格列出了same-origin和部分cross-origin：

same-origin	cross-origin
www.qq.com:443	www.tencent.com:443
www.qq.com	www.qq.com
www.qq.com:8080
weixin.qq.com:443

Site

接下来说site。什么是site？通俗地说，site就是URL中顶级域名和它前面的部分的组合。再看下面这个URL例子：

www.qq.com:443

它的顶级域名是.com，顶级域名前的部分是qq。那么它的site就是qq.com。那顶级域名是什么？它就是我们常见的.com, .org这些URL的后缀。

有时我们也会遇到类似.com.cn, .org.cn这类后缀。在这种情况下我们就无法通过顶级域名+1的方式来唯一标识site。有效顶级域名(Effective TLD或者eTLD)应运而生。我们可以在publicsuffix.org/list/ 找到所有支持的有效顶级域名。那么，在这种后缀的情况下，site就是eTLD+1。

继续看例子:

www.sina.com.cn:443

这个URL的TLD是.cn，eTLD是.com.cn，eTLD+1就是sina.com.cn。那么这个URL的site就是sina.com.cn。

对于www.qq.com:443 ，下面的表格列出了same-site和部分cross-site：

same-site	cross-site
movie.qq.com:443	www.tencent.com:443
www.qq.com
www.qq.com:8080
www.qq.com:443

总结一下，对于一个URL，origin涵盖了scheme，主机名和端口，而site只关注eTLD + 1。

搞清它们的区别，对于前端开发中关于跨站/跨域问题的诊断和修复至关重要。

更多内容，请关注微信公众号“五里墩码农”

same-site和same-origin，你真的明白吗？

Origin

Site