同源策略（Same-Origin Policy）与跨域安全机制详解

一、同源策略的基本概念

同源策略是浏览器最核心的安全基础，用于限制不同源的文档或脚本如何交互。其核心规则是：协议、域名、端口三者完全一致才属于同源。例如：

• https://example.com/app1 与 https://example.com/app2（同源）
• http://example.com 与 https://example.com（协议不同，不同源）
• example.com 与 api.example.com（域名不同，不同源）

二、同源策略的限制范围

1. DOM访问限制：禁止通过iframe或window.open等方式跨域访问DOM元素。
2. 数据请求限制：通过XMLHttpRequest或Fetch发起的跨域请求会被浏览器拦截。
3. 存储隔离：LocalStorage、IndexedDB等存储数据按源隔离。

三、跨域需求的解决方案

3.1 CORS（跨域资源共享）

• 简单请求（GET/POST/HEAD且Content-Type为text/plain、application/x-www-form-urlencoded、multipart/form-data）：
  • 浏览器自动添加Origin头，服务器需返回Access-Control-Allow-Origin: *或具体源。
• 预检请求（非简单请求如PUT或自定义头）：
  • 浏览器先发送OPTIONS请求，服务器需响应Access-Control-Allow-Methods和Access-Control-Allow-Headers。
• 凭证携带：需设置Access-Control-Allow-Credentials: true且Access-Control-Allow-Origin不能为*。

3.2 JSONP（JSON with Padding）

• 利用<script>标签不受同源策略限制的特性，通过回调函数获取数据。
• 缺陷：仅支持GET请求，存在XSS风险。

3.3 代理服务器

• 后端服务作为中间层转发请求，避免浏览器直接跨域。
• 示例：Nginx配置反向代理到目标API。

四、安全风险与防护

1. CORS配置错误：
   • 风险：Access-Control-Allow-Origin: *可能泄露敏感数据。
   • 防护：严格校验Origin头，动态返回允许的源。
2. JSONP劫持：
   • 风险：恶意页面通过JSONP窃取用户数据。
   • 防护：添加CSRF Token或禁用JSONP。
3. PostMessage安全：
   • 使用window.postMessage时需验证消息来源：

   window.addEventListener("message", (event) => {
     if (event.origin !== "https://trusted.com") return;
     // 处理数据
   });
   

五、实战场景分析

案例：CORS配置漏洞

• 漏洞场景：某API返回Access-Control-Allow-Origin: *且携带用户凭证。
• 攻击：恶意网站通过AJAX直接读取用户数据。
• 修复：限制允许的源，移除不必要的Access-Control-Allow-Credentials。

六、总结

同源策略是Web安全的基石，但合理使用CORS、PostMessage等机制可实现安全的跨域交互。开发中需严格校验源、避免过度宽松的配置，并结合其他安全措施（如CSRF Token）形成纵深防御。