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

1.1 同源策略的定义与核心作用

同源策略（Same-Origin Policy）是浏览器实施的安全机制，要求三个条件同时满足才视为同源：协议（HTTP/HTTPS）、域名（主域名+子域名）、端口号（如80/443）。其核心目的是防止恶意网站通过脚本访问其他网站的敏感数据（如Cookie、DOM、本地存储），避免跨站请求伪造（CSRF）、数据泄露等攻击。
示例：若https://a.example.com的脚本尝试访问https://b.example.com的DOM，浏览器会直接阻止，因为域名不同。

1.2 跨域场景与解决方案

实际开发中，跨域需求普遍存在（如API调用、资源加载）。常见解决方案包括：

• CORS（跨域资源共享）：服务器通过响应头（Access-Control-Allow-Origin）声明允许的源。例如：

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

  需注意，通配符*仅适用于无认证的公开数据，涉及Cookie时必须明确指定源。
• JSONP：利用<script>标签不受同源限制的特性，通过回调函数获取数据（仅限GET请求）。
• 代理服务器：前端请求同域代理，由代理转发至目标服务器，隐藏真实跨域行为。

1.3 严格模式与宽松模式

浏览器对同源策略的执行存在差异：

• 严格模式：完全禁止跨域访问（默认行为）。
• 宽松模式：部分浏览器（如旧版IE）允许通过document.domain设置相同主域名来放宽限制，但存在安全隐患，不推荐使用。

二、Cookie管理：安全与功能的平衡

2.1 Cookie的属性与安全控制

Cookie通过以下属性控制行为：

• Domain：指定可访问Cookie的域名（如.example.com允许子域名访问）。
• Path：限定URL路径（如/api仅对API路径生效）。
• Secure：仅通过HTTPS传输，防止中间人攻击。
• HttpOnly：禁止JavaScript访问，防止XSS攻击窃取Cookie。
• SameSite：限制跨站请求携带Cookie（Strict完全禁止，Lax允许安全导航，None需配合Secure）。

示例：登录态Cookie应设置Secure、HttpOnly和SameSite=Lax，既保障安全又允许正常导航。

2.2 跨域Cookie的传输规则

默认情况下，Cookie仅发送给创建它的源。若需跨域共享：

• 显式设置Domain：如Domain=example.com允许子域名访问，但需注意主域名Cookie会覆盖子域名同名Cookie。
• 第三方Cookie限制：现代浏览器（Chrome、Safari）默认阻止第三方Cookie（如广告跟踪），需通过用户交互（如点击）或明确同意后设置。

2.3 Cookie存储的最佳实践

• 按需设置过期时间：会话Cookie（无Expires）关闭浏览器后失效，持久Cookie需合理设置生命周期。
• 最小化数据量：避免存储敏感信息（如密码），优先使用Token替代。
• 定期清理：通过Set-Cookie的Max-Age或服务器端逻辑清除过期Cookie。

三、域名设计：架构与安全的协同

3.1 域名分层策略

合理的域名设计需兼顾功能隔离与资源复用：

• 主域名：如example.com，用于核心业务。
• 子域名：按功能划分（api.example.com、static.example.com），便于CDN加速、负载均衡及权限控制。
• 泛域名：如*.example.com，适用于动态子域名场景（如用户自定义域名）。

3.2 跨域资源共享的域名配置

当API与前端不同源时（如前端在app.example.com，API在api.example.com），需：

1. 服务器设置CORS头：

   Access-Control-Allow-Origin: https://app.example.com

2. 前端代码需处理预检请求（OPTIONS方法），确保复杂请求（如带自定义头的POST）顺利通过。

3.3 域名安全与SEO优化

• HTTPS强制跳转：通过HSTS头或服务器配置，确保所有子域名使用HTTPS。
• 避免Cookie冗余：静态资源域名（如cdn.example.com）应与主域名不同，防止不必要的Cookie传输。
• SEO友好设计：子域名内容需与主域名相关，避免被搜索引擎视为独立站点导致权重分散。

四、综合案例：电商平台的跨域实践

4.1 场景描述

某电商平台前端部署在shop.example.com，API在api.example.com，需实现：

• 前端安全调用API（携带认证Cookie）。
• 静态资源（图片、JS）通过CDN加速（cdn.example.com）。

4.2 解决方案

1. API安全配置：

   • 服务器响应头：

     Access-Control-Allow-Origin: https://shop.example.com
     Access-Control-Allow-Credentials: true
     Set-Cookie: session_id=abc123; Domain=example.com; Secure; HttpOnly; SameSite=Lax

   • 前端请求需设置withCredentials: true。

2. CDN优化：

   • 静态资源域名不设置Cookie，减少传输量。
   • 通过CNAME将cdn.example.com指向CDN提供商，实现全球加速。

3. 监控与调试：

   • 使用浏览器开发者工具检查网络请求，确认Cookie是否按预期发送。
   • 通过curl -v模拟跨域请求，验证CORS头是否正确。

五、总结与建议

1. 同源策略：理解其限制，优先使用CORS解决合法跨域需求，避免依赖宽松模式。
2. Cookie管理：根据场景选择属性组合，平衡安全与功能，定期审计Cookie使用情况。
3. 域名设计：采用分层策略，明确子域名职责，优化安全与性能。
4. 持续学习：关注浏览器安全策略更新（如Chrome对第三方Cookie的限制），及时调整架构。

通过深入掌握同源、Cookie与域名的协同机制，开发者能够构建更安全、高效的Web应用，在保障用户数据安全的同时，实现跨域功能的无缝集成。