一、同源策略：浏览器安全的基石

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

同源策略（Same-Origin Policy）是浏览器实施的核心安全机制，要求三个关键要素完全一致：协议（HTTP/HTTPS）、域名（主域名+子域名）、端口号（默认80/443可省略）。例如，https://a.example.com与https://b.example.com因域名不同被视为跨域，而https://a.example.com:8080与https://a.example.com因端口不同也被视为跨域。

其核心作用体现在两方面：

数据隔离：阻止不同源的页面通过document对象直接访问对方DOM，防止恶意页面窃取敏感信息（如银行页面数据）。
请求限制：默认禁止跨域AJAX请求，防止CSRF攻击（跨站请求伪造）。例如，攻击者无法通过<img>标签的src属性向https://api.example.com/transfer发送POST请求。

1.2 跨域场景与解决方案

实际开发中，跨域需求普遍存在（如API聚合、微前端架构）。常见解决方案包括：

CORS（跨域资源共享）：通过服务器响应头Access-Control-Allow-Origin声明允许的源。例如：
```
Access-Control-Allow-Origin: https://trusted.com
Access-Control-Allow-Methods: GET, POST
```
需注意预检请求（OPTIONS）的处理，避免因未配置导致请求失败。

JSONP：利用<script>标签不受同源限制的特性，通过回调函数获取数据。示例：

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

但仅支持GET请求，且存在XSS风险。

PostMessage：通过window.postMessage()实现跨窗口通信。示例：

// 发送方
window.parent.postMessage({ type: 'data', payload: 'secret' }, 'https://parent.com');
// 接收方
window.addEventListener('message', (event) => {
  if (event.origin === 'https://child.com') {
    console.log(event.data);
  }
});

需严格验证event.origin，防止消息泄露。

二、Cookie管理：状态保持与安全挑战

2.1 Cookie的基础属性与作用

Cookie是服务器存储在客户端的键值对，用于维持会话状态（如用户登录）。其核心属性包括：

Domain：指定Cookie可访问的域名。若设置为.example.com，则a.example.com和b.example.com均可读取。
Path：限制Cookie在特定路径下生效（如/admin）。
Secure：仅通过HTTPS传输，防止中间人攻击。
HttpOnly：禁止JavaScript通过document.cookie访问，防止XSS攻击窃取Cookie。
SameSite：控制跨站请求时是否携带Cookie，可选值：
- Strict：完全禁止跨站携带。
- Lax：允许安全导航（如链接跳转），禁止POST等危险操作。
- None：需配合Secure使用，允许跨站携带（如CDN资源）。

2.2 Cookie安全配置实践

会话Cookie：设置HttpOnly和Secure，不指定Expires或Max-Age，浏览器关闭后自动删除。
持久化Cookie：明确设置过期时间，避免长期有效导致的泄露风险。
子域名隔离：若主域名存储敏感信息（如会话ID），子域名需通过独立Cookie或JWT替代。

示例：设置安全的会话Cookie

Set-Cookie: sessionId=abc123; Domain=example.com; Secure; HttpOnly; SameSite=Lax

三、域名设计：架构与安全的平衡

3.1 域名分层策略

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

主域名：用于核心业务（如example.com），存储用户会话Cookie。
子域名：按功能划分（如api.example.com、static.example.com），通过CORS或Cookie的Domain属性控制访问权限。
泛域名：使用.example.com覆盖所有子域名，需谨慎配置以避免安全风险。

3.2 跨域Cookie的传递

若需在跨域场景下共享Cookie（如单点登录），需满足以下条件：

Cookie的Domain属性：设置为父域名（如.example.com）。

CORS配置：服务器响应头需包含：

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

前端请求：设置withCredentials: true（Fetch API）或xhrFields: { withCredentials: true }（jQuery AJAX）。

示例：Fetch API跨域携带Cookie

fetch('https://api.example.com/data', {
  credentials: 'include', // 必须设置为'include'
  headers: { 'Content-Type': 'application/json' }
});

四、综合实践：安全与效率的优化

4.1 典型场景与解决方案

微前端架构：主应用与子应用跨域通信时，通过PostMessage传递令牌，结合JWT替代Cookie存储会话。
CDN资源加载：静态资源域名（如static.example.com）需设置SameSite=None; Secure，允许跨站加载。
多子域单点登录：通过父域名Cookie（如.example.com）和CORS配置，实现一次登录全域通行。

4.2 开发者建议

严格配置CORS：避免使用*通配符，明确指定可信源。
优先使用HttpOnly Cookie：减少XSS攻击面。
定期审计Cookie：清理过期或冗余的Cookie，降低泄露风险。
监控跨域请求：通过浏览器开发者工具的Network面板，检查请求头与响应头是否符合预期。

五、总结与展望

同源策略、Cookie管理与域名设计是前端安全的三根支柱。开发者需深入理解其原理，结合业务场景灵活配置：通过CORS平衡跨域需求与安全性，利用Cookie属性防范攻击，借助域名分层优化资源隔离。未来，随着浏览器安全标准的演进（如SameSite默认值变化），持续关注最佳实践更新至关重要。

同源策略、Cookie管理与域名设计：前端安全的核心实践