跨源与跨站、CORS、Cookie的SameSite属性详解
一、跨源与跨站
四个概念
- 同源same origin
- 跨源cross origin
- 同站same site
- 跨站cross site
首先我们要清楚，跨源和跨站(同源和同站)不是一个概念，跨源是cross origin，跨站是cross site。但其实，这两者是子集的关系，跨站了就必定跨源了，但跨源不一定跨站
1.同源、跨源
同源的要求很严格，两个URL必须协议、域名、端口都相同才会算作同源，否则为跨源
假设有一个URLhttp://test.pasiphae321.top/about/mercury.html，下表是对相关URL是否与其同源的判断
| URL | 是否同源 | 原因 |
|---|---|---|
| ftp://test.pasiphae321.top/about/mercury.html | 不同源 | 协议不同 |
| https://test.pasiphae321.top/about/mercury.html | 不同源 | 协议不同 |
| http://attempt.pasiphae321.top/about/mercury.html | 不同源 | 域名不同 |
| http://test.pasiphae321.top:8080/about/mercury.html | 不同源 | 端口不同 |
| http://test.pasiphae321.top/post/venus.html | 同源 | 只有路径不同 |
关于同源策略的文档见https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
2.同站、跨站
同站的要求较为宽松，只要URL的域名的公共后缀+1相同就属于同站，否则为跨站
**公共后缀(public suffix)**指的是个人、公司、组织能在其上注册子域的域，如com、net、cn、github.io、com.cn、com.ac等，所有的公共后缀见由mozilla的志愿者维护的公共后缀列表(public suffix list)
了解更多关于公共后缀的信息，见https://publicsuffix.org/learn/
例如，www.pasiphae321.top和ftp.pasiphae321.top，这两个域名对应的公共后缀就是top，公共后缀+1均为pasiphae321.top，所以属于同站
3.简单跨源请求、非简单跨源请求
(1)跨源请求
在一个HTML文件里，假设有
img、link、video、audio、script等标签发起的- javascript里XMLHttpRequest发起的
- 用户主动点击链接、提交表单发起的
- fetch API发起的
和当前网页URL不同源的请求，就是跨源请求
(2)简单跨源请求与非简单跨源请求
跨源请求在发送前，浏览器会进行简单跨源请求还是非简单跨源请求的判断，如果是简单跨源请求，那么浏览器直接发送跨源请求，如果是非简单跨源请求，那么就会先发送CORS预检请求
二者的详细定义见https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS#%E7%AE%80%E5%8D%95%E8%AF%B7%E6%B1%82
这里我总结一下，
简单跨源请求:
img、link、video、audio、script等标签发起的- 用户主动点击链接、提交表单发起的
非简单跨源请求
- javascript里XMLHttpRequest发起的
- fetch API发起的
二、CORS跨源资源共享
CORS，Cross Origin Resource Sharing，跨源资源共享
如果一个跨源请求是非简单的，那浏览器就得发送CORS预检请求
关于预检请求的详解见https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS#%E9%A2%84%E6%A3%80%E8%AF%B7%E6%B1%82
三、Cookie的SameSite属性
Cookie的SameSite属性有三种值
- None 任何跨站请求都会携带cookie，注意此值必须搭配secure属性值为true
- Lax 允许部分跨站请求携带cookie
- Strict 禁止任何跨站请求携带cookie
那关于Lax，到底哪些请求会携带cookie呢，以下是一张总结表
本文参考的文章
https://github.com/mqyqingfeng/Blog/issues/157
https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
https://www.ruanyifeng.com/blog/2016/04/cors.html