深入探讨前端跨子域通讯场景，对比 document.domain、postMessage、共享主域 Cookie 及 LocalStorage 代理四种方案。分析各方案的适用场景、实现细节与安全风险，提供生产环境选型逻辑与最佳实践，涵盖来源校验、敏感数据加密及性能优化建议，帮助开发者构建高效安全的跨域通信机制。
在前端开发中，跨域是绕不开的话题，而跨子域作为跨域的一种特殊场景（如 a.example.com 与 b.example.com），因主域一致、子域不同的特性，既有别于完全跨域，也存在专属的通讯技巧和避坑点。
多数文章仅罗列可用方案，却忽略了不同场景下的选型逻辑、实际落地中的细节问题，以及生产环境中的最佳实践。本文将从痛点拆解、方案深度解析、避坑指南、最佳实践四个维度，真正了解跨子域通讯，而非停留在知道有哪些方法的层面。
跨子域的核心特点是「主域相同，子域不同」，这就决定了它的痛点的特殊性，而非普通跨域的'同源策略完全阻断'：
window关键区分：跨子域 ≠ 完全跨域。完全跨域需依赖 CORS、JSONP 等通用方案，而跨子域可利用主域特性简化实现，这也是本文的核心重点——如何利用主域优势，实现更高效、更安全的通讯。
以下方案按「实现成本→适用场景」排序，重点解读每个方案的'差异化价值''落地细节'和'避坑点'。
通过修改 document.domain，将两个子域的'域'统一设置为主域（如将 a.example.com 和 b.example.com 的 document.domain 都设为 example.com），从而突破同源策略限制，实现 iframe 与父窗口的双向通讯。
适合小型项目、简单数据传递（如用户登录状态同步、简单参数传递），例如：父窗口（parent.example.com）嵌入子窗口（child.example.com），子窗口获取父窗口的用户 ID。
父窗口（parent.example.com）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父窗口</title>
</head>
<body>
<!-- 嵌入子域 iframe -->
<iframe id="childIframe" src="http://child.example.com" frameborder="0"></iframe>
<script>
// 关键：将父窗口 domain 设为主域
document.domain = 'example.com';
// 父窗口要传递给子窗口的数据
window.parentData = {
userId: '123456',
userName: '前端博主'
};
// 监听子窗口发送的消息
window.addEventListener('message', (e) => {
// 验证来源（安全校验，必加）
if (e.origin.indexOf('example.com') === -1) return;
console.log('父窗口收到子窗口消息：', e.data);
});
</script>
</body>
</html>
子窗口（child.example.com）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子窗口</title>
</head>
<body>
<script>
// 关键：子窗口 domain 必须与父窗口一致，否则无法通讯
document.domain = 'example.com';
// 访问父窗口的数据（突破同源限制）
console.log('子窗口获取父窗口数据：', window.parent.parentData);
// 向父窗口发送消息
window.parent.postMessage('子窗口已收到数据', 'http://parent.example.com');
</script>
</body>
</html>
a.example.com → example.com），不能反向设置（如 example.com → a.example.com），否则会报错。document.domain，仅一方设置无效。a.example.com:8080 与 b.example.com:8081），即使设置了 document.domain，也无法通讯（端口属于同源策略的一部分）。HTML5 新增的 postMessage 方法，允许不同源的窗口（包括跨子域、完全跨域）之间发送消息，不受主域限制，是目前跨域（含跨子域）通讯的主流方案。
与 document.domain 相比，postMessage 更灵活（支持端口不同、完全跨域），但需要手动做'来源校验'，否则会有安全风险。
适合复杂数据传递、方法调用、状态同步，例如：电商平台的'支付子域'与'商品子域'通讯（支付成功后通知商品子域更新订单状态）、跨子域的组件通信。
场景：goods.example.com（商品页）嵌入 pay.example.com（支付页），支付完成后，支付页调用商品页的'更新订单状态'方法。
商品页（goods.example.com）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品页</title>
</head>
<body>
<h1>商品详情页</h1>
<iframe id="payIframe" src="http://pay.example.com" frameborder="0"></iframe>
<script>
// 暴露给支付页调用的方法（更新订单状态）
window.updateOrderStatus = (orderId, status) => {
console.log(`订单 ${orderId} 状态更新为：${status}`);
// 实际业务逻辑：更新页面 UI、请求接口等
};
// 监听支付页发送的消息
window.addEventListener('message', (e) => {
// 安全校验：只接收来自 example.com 子域的消息（关键！）
if (!e.origin.endsWith('.example.com')) return;
const { type, data } = e.data;
// 处理不同类型的消息
switch (type) {
case 'paySuccess':
// 调用本地方法，更新订单状态
window.updateOrderStatus(data.orderId, '已支付');
break;
case 'payFailed':
console.log(`订单 ${data.orderId} 支付失败`);
break;
}
});
</script>
</body>
</html>
支付页（pay.example.com）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>支付页</title>
</head>
<body>
<button id="payBtn">点击支付</button>
<script>
const payBtn = document.getElementById('payBtn');
payBtn.addEventListener('click', () => {
// 模拟支付成功
const payResult = {
type: 'paySuccess',
data: {
orderId: 'order_123',
amount: 99
}
};
// 向父窗口（商品页）发送消息
// 第二个参数指定目标源，建议精确到具体域名（而非*），提升安全性
window.parent.postMessage(payResult, 'http://goods.example.com');
});
</script>
</body>
</html>
* 作为 postMessage 的第二个参数（允许所有来源发送消息，存在 XSS 风险），应精确到具体域名（如 http://goods.example.com），或校验域名后缀（如 endsWith('.example.com')）。{ type: '消息类型', data: '消息数据' }），便于后续维护和扩展，避免不同子域之间消息混乱。postMessage 是异步通讯，频繁发送大量消息会影响性能，适合'按需通讯'（如支付回调、状态同步），不适合高频数据交互（如实时刷新数据）。Cookie 有'域'的属性，当我们将 Cookie 的 domain 设置为主域（如 example.com）时，所有子域（a.example.com、b.example.com）都能读取和写入该 Cookie，从而实现跨子域的状态同步。
这是跨子域'状态同步'的最优方案（如登录态共享），无需通过 iframe 或 postMessage 传递数据，简化实现。
最常见于'登录态共享'：用户在 login.example.com 登录后，服务器设置主域 Cookie，其他子域（如 home.example.com、my.example.com）无需再次登录，即可获取用户登录信息。
// Node.js + Express
const express = require('express');
const app = express();
app.get('/login', (req, res) => {
// 关键：将 Cookie 的 domain 设为主域 example.com
res.cookie('token', 'user_login_token_123', {
domain: 'example.com', // 主域，所有子域均可访问
path: '/', // 所有路径均可访问
httpOnly: true, // 禁止前端通过 document.cookie 读取，提升安全性
maxAge: 24 * 60 * 60 * 1000 // 有效期 1 天
});
res.send('登录成功');
});
app.listen(3000, () => {
console.log('服务器运行在 3000 端口');
});
home.example.com 为例）：// 封装读取 Cookie 的方法
function getCookie(name) {
const cookies = document.cookie.split('; ');
for (const cookie of cookies) {
const [key, value] = cookie.split('=');
if (key === name) return decodeURIComponent(value);
}
return '';
}
// 读取主域 Cookie（token）
const token = getCookie('token');
if (token) {
console.log('用户已登录，token：', token);
// 后续逻辑：请求接口时携带 token，获取用户信息
} else {
console.log('用户未登录，跳转到登录页');
window.location.href = 'http://login.example.com';
}
domain 设为主域（如 example.com），若设为子域（如 login.example.com），则其他子域无法访问。httpOnly: true，禁止前端通过 document.cookie 读取，防止 XSS 攻击；同时设置 secure: true（仅在 HTTPS 协议下生效），防止 Cookie 被窃取。LocalStorage 遵循同源策略，跨子域无法直接访问，但我们可以通过'主域代理 iframe'实现共享：在主域（example.com）创建一个代理 iframe，所有子域通过 postMessage 向代理 iframe 发送'读写 LocalStorage'的请求，代理 iframe 负责操作 LocalStorage（因代理 iframe 与主域同源），从而实现跨子域共享 LocalStorage。
适合需要共享大量数据（如用户偏好设置、页面配置）的场景，例如：多个子域共享用户的主题设置、语言偏好，且数据量超过 Cookie 的限制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage 代理</title>
</head>
<body>
<script>
// 监听所有子域发送的消息
window.addEventListener('message', (e) => {
// 安全校验：仅允许 example.com 子域访问
if (!e.origin.endsWith('.example.com')) return;
const { action, key, value } = e.data;
let result = '';
// 处理不同操作（读/写/删）
switch (action) {
case 'setItem':
localStorage.setItem(key, value);
result = '设置成功';
break;
case 'getItem':
result = localStorage.getItem(key);
break;
case 'removeItem':
localStorage.removeItem(key);
result = '删除成功';
break;
}
// 向发送方返回结果
e.source.postMessage({ action, key, result }, e.origin);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子域 A</title>
</head>
<body>
<script>
// 嵌入主域代理 iframe（隐藏，无需展示）
const proxyIframe = document.createElement('iframe');
proxyIframe.src = 'http://proxy.example.com';
proxyIframe.style.display = 'none';
document.body.appendChild(proxyIframe);
// 封装跨子域操作 LocalStorage 的方法
function crossDomainLocalStorage(action, key, value) {
return new Promise((resolve) => {
// 监听代理 iframe 返回的消息
const handleMessage = (e) => {
if (e.origin !== 'http://proxy.example.com') return;
if (e.data.action === action && e.data.key === key) {
resolve(e.data.result);
window.removeEventListener('message', handleMessage);
}
};
window.addEventListener('message', handleMessage);
// 向代理 iframe 发送请求
proxyIframe.contentWindow.postMessage({ action, key, value }, 'http://proxy.example.com');
});
}
// 测试：设置、读取 LocalStorage
crossDomainLocalStorage('setItem', 'theme', 'dark').then(res => {
console.log(res); // 输出：设置成功
return crossDomainLocalStorage('getItem', 'theme');
}).then(res => {
console.log('读取到的主题：', res); // 输出：dark
});
</script>
</body>
</html>
很多开发者困惑'该选哪种方案'，其实核心是「场景匹配」，以下是生产环境中的选型逻辑，帮你快速决策：
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| document.domain + iframe | 简单数据传递、子域端口相同 | 实现简单、无需后端配合 | 不支持端口不同、安全性一般 |
| postMessage | 复杂数据传递、方法调用、端口不同 | 通用、灵活、支持完全跨域 | 需手动做安全校验、异步通讯 |
| 共享主域 Cookie | 登录态同步、少量状态信息 | 实现简单、无需前端额外通讯 | 容量有限（4KB）、敏感信息需防护 |
| LocalStorage + 代理 iframe | 大量数据共享（如配置、偏好） | 容量大、可共享复杂数据 | 实现复杂、依赖代理 iframe |
endsWith('.example.com')），禁止接收未知来源的消息，防止 XSS 攻击和数据泄露。httpOnly: true、secure: true、SameSite: Strict，防止被窃取和篡改。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online