SameOrigin
Same-Origin 以 scheme、host、port 三元组判断两个 URL 是否同源,是浏览器隔离 DOM、存储和脚本跨源读取能力的基础安全边界。
#frontend
#growing
#concept
#browser
[!info] related notes
- 所属 MOC: frontend-basics-moc
- 关系笔记: 跨域
- 放行机制: CORS
- 相关概念: xss-cross-site-scripting, CSRF 跨站请求伪造, same-site, jwt
- 安全: 安全 MOC
SameOrigin
一句话定义
同源 (Same-Origin) 是浏览器的安全策略:两个 URL 的 协议 (protocol)、主机 (host)、端口 (port) 三者完全一致时才同源。
判定公式
协议 + 主机 + 端口 三者全部相同 → 同源
任意一个不同 → 跨源
同源 / 跨源示例
| URL A | URL B | 结果 | 差异 |
|---|---|---|---|
https://example.com/a | https://example.com/b | 同源 | 路径不同不算 |
https://example.com | http://example.com | 跨源 | 协议不同 |
https://example.com | https://sub.example.com | 跨源 | 主机不同 |
https://example.com:443 | https://example.com:8080 | 跨源 | 端口不同 |
https://example.com | https://example.com:443 | 同源 | 443 是 HTTPS 默认端口 |
同源策略保护什么
同源限制了跨源页面之间的以下访问:
- DOM 访问:
iframe.contentWindow.document跨源时被阻止。 - Cookie / localStorage / sessionStorage:每个源独立存储,互不可见。
- IndexedDB / Cache API:同样受源隔离。
- AJAX 请求:
fetch/XMLHttpRequest向跨源地址请求时,响应默认不可读(请求会发出,但浏览器拦截响应)。
注意:
<script src>、<img src>、<link href>等标签的资源加载不受同源策略限制(但读取内容受限)。这是 JSONP 能工作的前提。
与 CORS 的边界
本页只维护 origin 判定与同源隔离模型。
浏览器如何通过 HTTP Header 受控放行跨源脚本读取,统一看 CORS;“为什么会出现跨域问题、SOP 与 CORS 怎样配合”看 跨域。
学习检查
不看正文回答:
- Same-Origin 的判定三元组是什么?
- path 不同为什么仍可以同源?
- 默认端口省略与显式写出时,什么时候仍属于同源?
- 同源策略主要限制哪些跨源读取/访问能力?
- 为什么某些 img / script 资源可以跨源加载,却不代表脚本能随意读取跨源响应?
- CORS 为什么是对同源策略的受控放宽,而不是“关闭浏览器安全”?
- 给两组 URL,闭卷判断是否同源,并指出差异发生在哪个维度。