一、同源策略的本质与安全意义

同源策略（Same-Origin Policy）是浏览器实施的核心安全机制，其核心逻辑可概括为”三同原则”：协议相同（Protocol）、域名相同（Domain）、端口相同（Port）。当三个要素完全一致时，浏览器才允许页面通过JavaScript访问目标资源，否则将触发跨域限制。

这一机制诞生于Web早期阶段，旨在解决两个关键安全问题：

数据隔离：防止恶意网站通过iframe嵌入银行页面，窃取用户敏感信息
权限控制：避免第三方脚本随意访问本地存储（如Cookie、LocalStorage）

以金融场景为例，若未实施同源策略，攻击者可通过构造如下代码窃取用户会话：

<!-- 恶意网站代码 -->
<iframe src="https://bank.example.com"></iframe>
<script>
  // 尝试访问银行页面的DOM
  const bankFrame = document.querySelector('iframe');
  bankFrame.onload = function() {
    console.log(bankFrame.contentDocument.body.innerHTML); // 被策略阻止
  };
</script>

二、同源策略的四大应用场景

1. DOM访问限制

浏览器会严格阻止跨域页面通过document对象访问其他窗口的DOM结构。这种限制体现在：

无法读取跨域iframe的内容
不能通过postMessage外的机制修改跨域窗口属性
跨域窗口的window.opener属性访问受限

2. Cookie与存储隔离

同源策略对存储机制实施分层保护：

Cookie：默认仅在同源请求中携带，可通过SameSite属性进一步控制
LocalStorage/SessionStorage：完全遵循同源限制，不同源页面无法互相读写
IndexedDB：数据库实例与源强绑定，跨域访问直接报错

3. XMLHttpRequest/Fetch限制

AJAX请求默认禁止跨域，服务器需显式配置CORS头：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST

4. WebSocket安全模型

虽然WebSocket协议本身支持跨域，但连接建立阶段仍需验证：

客户端发送Origin头声明来源
服务器通过响应头Sec-WebSocket-Accept验证
现代浏览器会拦截未通过验证的连接

三、突破同源限制的合法方案

1. CORS（跨域资源共享）

CORS通过服务器响应头实现精细控制，典型配置示例：

# 允许特定源访问
Access-Control-Allow-Origin: https://trusted.example.com
# 允许携带认证信息
Access-Control-Allow-Credentials: true
# 预检请求缓存时间
Access-Control-Max-Age: 86400

实现要点：

简单请求（GET/POST等）直接发送
复杂请求（含自定义头）需先发送OPTIONS预检
浏览器自动处理响应头验证

2. JSONP技术

利用<script>标签不受同源限制的特性，通过回调函数获取数据：

// 前端代码
function handleResponse(data) {
  console.log('Received:', data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

安全风险：

仅支持GET请求
需服务器配合回调参数
存在XSS攻击风险，需严格校验输入

3. 代理服务器方案

通过同源服务器中转请求，常见实现方式：

Nginx反向代理：

location /api/ {
  proxy_pass https://real-api.example.com/;
  proxy_set_header Host $host;
}

服务端渲染（SSR）：在服务端完成跨域请求
BFF层：构建专门的后端聚合服务

4. postMessage通信

实现跨域窗口间安全通信的API：

// 发送方
const popup = window.open('https://other.example.com');
popup.postMessage({ type: 'AUTH_TOKEN', value: 'abc123' }, 'https://other.example.com');
// 接收方
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted.example.com') return;
  console.log('Received:', event.data);
});

安全实践：

始终验证event.origin
避免使用*作为目标源
对传输数据进行加密

四、安全配置最佳实践

1. CORS头设置规范

避免使用Access-Control-Allow-Origin: *处理敏感数据
对携带认证的请求，必须指定具体域名
限制允许的HTTP方法（如仅GET/POST）

2. Cookie安全配置

Set-Cookie: session_id=abc123; 
  SameSite=Strict; 
  Secure; 
  HttpOnly;
  Domain=.example.com;
  Path=/;

3. 内容安全策略（CSP）

通过CSP头进一步限制资源加载：

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' https://trusted.cdn.com;
  connect-src 'self';
  img-src 'self' data:;

五、常见安全漏洞与防范

1. CSRF攻击

攻击原理：利用用户认证状态，诱导其访问恶意站点发起请求
防御方案：

使用CSRF Token
验证Origin/Referer头
启用SameSite Cookie属性

2. XSS攻击

攻击原理：注入恶意脚本窃取数据
防御方案：

输入输出转义
使用CSP限制脚本执行
避免使用innerHTML，优先使用textContent

3. 跨域信息泄露

典型场景：

通过error事件获取跨域响应状态
利用timing-allow-origin头泄露性能数据
通过<link>标签的ping属性跟踪用户

防范措施：

严格配置CORS头
禁用不必要的响应头
限制资源缓存时间

六、新兴技术对同源策略的影响

1. WebAssembly安全模型

WASM模块运行在隔离的沙箱中，其资源访问仍受同源策略约束，但可通过以下方式扩展能力：

导入JavaScript对象实现跨域通信
使用SharedArrayBuffer需配置COOP/COEP头

2. Web Components跨域使用

通过CustomElementRegistry.define()注册的组件，其模板和样式加载需满足：

组件定义域与使用域同源
或通过CORS显式允许跨域资源

3. Service Worker安全限制

Service Worker脚本必须与主页面同源，但可通过以下方式实现跨域缓存：

使用CacheStorage API存储跨域响应
配合CORS头实现资源共享

同源策略作为Web安全的基石，其设计理念深刻影响了现代前端架构。开发者在突破限制实现功能时，必须充分理解其安全意图，采用标准化的跨域方案。随着浏览器安全模型的持续演进，如COOP/COEP等新标准的出现，同源策略的实施细节也在不断优化。建议开发者持续关注W3C安全工作组动态，及时调整安全配置策略。

同源策略：Web安全的核心防线解析