SameOrigin
同源规则的判定标准与浏览器安全边界说明
#tech / dev / frontend
#status / growing
#type / concept
#platform / browser
[!info] related notes
- 所属 MOC: frontend-basics-moc
- 相关概念: cross-origin, xss-cross-site-scripting, csrf, same-site, jwt
- 安全: security-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 机制概览
跨源资源共享 (CORS) 是浏览器允许受控跨源访问的机制：
- 简单请求：GET/HEAD/POST 且满足特定 header 限制，浏览器直接发送，服务器返回
Access-Control-Allow-Origin头。 - 预检请求 (Preflight)：非简单请求前，浏览器先发
OPTIONS请求确认服务器是否允许。 - 凭据请求：需要携带 Cookie 时，前端设
credentials: 'include'，后端必须返回Access-Control-Allow-Credentials: true且Allow-Origin不能是*。
// 前端：带凭据的跨源请求
fetch('https://api.example.com/data', {
credentials: 'include',
});
// 后端（Node.js/Express）
res.setHeader('Access-Control-Allow-Origin', 'https://myapp.com');
res.setHeader('Access-Control-Allow-Credentials', 'true');调试技巧
- 浏览器 Console 中看到
CORS policy错误时，检查后端响应头是否包含正确的Access-Control-Allow-Origin。 No 'Access-Control-Allow-Origin' header= 服务器没配置 CORS。Allow-Origin值不匹配请求的 Origin = 域名白名单没包含你的前端地址。- Network 面板中，预检请求是
OPTIONS方法，状态码204表示通过。