浏览器同源策略与安全限制详解

一、同源策略的基本概念
同源策略（Same-Origin Policy）是浏览器最核心的安全机制之一，用于限制不同源的文档或脚本之间的交互。其核心规则如下：

1. 同源的定义：协议（Protocol）、域名（Domain）、端口（Port）完全一致。例如：
   • https://example.com/a.html 与 https://example.com/b.html 同源。
   • https://example.com 与 http://example.com 不同源（协议不同）。
   • https://a.example.com 与 https://b.example.com 不同源（域名不同）。
2. 限制范围：
   • Cookie、LocalStorage 等存储访问。
   • DOM 操作（如通过 iframe 嵌入跨源页面时无法访问其内容）。
   • AJAX 请求（通过 XMLHttpRequest 或 fetch 发送的跨源请求会被浏览器拦截）。

二、同源策略的例外场景

1. 允许跨源嵌入的资源：
   • <script src="...">（但无法直接读取跨源脚本的内容）。
   • <img>、<link>、<video> 等标签（仅可加载，不可直接操作内容）。
   • <iframe> 嵌入的页面（可通过 postMessage 通信，但无法直接访问 DOM）。
2. 跨源写操作：
   • 表单提交（如 <form> 的 action 指向跨源 URL）不受限制，但需注意 CSRF 防护。

三、跨源解决方案的原理与实现

1. CORS（跨源资源共享）：

   • 简单请求：满足以下条件时，浏览器自动在请求头添加 Origin，服务器需返回 Access-Control-Allow-Origin：
     • 方法为 GET、POST、HEAD。
     • 请求头仅含允许的字段（如 Content-Type 为 application/x-www-form-urlencoded）。
   • 预检请求：非简单请求（如自定义头、PUT 方法）会先发送 OPTIONS 请求，服务器需响应：

     Access-Control-Allow-Origin: https://example.com  
     Access-Control-Allow-Methods: GET, POST, PUT  
     Access-Control-Allow-Headers: X-Custom-Header  
     

   • 凭据携带：若请求需携带 Cookie，需设置 withCredentials: true，且服务器返回 Access-Control-Allow-Credentials: true。

2. JSONP（JSON with Padding）：

   • 原理：利用 <script> 标签不受同源限制的特性，通过回调函数接收数据。
   • 示例：

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

   • 缺点：仅支持 GET 请求，缺乏错误处理机制。

3. postMessage 通信：

   • 用于 iframe 或新窗口间的跨源通信：

     // 发送方
     otherWindow.postMessage('Hello', 'https://target.com');  
     // 接收方
     window.addEventListener('message', (event) => {  
       if (event.origin !== 'https://trusted.com') return;  
       console.log(event.data);  
     });  
     

4. 代理服务器：

   • 前端请求同源服务器，由服务器转发请求至跨源目标（如 Nginx 配置反向代理）。

四、安全实践与注意事项

1. CORS 配置风险：
   • 避免设置 Access-Control-Allow-Origin: * 时携带凭据，可能导致信息泄露。
   • 预检请求的缓存时间（Access-Control-Max-Age）需合理设置，避免过长或过短。
2. CSRF 防护：
   • 跨源请求仍需防范 CSRF（如通过 Token 验证、SameSite Cookie 属性）。
3. postMessage 安全：
   • 严格校验 event.origin，防止恶意页面伪造消息。

五、总结
同源策略是浏览器安全的基础，理解其规则与例外场景有助于合理设计跨源方案。CORS 是主流解决方案，但需结合业务场景选择 JSONP、代理或 postMessage。同时，跨源通信必须兼顾安全性与兼容性。