本文介绍通过 postmessage api 实现主窗口与弹出/子窗口之间的安全、双向通信，包括消息发送、监听、响应处理及关键注意事项，适用于广告跳过验证、任务完成确认等场景。
本文介绍通过 postmessage api 实现主窗口与弹出/子窗口之间的安全、双向通信，包括消息发送、监听、响应处理及关键注意事项，适用于广告跳过验证、任务完成确认等场景。
在现代 Web 应用中，常需在主页面与新开窗口（如广告落地页、任务跳转页）之间建立可靠通信——例如用户完成某项操作（如观看完视频、等待倒计时结束、跳过广告）后，子窗口主动通知主窗口“任务已完成”。由于同源策略限制，直接访问 window.opener 或 window.parent 的属性存在安全风险且不可靠，postMessage 是唯一标准、跨域安全、广泛支持的解决方案。
✅ 基础通信流程（主窗口 ↔ 子窗口）
1. 主窗口：打开子窗口并监听响应
// 主页面中
const popup = window.open('https://example-offer.com/task', '_blank', 'width=800,height=600');
// 立即监听来自该窗口的消息（推荐使用 addEventListener）
window.addEventListener('message', (event) => {
// ✅ 严格校验来源（防止恶意站点伪造消息）
if (event.origin !== 'https://example-offer.com') return;
// ✅ 验证消息结构
if (event.data?.type === 'TASK_COMPLETED' && typeof event.data.payload === 'object') {
console.log('✅ 收到完成确认:', event.data.payload);
// ✅ 此处可触发支付逻辑、更新UI、提交至后端API等
fetch('/api/complete-offer', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
taskId: event.data.payload.taskId,
timestamp: Date.now()
})
});
}
});
// 可选：向子窗口发送初始化指令（如传递任务ID、超时时间）
popup.postMessage({
type: 'INIT_TASK',
payload: { taskId: 'offer_789', minDuration: 5000 }
}, 'https://example-offer.com');
2. 子窗口（如广告页）：监听指令并主动响应
// 子页面中（需确保与主窗口同域或已配置 CORS 允许）
window.addEventListener('message', (event) => {
if (event.origin !== 'https://your-main-site.com') return;
if (event.data.type === 'INIT_TASK') {
const { taskId, minDuration } = event.data.payload;
// 模拟用户等待 + 广告跳过逻辑（实际中可结合 video.ended、setTimeout、按钮点击等）
setTimeout(() => {
// ✅ 向主窗口发送完成响应
window.opener.postMessage({
type: 'TASK_COMPLETED',
payload: {
taskId,
success: true,
verifiedAt: new Date().toISOString()
}
}, 'https://your-main-site.com');
}, minDuration + 2000); // 加2秒容错
}
});
⚠️ 关键注意事项
-
必须校验
event.origin：永远不要信任event.source，仅凭event.origin（协议+域名+端口）判断可信来源，避免 XSS 或中间人伪造消息。 -
避免使用
window.opener直接调用方法：该方式在跨域下被阻止，且 Chrome 等浏览器默认启用rel="noopener"，导致opener为null。 -
子窗口关闭前确保消息送达：
postMessage是异步的，若子窗口立即关闭，消息可能丢失。建议：- 在发送响应后延迟
close()（如setTimeout(() => window.close(), 100)）； - 或由主窗口监听
beforeunload/unload事件做兜底校验。
- 在发送响应后延迟
-
移动端兼容性：iOS Safari 对
window.open和postMessage有额外限制（如需用户手势触发），务必在真实设备测试。 - 安全性增强（进阶）：可配合一次性 token（如 JWT）或服务端签名验证，防止重放攻击。
✅ 总结
postMessage 不仅是跨窗口通信的事实标准，更是构建可信任务流的核心机制。它不依赖 Cookie、不暴露 DOM、天然支持跨域，只要严格遵循来源校验与结构验证，即可安全、稳定地实现“用户完成即响应”的业务闭环——无论是广告跳过、视频观看、表单提交，还是多步引导流程，都值得作为首选方案深度集成。
