← [ BACK_TO_NOTES ]

SameOrigin

Same-Origin 以 scheme、host、port 三元组判断两个 URL 是否同源,是浏览器隔离 DOM、存储和脚本跨源读取能力的基础安全边界。

#frontend #growing #concept #browser

[!info] related notes

SameOrigin

一句话定义

同源 (Same-Origin) 是浏览器的安全策略:两个 URL 的 协议 (protocol)、主机 (host)、端口 (port) 三者完全一致时才同源。

判定公式

协议 + 主机 + 端口  三者全部相同 → 同源
任意一个不同        → 跨源

同源 / 跨源示例

URL AURL B结果差异
https://example.com/ahttps://example.com/b同源路径不同不算
https://example.comhttp://example.com跨源协议不同
https://example.comhttps://sub.example.com跨源主机不同
https://example.com:443https://example.com:8080跨源端口不同
https://example.comhttps://example.com:443同源443 是 HTTPS 默认端口

同源策略保护什么

同源限制了跨源页面之间的以下访问:

  1. DOM 访问:iframe.contentWindow.document 跨源时被阻止。
  2. Cookie / localStorage / sessionStorage:每个源独立存储,互不可见。
  3. IndexedDB / Cache API:同样受源隔离。
  4. AJAX 请求:fetch / XMLHttpRequest 向跨源地址请求时,响应默认不可读(请求会发出,但浏览器拦截响应)。

注意:<script src>、<img src>、<link href> 等标签的资源加载不受同源策略限制(但读取内容受限)。这是 JSONP 能工作的前提。

与 CORS 的边界

本页只维护 origin 判定与同源隔离模型。

浏览器如何通过 HTTP Header 受控放行跨源脚本读取,统一看 CORS;“为什么会出现跨域问题、SOP 与 CORS 怎样配合”看 跨域。

学习检查

不看正文回答:

  1. Same-Origin 的判定三元组是什么?
  2. path 不同为什么仍可以同源?
  3. 默认端口省略与显式写出时,什么时候仍属于同源?
  4. 同源策略主要限制哪些跨源读取/访问能力?
  5. 为什么某些 img / script 资源可以跨源加载,却不代表脚本能随意读取跨源响应?
  6. CORS 为什么是对同源策略的受控放宽,而不是“关闭浏览器安全”?
  7. 给两组 URL,闭卷判断是否同源,并指出差异发生在哪个维度。
创建于 2026/3/13 更新于 2026/9/30
Digital Biome
Access

键盘导航

j / k / ↑ / ↓
选择对象
Enter / o
打开选择
/ 或 Ctrl+K
全站搜索
i / f / 1–4
筛选当前列表
g → h / l / p / t / a
首页 / 笔记 / 项目 / 工具 / About
r → 1–9
打开所选对象的关联
u
返回上一页
Esc
关闭浮层 / 取消命令;输入框内清空文本