一、同源策略：Web安全的基石

1.1 同源策略的定义与核心规则

同源策略（Same-Origin Policy）是浏览器实施的安全机制，要求跨域请求必须满足协议（Protocol）、域名（Domain）、端口（Port）三者完全一致。例如：

• https://example.com 与 http://example.com（协议不同）
• https://example.com 与 https://sub.example.com（域名不同）
• https://example.com:8080 与 https://example.com（端口不同）
  均被视为跨域，浏览器会阻止非授权的跨域数据访问。

1.2 同源策略的防护目标

• 防止CSRF攻击：限制恶意网站通过伪造请求窃取用户数据。
• 隔离存储数据：确保不同源的LocalStorage、IndexedDB等存储空间相互独立。
• 控制脚本行为：禁止跨域脚本执行或DOM操作，避免XSS攻击升级。

1.3 跨域场景与解决方案

• CORS（跨域资源共享）：通过服务器配置Access-Control-Allow-Origin等响应头，允许特定源访问资源。例如：

  Response Headers:
  Access-Control-Allow-Origin: https://trusted.com
  Access-Control-Allow-Methods: GET, POST

• JSONP：利用<script>标签无同源限制的特性，通过回调函数获取数据（仅支持GET请求）。
• 代理服务器：前端请求同源代理接口，由代理服务器转发跨域请求。

二、Cookie机制：状态管理的双刃剑

2.1 Cookie的工作原理

Cookie是服务器通过Set-Cookie响应头存储在用户浏览器中的键值对，后续请求会自动携带同名Cookie。例如：

Response Headers:
Set-Cookie: sessionId=abc123; Path=/; Domain=example.com; Secure; HttpOnly

• Path：限定Cookie生效的路径（如/api仅对/api下的请求生效）。
• Domain：指定Cookie可共享的域名（如example.com的Cookie可被子域名sub.example.com读取）。
• Secure：仅通过HTTPS传输，防止中间人攻击。
• HttpOnly：禁止JavaScript访问，防范XSS窃取。

2.2 Cookie的同源限制与跨域共享

• 默认行为：Cookie仅发送给设置它的源。
• 跨域共享方案：
  • 设置Domain为父域名：如Domain=example.com允许sub.example.com读取。
  • SameSite属性：控制跨站请求时是否发送Cookie（Strict/Lax/None）。
  • 第三方Cookie：通过Domain=public-suffix.com实现跨站跟踪（需用户授权）。

2.3 安全实践建议

• 敏感Cookie标记HttpOnly和Secure：防止XSS和中间人攻击。
• 避免宽泛Domain设置：如Domain=.com可能导致Cookie泄露。
• 定期清理过期Cookie：减少存储占用和安全风险。

三、域名管理：架构设计与安全控制

3.1 域名分级与Cookie共享

• 顶级域名（TLD）：如.com、.org。
• 二级域名：如example.com。
• 子域名：如api.example.com、static.example.com。

Cookie共享规则：

• 设置Domain=example.com的Cookie可被example.com及其子域名读取。
• 未设置Domain的Cookie仅对当前域名生效。

3.2 域名分割策略

• 功能分离：将静态资源（JS/CSS）部署在cdn.example.com，API部署在api.example.com，降低XSS攻击影响范围。
• 环境隔离：使用dev.example.com、prod.example.com区分开发与生产环境。
• 多租户架构：为不同客户分配子域名（如client1.example.com），实现数据隔离。

3.3 域名安全配置

• HSTS（HTTP严格传输安全）：强制浏览器仅通过HTTPS访问域名。

  Response Headers:
  Strict-Transport-Security: max-age=31536000; includeSubDomains

• CSP（内容安全策略）：限制资源加载来源，防范XSS。

  Response Headers:
  Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

• 子域名接管防护：定期检查未使用的子域名是否被恶意注册。

四、三者协同：典型场景与优化方案

4.1 单点登录（SSO）系统

• 流程：用户登录auth.example.com后，设置Domain=example.com的Token Cookie，子域名api.example.com可读取该Cookie实现免登。
• 关键配置：

  Set-Cookie: token=xyz789; Domain=example.com; Secure; HttpOnly; SameSite=Lax

4.2 跨域API调用

• 场景：a.com前端调用api.b.com接口。
• 解决方案：
  1. CORS配置：api.b.com设置Access-Control-Allow-Origin: https://a.com。
  2. Cookie传递：若需携带Cookie，需设置SameSite=None; Secure，且前端配置credentials: 'include'。

4.3 微前端架构

• 问题：主应用与子应用域名不同导致LocalStorage隔离。
• 解决方案：
  • 使用PostMessage通信共享数据。
  • 通过反向代理将子应用部署在主应用域名下（如/subapp路径）。

五、最佳实践总结

1. 严格遵循同源策略：默认禁止跨域，仅在必要时通过CORS或代理开放。
2. 精细化Cookie管理：根据场景设置Domain、SameSite、Secure等属性。
3. 合理规划域名架构：按功能、环境、租户分割域名，兼顾灵活性与安全性。
4. 定期安全审计：检查Cookie配置、CORS规则、子域名权限是否合规。

通过深入理解同源策略、Cookie机制与域名管理的协同关系，开发者能够构建更安全、高效的Web应用，同时规避常见的跨域与存储安全问题。