postMessage 是 HTML5 規范中定義的跨文檔通信（Cross-Document Messaging）API，其設計目的是解決不同源（協議、域名、端口任一存在差異）的窗口（如 iframe 嵌入的文檔、window.open 創建的新窗口）之間的安全數據交互問題。該 API 通過異步消息傳遞機制，在遵循瀏覽器同源策略的前提下，實現有限度的跨域通信，是現代前端架構中跨上下文交互的核心技術之一。
一、核心特性
postMessage 的核心特性首先體現在跨源通信支持上，它突破了同源策略的限制，允許不同源的窗口（包括 iframe 與父文檔、多標簽頁窗口）進行數據交換，解決了傳統前端技術中跨域場景下（如 XMLHttpRequest、fetch 受同源限制）無法直接通信的難題。
其次，它具備安全可控的交互機制：發送消息時需指定目標窗口的源（origin），接收方通過驗證消息來源確保通信安全性，可有效抵御惡意腳本的偽造消息攻擊；消息內容以序列化形式傳遞，支持字符串、數字、布爾值、數組及普通對象等基本數據類型（復雜對象需通過 JSON.stringify() 手動序列化）。
此外，其異步通信模式使得消息傳遞過程為異步執行，發送方無需等待接收方的響應，適用于非實時性的數據交互場景（如狀態同步、指令傳遞等）。
最后，它還適配多窗口通信，不僅支持 iframe 與父窗口的雙向通信，還可應用于 window.open 創建的子窗口、同一瀏覽器中不同標簽頁之間的通信（需獲取目標窗口的引用）。
二、使用方式
postMessage 的使用需通過 “發送消息” 與 “接收消息” 兩個環節協同完成，且必須遵循嚴格的安全規范。
發送消息主要通過 targetWindow.postMessage() 方法實現，該方法的語法定義為 targetWindow.postMessage(message, targetOrigin, [transfer])。其中 message 是待傳遞的數據內容，支持基本數據類型及可序列化的對象，復雜結構需通過 JSON.stringify() 轉換為字符串后傳遞；targetOrigin 用于指定接收消息的窗口的源，格式為 “協議 + 域名 + 端口”（如 https://example.com:8080），若設置為 * 表示不限制接收方的源（生產環境中不建議使用，存在安全風險），若設置為 / 則表示與當前窗口同域；transfer 為可選參數，用于傳遞可轉移對象（如 ArrayBuffer），轉移后原窗口將失去對該對象的所有權，實際應用中較少使用。例如，主應用向 iframe 嵌入的子應用發送用戶信息時，可先獲取 iframe 對應的 window 對象引用，再調用該方法發送消息：
const iframeElement = document.getElementById('subapp-iframe');
const targetWindow = iframeElement.contentWindow;
targetWindow.postMessage({ type: 'USER_AUTH', payload: { userId: 'u123', roles: ['admin'] } },'https://subapp.example.com'
);
接收消息則是通過監聽 window 對象的 message 事件來實現，語法為 window.addEventListener('message', eventHandler, false)。事件對象 event 包含三個重要屬性：data 是發送方傳遞的消息內容（自動反序列化）；origin 是發送消息的窗口的源（格式為 protocol://domain:port），用于驗證消息來源的合法性；source 是發送消息的窗口的引用，可用于向發送方回傳消息。
接收消息時必須進行來源驗證，以防止惡意網站偽造消息，標準處理流程為：首先驗證消息來源，僅處理可信域名的消息，若消息來源不符合預期則忽略；其次驗證消息格式，確保消息結構符合預期，若格式異常則不處理；最后根據消息類型處理相應的業務邏輯。例如，子應用中接收主應用消息的代碼實現：
window.addEventListener('message', (event) => {// 驗證消息來源if (event.origin !== 'https://mainapp.example.com') {return;}// 驗證消息格式if (typeof event.data !== 'object' || !event.data.type) {return;}// 處理業務邏輯switch (event.data.type) {case 'USER_AUTH':handleUserAuth(event.data.payload);break;}
}, false);
三、典型使用場景
postMessage 的典型使用場景廣泛，在微前端架構中，基于 iframe 的微前端架構里，主應用與子應用可通過 postMessage 實現數據交互，比如主應用向子應用傳遞初始化參數（如用戶令牌、路由信息），子應用向主應用反饋關鍵操作結果（如表單提交狀態、錯誤信息）。
在第三方組件集成時，當頁面嵌入第三方提供的組件（如支付插件、地圖控件），可通過 postMessage 實現宿主頁面與組件的指令交互，例如支付完成后，第三方組件通過 postMessage 通知宿主頁面更新訂單狀態。
在多窗口協同操作中，對于通過 window.open 打開的子窗口，可通過 postMessage 實現與父窗口的狀態同步，如電商平臺中，子窗口完成商品選購后，通過 postMessage 向父窗口傳遞購物車信息。
此外，它還能解決傳統跨域場景下的通信限制，如前端頁面與跨域 iframe 之間的數據交換，無需依賴后端代理即可實現有限度的數據傳遞。
四、安全實踐規范
在安全實踐方面，多項規范需要嚴格遵循：接收消息時必須校驗 event.origin，僅處理可信域名發送的消息，拒絕一切非預期來源的請求，例如可定義可信源列表，若消息來源不在列表中則過濾該消息；發送消息時應避免使用 * 作為 targetOrigin，明確指定接收方的源，防止消息被無關窗口截取；接收消息時需驗證 data 的結構，如是否包含必要字段、數據類型是否匹配預期，避免處理格式異常的消息；若使用 iframe 嵌入第三方內容，可通過 sandbox 屬性限制其權限（如 sandbox=“allow-scripts allow-forms”），同時確保開啟必要的通信權限；跨域場景下，應避免通過 postMessage 傳遞密碼、令牌等敏感數據，若必須傳遞，需確保通信鏈路通過 HTTPS 加密。
總結
postMessage 作為跨源窗口通信的標準解決方案，其核心價值在于在保障安全性的前提下，實現不同源文檔之間的可控交互。通過遵循嚴格的來源驗證、消息校驗等規范，可有效規避安全風險，廣泛應用于微前端架構、跨域組件集成、多窗口協同等場景。深入理解其特性與使用規范，是構建復雜前端系統時處理跨域通信的基礎。
