8.4 postMessage 与跨文档通信

8.4 postMessage 与跨文档通信

跨文档通信是现代 Web 应用中的重要能力，postMessage API 提供了安全可靠的跨源通信机制，使不同窗口、iframe 或 Worker 之间能够安全交换数据。

核心 API 与通信模式

1. 基本语法规范

// 发送消息
targetWindow.postMessage(message, targetOrigin, [transfer]);

// 接收消息
window.addEventListener('message', (event) => {
  // 处理消息
});

2. 通信场景分类

安全实践与消息验证

1. 严格的origin检查

// 接收方验证
window.addEventListener('message', (event) => {
  const allowedOrigins = [
    'https://trusted.example.com',
    'https://api.trusted-partner.com'
  ];
  
  if (!allowedOrigins.includes(event.origin)) {
    console.warn(`来自未授权origin的消息: ${event.origin}`);
    return;
  }
  
  // 处理可信消息
  processMessage(event.data);
});

// 发送方指定精确origin
const iframe = document.getElementById('secure-iframe');
iframe.contentWindow.postMessage(
  { action: 'submit-form', data: formData },
  'https://embedded-service.example.com'
);

2. 消息结构验证

// 使用Schema验证库（如AJV）
const messageSchema = {
  type: 'object',
  required: ['type', 'version', 'payload'],
  properties: {
    type: { type: 'string', pattern: '^[A-Z_]+$' },
    version: { type: 'string', pattern: '^\\d+\\.\\d+\\.\\d+$' },
    payload: { type: 'object' },
    timestamp: { type: 'number', optional: true }
  }
};

window.addEventListener('message', (event) => {
  if (!validateMessage(event.data)) {
    console.error('无效消息格式', event.data);
    return;
  }
  
  switch (event.data.type) {
    case 'AUTH_RESPONSE':
      handleAuth(event.data.payload);
      break;
    case 'DATA_UPDATE':
      handleUpdate(event.data.payload);
      break;
  }
});

function validateMessage(data) {
  const ajv = new Ajv();
  return ajv.validate(messageSchema, data);
}

典型应用场景实现

1. 父窗口与iframe通信

父窗口代码：

const iframe = document.getElementById('payment-iframe');

// 发送支付请求
function requestPayment(amount, currency) {
  iframe.contentWindow.postMessage(
    {
      type: 'PAYMENT_REQUEST',
      amount,
      currency,
      requestId: generateUUID()
    },
    'https://payment-provider.com'
  );
}

// 监听响应
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://payment-provider.com') return;
  
  if (event.data.type === 'PAYMENT_RESULT') {
    if (event.data.success) {
      showSuccess(event.data.transactionId);
    } else {
      showError(event.data.reason);
    }
  }
});

iframe内部代码：

// 向父窗口发送准备就绪信号
window.parent.postMessage(
  { type: 'PAYMENT_READY' },
  'https://merchant.example.com'
);

// 处理支付请求
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://merchant.example.com') return;
  
  if (event.data.type === 'PAYMENT_REQUEST') {
    processPayment(event.data).then(result => {
      event.source.postMessage(
        {
          type: 'PAYMENT_RESULT',
          success: true,
          transactionId: result.id
        },
        event.origin
      );
    }).catch(error => {
      event.source.postMessage(
        {
          type: 'PAYMENT_RESULT',
          success: false,
          reason: error.message
        },
        event.origin
      );
    });
  }
});

2. 弹出窗口与opener通信

主窗口代码：

let authWindow;

function openAuthPopup() {
  authWindow = window.open(
    '/auth',
    'oauth_popup',
    'width=500,height=600'
  );
  
  // 监听消息
  const listener = (event) => {
    if (event.origin !== window.location.origin) return;
    
    if (event.data.type === 'OAUTH_RESULT') {
      handleOAuthResult(event.data.token);
      window.removeEventListener('message', listener);
      authWindow.close();
    }
  };
  
  window.addEventListener('message', listener);
}

弹出窗口代码：

// 认证成功后发送结果
function sendAuthResult(token) {
  if (window.opener && !window.opener.closed) {
    window.opener.postMessage(
      {
        type: 'OAUTH_RESULT',
        token: token
      },
      window.location.origin
    );
  }
  window.close();
}

高级通信模式

1. 使用MessageChannel双向通信

// 主线程代码
const worker = new Worker('worker.js');
const channel = new MessageChannel();

// 发送端口
worker.postMessage(
  { type: 'INIT_PORT', port: channel.port1 },
  [channel.port1]
);

// 设置接收端
channel.port2.onmessage = (event) => {
  console.log('来自Worker的消息:', event.data);
};

// 发送消息
channel.port2.postMessage({ question: '生命的意义是什么？' });

// Worker代码
self.onmessage = (event) => {
  if (event.data.type === 'INIT_PORT') {
    const port = event.data.port;
    
    port.onmessage = (e) => {
      console.log('来自主线程的问题:', e.data.question);
      port.postMessage({ answer: 42 });
    };
    
    port.start(); // 必须调用start()
  }
};

2. 可转移对象传输

// 发送大型二进制数据
const sendLargeData = (targetWindow, data) => {
  const buffer = new ArrayBuffer(1024 * 1024 * 50); // 50MB数据
  const view = new Uint8Array(buffer);
  
  // 填充数据...
  for (let i = 0; i < view.length; i++) {
    view[i] = i % 256;
  }
  
  // 转移所有权而非复制
  targetWindow.postMessage(
    { type: 'BINARY_DATA', buffer },
    targetOrigin,
    [buffer] // 转移buffer所有权
  );
  
  // 此处buffer已被清空
  console.log(buffer.byteLength); // 0
};

跨标签页通信方案

1. 基于BroadcastChannel

// 标签页A
const channel = new BroadcastChannel('app-sync');
channel.postMessage({ type: 'DATA_UPDATE', payload: newData });

// 标签页B
const channel = new BroadcastChannel('app-sync');
channel.onmessage = (event) => {
  if (event.data.type === 'DATA_UPDATE') {
    applyDataUpdate(event.data.payload);
  }
};

2. 共享Worker通信枢纽

// shared-worker.js
const connections = [];

self.onconnect = (event) => {
  const port = event.ports[0];
  connections.push(port);
  
  port.onmessage = (e) => {
    // 广播到所有连接
    connections.forEach(conn => {
      if (conn !== port) {
        conn.postMessage(e.data);
      }
    });
  };
  
  port.start();
};

// 各标签页代码
const worker = new SharedWorker('shared-worker.js');
worker.port.onmessage = (event) => {
  console.log('来自其他标签页的消息:', event.data);
};

function broadcastToTabs(message) {
  worker.port.postMessage(message);
}

调试与错误处理

1. 常见问题排查

2. 调试工具技巧

// 增强版消息监听器（调试用）
window.addEventListener('message', function debugMessageListener(event) {
  console.groupCollapsed(
    `收到消息 from ${event.origin}`, 
    event.data.type || '无类型'
  );
  console.log('完整消息对象:', event);
  console.log('数据内容:', event.data);
  console.groupEnd();
  
  // 原始处理逻辑...
});

// 在Chrome开发者工具中监控postMessage调用
(function() {
  const originalPostMessage = window.postMessage;
  window.postMessage = function(message, targetOrigin, transfer) {
    console.debug(
      'postMessage调用:',
      `\nTarget: ${targetOrigin}`,
      `\nMessage:`, message,
      `\nTransfer:`, transfer
    );
    originalPostMessage.apply(this, arguments);
  };
})();

性能优化策略

1. 消息批处理：

   let messageQueue = [];
   let isProcessing = false;
   
   function enqueueMessage(message) {
     messageQueue.push(message);
     
     if (!isProcessing) {
       isProcessing = true;
       requestAnimationFrame(processQueue);
     }
   }
   
   function processQueue() {
     if (messageQueue.length > 0) {
       const batch = messageQueue.splice(0, 10); // 每批10条
       worker.postMessage({ type: 'BATCH_UPDATE', messages: batch });
     }
     
     isProcessing = messageQueue.length > 0;
     if (isProcessing) {
       requestAnimationFrame(processQueue);
     }
   }
   

2. 节流高频消息：

   function createThrottledSender(target, delay = 100) {
     let lastSend = 0;
     let pendingMessage = null;
     
     return function(message) {
       pendingMessage = message;
       
       const now = Date.now();
       if (now - lastSend >= delay) {
         target.postMessage(pendingMessage);
         pendingMessage = null;
         lastSend = now;
       } else {
         setTimeout(() => {
           if (pendingMessage) {
             target.postMessage(pendingMessage);
             pendingMessage = null;
           }
           lastSend = Date.now();
         }, delay - (now - lastSend));
       }
     };
   }
   
   const throttledSend = createThrottledSender(iframe.contentWindow);
   

安全威胁防护

1. CSRF攻击防御：

   // 为关键操作添加CSRF令牌
   function sendSecureCommand(command) {
     const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
     parentWindow.postMessage(
       {
         type: 'SECURE_COMMAND',
         command,
         csrfToken,
         timestamp: Date.now()
       },
       parentOrigin
     );
   }
   

2. DoS攻击防护：

   // 消息速率限制
   const messageLimiter = (function() {
     const limits = {};
     const MAX_MESSAGES = 100;
     const WINDOW_MS = 60000;
     
     return function(origin) {
       const now = Date.now();
       limits[origin] = limits[origin] || [];
       
       // 清除过期记录
       limits[origin] = limits[origin].filter(t => t > now - WINDOW_MS);
       
       if (limits[origin].length >= MAX_MESSAGES) {
         console.warn(`来自 ${origin} 的消息过于频繁`);
         return false;
       }
       
       limits[origin].push(now);
       return true;
     };
   })();
   
   window.addEventListener('message', (event) => {
     if (!messageLimiter(event.origin)) return;
     // 正常处理...
   });
   

postMessage API为现代Web应用提供了强大的跨文档通信能力，正确使用时需要注意：

• 始终验证消息来源（event.origin）
• 定义清晰的消息协议格式
• 为敏感操作添加额外验证
• 及时清理不再需要的监听器
• 考虑性能影响和节流策略

通过结合MessageChannel、BroadcastChannel等辅助API，可以构建出复杂且安全的跨文档通信架构，满足各种应用场景的需求。