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

1. 同源策略（SOP）的定义与作用

同源策略是浏览器最核心的安全基础，用于隔离不同源的文档或脚本，防止恶意网站窃取数据或篡改内容。
同源判断标准：协议（Protocol）、域名（Domain）、端口（Port）三者完全一致即为同源。例如：

• https://example.com/app1 和 https://example.com/app2 同源（协议、域名、端口相同）。
• https://example.com 和 http://example.com 不同源（协议不同）。
• https://example.com 和 https://api.example.com 不同源（域名不同）。

SOP的限制范围：

• DOM访问：禁止跨域读取iframe内容、操作DOM（如通过document.getElementById访问跨域iframe）。
• 网络请求：通过XMLHttpRequest或Fetch发起的跨域请求会被浏览器拦截响应（但请求实际已发出，需后端配合防护）。
• Cookie/LocalStorage：仅同源页面可访问。

2. 跨域需求与安全风险

现代Web应用常需跨域协作（例如前端域名app.com调用API域名api.com），但绕过SOP可能引发安全风险：

• CSRF攻击：恶意网站利用用户已登录状态发起跨域请求（如转账操作）。
• 数据泄露：通过恶意脚本窃取跨域数据。

3. 跨域安全机制详解

3.1 CORS（跨域资源共享）

原理：通过HTTP头允许服务器声明哪些外域可访问资源。
简单请求（如GET/POST且Content-Type为text/plain）：

1. 浏览器直接发送跨域请求，附加Origin头（如Origin: https://app.com）。
2. 服务器响应需包含Access-Control-Allow-Origin: https://app.com（或*允许任意域）。
3. 浏览器校验响应头，通过则允许前端读取响应。

预检请求（复杂请求如PUT、自定义头）：

1. 浏览器先发送OPTIONS请求，包含Origin、Access-Control-Request-Method等头。
2. 服务器响应需包含：

   Access-Control-Allow-Origin: https://app.com
   Access-Control-Allow-Methods: PUT, DELETE
   Access-Control-Allow-Headers: X-Custom-Header
   

3. 浏览器确认通过后，才发送实际请求。

安全配置建议：

• 避免使用Access-Control-Allow-Origin: *，明确指定可信域名。
• 限制Access-Control-Allow-Methods为必要方法。
• 对敏感请求（如携带Cookie）设置Access-Control-Allow-Credentials: true，并确保Allow-Origin为具体域名而非*。

3.2 其他跨域机制

• JSONP（已过时）：通过<script>标签跨域加载JSON数据，但易导致XSS漏洞。
• PostMessage API：允许跨域窗口间安全通信，需验证消息来源：

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

• 代理服务器：前端请求同域代理，由代理转发至目标域（避免浏览器限制）。

4. 常见漏洞与防护

4.1 CORS配置错误

• 风险：Access-Control-Allow-Origin: *与Access-Control-Allow-Credentials: true同时使用，导致任意网站可携带用户凭证访问。
• 防护：若需凭证，Allow-Origin必须为具体域名；避免动态Origin校验缺陷（如正则^.*\.example\.com$可能被xexample.com绕过）。

4.2 PostMessage滥用

• 风险：未校验event.origin或使用event.source时未验证身份，导致数据泄露或DOM操作。
• 防护：严格校验来源域名，避免使用*通配符。

5. 实战场景分析

场景：前端https://app.com需跨域调用https://api.com/data。
正确配置：

1. API服务器响应头：

   Access-Control-Allow-Origin: https://app.com
   Access-Control-Allow-Credentials: true
   

2. 前端请求设置：

   fetch("https://api.com/data", {
     credentials: "include" // 携带Cookie
   });
   

错误配置：若API服务器设置Allow-Origin: *且Allow-Credentials: true，浏览器将拒绝请求（安全机制）。

6. 总结

同源策略是Web安全的基石，而CORS等机制在保障安全的前提下实现了灵活的跨域协作。开发中需严格遵循最小权限原则，避免配置错误导致数据泄露或CSRF攻击。