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

浏览器同源策略（Same-Origin Policy）是Web安全的核心防线，通过限制跨域资源访问防止恶意攻击。其判定规则基于三个要素：协议（http/https）、域名（example.com）、端口（80/443），三者完全相同才视为同源。

1.1 安全边界与限制

DOM访问：禁止跨域操作iframe内容或window对象
Cookie管理：默认阻止跨域读写Cookie
AJax请求：XMLHttpRequest/Fetch API默认拒绝跨域响应
本地存储：localStorage/sessionStorage实施同源隔离

1.2 典型应用场景

银行网站嵌入第三方支付组件
电商平台加载商品评论系统
微前端架构中子应用通信
跨服务数据聚合展示

二、JSONP：动态脚本的巧妙利用

作为早期跨域解决方案，JSONP通过动态创建<script>标签突破同源限制，其本质是利用浏览器对脚本资源的特殊处理机制。

2.1 实现原理

<!-- 前端动态创建script标签 -->
<script>
function handleResponse(data) {
  console.log('跨域数据:', data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);
</script>

2.2 技术特性

请求方式：仅支持GET方法
响应格式：必须返回callback(data)格式的JS代码
错误处理：缺乏标准错误机制，依赖超时重试
安全风险：易受XSS攻击，需严格校验服务端返回内容

2.3 适用场景

兼容旧浏览器的简单数据获取
第三方数据接口（如天气API、地图服务）
对安全性要求不高的公开数据查询

三、CORS：现代跨域标准方案

跨域资源共享（CORS）通过服务端配置响应头实现安全跨域，已成为当前主流解决方案。其核心机制通过预检请求（Preflight）和简单请求（Simple Request）两种模式工作。

3.1 核心响应头

响应头	作用描述	示例值
Access-Control-Allow-Origin	允许的源列表	`https://example.com` 或 `*`
Access-Control-Allow-Methods	允许的HTTP方法	`GET, POST, PUT`
Access-Control-Allow-Headers	允许的自定义头	`Content-Type, Authorization`
Access-Control-Allow-Credentials	是否允许携带凭证	`true`

3.2 预检请求流程

浏览器发送OPTIONS请求验证权限
服务端返回CORS相关响应头
验证通过后发送实际请求
浏览器检查响应头是否符合预期

3.3 服务端实现示例（Node.js）

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});
app.get('/api/data', (req, res) => {
  res.json({ message: '跨域数据' });
});

四、方案对比与选型建议

4.1 安全性对比

方案	CSRF风险	XSS风险	凭证支持	预检机制
JSONP	高	高	❌	❌
CORS	低	中	✅	✅

4.2 性能考量

JSONP：无预检开销，但缺乏缓存控制
CORS：预检请求增加RTT，但支持复杂场景

4.3 选型建议

简单数据获取：优先考虑JSONP（需确保服务可信）
复杂API交互：强制使用CORS
内部服务通信：可考虑postMessage或域名白名单
移动端开发：注意WebView对CORS的特殊处理

五、进阶实践与安全加固

5.1 CORS高级配置

// 支持多源和凭证请求
app.use((req, res, next) => {
  const allowedOrigins = ['https://example.com', 'https://dev.example.com'];
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
    res.setHeader('Access-Control-Allow-Credentials', 'true');
  }
  next();
});

5.2 安全最佳实践

避免使用Access-Control-Allow-Origin: *处理敏感数据
严格校验Origin和Referer头
对JSONP回调函数名实施白名单控制
结合CSRF Token增强安全性
定期审计跨域配置

六、未来演进方向

随着Web组件化和微前端架构的普及，跨域通信需求持续增长。新兴方案如：

WebTransport：基于HTTP/3的低延迟通信
Service Worker中介：通过代理实现安全通信
Federation API：浏览器原生跨域API提案

开发者应持续关注W3C标准进展，在保证安全性的前提下选择最适合业务场景的解决方案。理解底层原理比盲目使用框架更重要，建议通过抓包工具（如Wireshark）分析实际通信过程，加深对跨域机制的理解。

跨域通信全解析：从同源策略到现代解决方案