理解「跨域（源）」和「跨网站」的差异与联系

2024-04-23 · 434 字 · 约 2 分钟

uncategorized

# 1. 跨域和跨站比较

URL A: https://www.example.com:443

URL B URL A 和 URL B 的差异 源（域） 网站 无协议网站
https://www.evil.com:443 域不同 跨源 cross-origin 跨网站 cross-site 跨网站 cross-site
https://example.com:443 子域不同
（删除了 www.）		 跨源 cross-origin 同网站 same-site 无协议同网站 schemeless same-site
https://login.example.com:443 子域不同
（www. 改为 login.）		 跨源 cross-origin 同网站 same-site 无协议同网站 schemeless same-site
http://www.example.com:443 协议/方案不同 跨源 cross-origin 跨网站 cross-site 无协议同网站 schemeless same-site
https://www.example.com:80 端口不同 跨源 cross-origin 同网站 same-site 无协议同网站 schemeless same-site
https://www.example.com:443 完全匹配 同源 same-origin 同网站 same-site 无协议同网站 schemeless same-site
https://www.example.com 隐式端口号 (443) 匹配 同源 same-origin 同网站 same-site 无协议同网站 schemeless same-site

# 2. URL 组成部分与跨域/跨站的联系

URL: http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

组成部分 示例 同源（域）same-origin 同网站 same-site 无协议同网站 schemeless same-site
域 example.com 必须一致 必须一致 必须一致
子域 www 必须一致 N/A N/A
协议/方案 http:// 必须一致 必须一致 N/A
端口(含隐式) :80 必须一致 N/A N/A
路径 /path/to/myfile.html N/A N/A N/A
查询 ?key1=value1&key2=value2 N/A N/A N/A
片段 #SomewhereInTheDocument N/A N/A N/A

# 3. 参考

  1. 了解“同网站”和“同源”  |  Articles  |  web.dev: https://web.dev/articles/same-site-same-origin?hl=zh-cn
  2. 标识互联网上的内容 - HTTP | MDN: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
  3. Fetch Standard: https://fetch.spec.whatwg.org/#cors-protocol