同源策略（SOP）与跨域资源共享（CORS）的进阶应用与安全风险详解

同源策略（Same-Origin Policy, SOP）是浏览器最核心的安全机制之一，用于隔离不同源的文档之间的交互，防止恶意网站窃取用户数据。本专题将深入探讨SOP的细节、CORS的工作原理及其安全风险。

一、同源策略的深入理解

1. 同源的定义：协议、域名、端口三者完全相同即为同源。例如：

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

2. SOP的限制范围：

   • DOM访问：禁止通过iframe或窗口对象访问不同源页面的DOM
   • 网络请求：通过XMLHttpRequest或Fetch API发起的跨域请求默认被阻止
   • 存储访问：localStorage、IndexedDB等数据隔离

3. SOP的例外情况：

   • <script>、<img>、<link>等标签允许跨域加载资源
   • CSS的@font-face允许跨域字体加载
   • 表单提交允许跨域（但响应内容不可读）

二、CORS工作机制详解
CORS是一种W3C标准，允许服务器声明哪些外部源可以访问其资源。

1. 简单请求（Simple Request）：

   • 条件：使用GET/HEAD/POST方法，且Content-Type为application/x-www-form-urlencoded、multipart/form-data或text/plain
   • 过程：浏览器直接发送请求，在请求头中包含Origin: https://example.com
   • 服务器响应：若允许跨域，返回Access-Control-Allow-Origin: https://example.com（或*）

2. 预检请求（Preflight Request）：

   • 触发条件：非简单请求（如PUT/DELETE方法，或自定义Content-Type）
   • 过程：
     a. 浏览器先发送OPTIONS请求，包含：

     Origin: https://example.com
     Access-Control-Request-Method: PUT
     Access-Control-Request-Headers: X-Custom-Header
     

     b. 服务器响应预检请求，指定允许的方法和头：

     Access-Control-Allow-Origin: https://example.com
     Access-Control-Allow-Methods: GET, POST, PUT
     Access-Control-Allow-Headers: X-Custom-Header
     Access-Control-Max-Age: 86400  // 缓存时间
     

     c. 通过预检后，浏览器发送实际请求

3. 带凭证的请求（Credentials）：

   • 默认情况下，跨域请求不携带Cookie等凭证信息
   • 需要设置：fetch(url, {credentials: 'include'})
   • 服务器必须响应：Access-Control-Allow-Credentials: true，且不能使用通配符*

三、CORS配置的安全风险

1. 过度宽松的配置：

   • 错误配置：Access-Control-Allow-Origin: *（允许所有源）
   • 风险：敏感数据可能被任意网站读取

2. 凭证泄露风险：

   • 若同时设置Allow-Origin: *和Allow-Credentials: true，浏览器将拒绝请求
   • 但若配置为动态返回请求的Origin值，仍可能泄露带凭证的数据

3. 反射型Origin漏洞：

   • 错误示例：服务器直接返回Access-Control-Allow-Origin: [请求中的Origin值]
   • 攻击者可能构造恶意网站，诱导用户访问并窃取数据

4. 预检请求缓存滥用：

   • 过长的Access-Control-Max-Age可能被攻击者利用，绕过后续的安全检查

四、防御最佳实践

1. 严格限制允许的源：

   • 避免使用通配符*，明确指定可信域名列表
   • 示例：Access-Control-Allow-Origin: https://trusted.example.com

2. 最小化允许的方法和头：

   • 仅开放必要的HTTP方法和请求头
   • 示例：Access-Control-Allow-Methods: GET, POST

3. 避免凭证与通配符混用：

   • 若需携带凭证，必须指定具体源而非通配符

4. 实施Origin验证：

   • 服务器端验证请求的Origin是否在允许列表中
   • 防止攻击者伪造Origin头

五、实际场景分析
案例：一个API服务需要同时支持Web应用和移动应用访问

• 解决方案：根据请求头中的Origin动态返回对应的Allow-Origin值
• 安全措施：维护白名单机制，拒绝不在列表中的Origin请求

通过深入理解SOP和CORS的交互机制，开发人员可以既实现必要的跨域功能，又确保不会引入安全漏洞。正确配置CORS是Web应用安全的重要一环。