作為前端開發，你一定遇到過這樣的場景：主站嵌入了第三方支付的 iframe，需要同步用户登錄狀態；或者通過 `window.open` 打開的子窗口，要向父頁面傳遞操作結果。此時，瀏覽器的“同源策略”就像一道無形的牆，直接阻斷了頁面間的直接交互。而 `postMessage` 正是為打破這道枷鎖而生的 HTML5 核心 API，它讓不同源的窗口、框架之間得以安全地雙向通信，成為跨域交互的“官方郵差”。

本文將從同源策略的核心限制説起，深入剖析 postMessage 的工作原理、語法細節，通過 3 個實戰場景的完整代碼示例，結合企業級安全規範與避坑指南，幫你徹底掌握這項技術，從容應對各類跨域通信需求。

一、同源策略：跨域通信的“天然壁壘”

要理解 postMessage 的價值，首先要搞清楚它解決的核心問題——同源策略（Same-Origin Policy）。這是瀏覽器為保護用户信息安全而設立的核心安全準則，它規定：只有當兩個頁面的協議、域名、端口完全一致時，才能互相訪問對方的 DOM、變量、函數或發送請求。

1. 同源與跨域的直觀判斷

以下是同源與跨域的典型示例（以 https://www.example.com:443 為基準）：

頁面地址	是否同源	原因
`https://www.example.com:443/home`	是	協議、域名、端口完全一致
`https://blog.example.com:443`	否	子域名不同
`http://www.example.com:443`	否	協議不同（http vs https）
`https://www.example.com:8080`	否	端口不同（443 vs 8080）

2. 同源策略的核心限制

在跨域場景下，瀏覽器會嚴格限制以下操作：

禁止跨域訪問 DOM：父頁面無法獲取跨域 iframe 的 contentDocument，子頁面也無法讀取父頁面的 window 屬性；
禁止跨域腳本調用：無法直接調用跨域頁面的函數或修改變量；
禁止跨域數據共享：LocalStorage、SessionStorage 等存儲對象無法跨域訪問。

這些限制雖然保障了安全，但也給實際開發帶來了諸多不便。在 postMessage 出現之前，開發者只能通過 JSONP、CORS 代理、服務器中轉等方式間接實現跨域通信，不僅開發成本高，還存在功能侷限性（如 JSONP 僅支持 GET 請求）。而 postMessage 的出現，讓前端跨域通信有了標準化、高效的解決方案。

二、postMessage 核心原理與語法詳解

postMessage 是掛載在 window 對象上的方法，它的核心設計思想是基於消息事件的異步通信機制：發送方通過調用 postMessage 方法，向目標窗口發送結構化數據；接收方通過監聽 message 事件，捕獲並處理來自合法源的消息。

與傳統跨域方案不同，postMessage 不依賴服務器中轉，而是由瀏覽器直接提供通信通道，同時通過“源校驗”機制保障通信安全，真正實現了“受控的跨域突破”。

1. 核心語法與參數説明

postMessage 的語法非常簡潔，核心方法與事件監聽的完整格式如下：

發送方：targetWindow.postMessage()

targetWindow.postMessage(message, targetOrigin, [transfer]);

該方法接收三個參數，其中前兩個為必選，第三個為可選，具體説明如下：

參數	類型	核心説明	安全要點
`message`	任意類型	要發送的消息數據，支持字符串、對象、數組等。瀏覽器會通過“結構化克隆算法”自動序列化，無需手動轉 JSON	避免發送敏感數據（如密碼），即使加密也需謹慎
`targetOrigin`	字符串	目標窗口的“源”（協議+域名+端口），如 `https://pay.example.com`	生產環境禁止使用 *``**（通配符），否則會將消息發送給任意源，存在數據泄露風險
`transfer`	數組	可選的可轉移對象（如 ArrayBuffer），轉移後發送方無法再使用該對象	日常開發極少使用，僅適用於大數據傳輸場景

接收方：監聽 message 事件

接收方需要在窗口上監聽 message 事件，當有消息到達時，會觸發回調函數，回調參數為 MessageEvent 對象，包含三個核心屬性：

屬性	類型	核心説明	校驗要點
`event.data`	任意類型	發送方傳遞的消息數據，與發送時的 `message` 一致	需校驗數據類型和格式，防止惡意數據注入
`event.origin`	字符串	發送方的源（瀏覽器強制注入，不可篡改），如 `https://www.example.com`	唯一可信的身份憑證，必須嚴格校驗
`event.source`	Window 對象	發送方窗口的引用，可用於向發送方回傳消息	可通過該對象實現雙向通信，無需重新獲取窗口引用

2. 關鍵概念：窗口引用的獲取方式

要調用 postMessage，首先需要獲取目標窗口的引用（targetWindow），不同通信場景的獲取方式不同，這是實現通信的前提，常見方式如下：

iframe 場景：父頁面通過 iframe.contentWindow 獲取子窗口引用；子頁面通過 window.parent（父窗口）或 window.top（頂級窗口）獲取父級引用；
新窗口場景：父頁面通過 window.open(url) 的返回值獲取子窗口引用；子頁面通過 window.opener 獲取父窗口引用；
多標籤頁場景：通過 localStorage 結合 storage 事件觸發，再通過 window.open 或已知的窗口引用通信（需配合其他機制）。

三、實戰場景：完整代碼示例

為了讓你真正掌握 postMessage 的使用，我們選取 3 個開發中最常見的跨域場景，搭建本地測試環境，提供完整的可運行代碼，並標註關鍵安全要點。

前置準備：搭建本地跨域測試環境

由於瀏覽器的同源策略限制，我們需要在本地模擬兩個不同的域名。通過修改 hosts 文件（Windows 路徑：C:\Windows\System32\drivers\etc\hosts；Mac/Linux 路徑：/etc/hosts），添加以下映射：

127.0.0.1  parent.example.com
127.0.0.1  child.example.com

然後啓動兩個本地服務：

父頁面服務：運行在 http://parent.example.com:8080；
子頁面服務：運行在 http://child.example.com:8081。

場景一：iframe 父子頁面雙向跨域通信

這是最常見的場景，例如主站（parent.example.com）嵌入第三方組件（child.example.com），需要實現“父傳子（同步用户信息）”和“子傳父（同步操作結果）”。

1. 父頁面（發送方 + 接收方）：http://parent.example.com:8080/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>父頁面 - 跨域通信測試</title>
    <style>
        .container { margin: 20px; }
        iframe { width: 100%; height: 300px; border: 1px solid #ccc; }
        .log-box { margin-top: 20px; padding: 10px; border: 1px solid #0066cc; height: 150px; overflow-y: auto; }
    </style>
</head>
<body>
    <div class="container">
        <h1>父頁面（parent.example.com:8080）</h1>
        <button onclick="sendToChild()">向子頁面發送用户信息</button>
        <iframe id="childIframe" src="http://child.example.com:8081/child.html"></iframe>
        <div class="log-box" id="receiveLog">接收日誌：<br></div>
    </div>

    <script>
        // 存儲子窗口引用（確保 iframe 加載完成後獲取）
        let childWindow = null;
        const childIframe = document.getElementById('childIframe');
        const receiveLog = document.getElementById('receiveLog');

        // 1. 監聽 iframe 加載完成事件，獲取子窗口引用
        childIframe.onload = function() {
            childWindow = childIframe.contentWindow;
            console.log('子頁面加載完成，已獲取窗口引用');
        };

        // 2. 向子頁面發送消息（父 -> 子）
        function sendToChild() {
            if (!childWindow) {
                alert('子頁面尚未加載完成！');
                return;
            }
            // 構造用户信息（模擬業務數據）
            const userData = {
                cmd: 'userLogin',
                data: {
                    userId: 10086,
                    userName: '前端開發獅',
                    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // 模擬加密 token
                },
                timestamp: Date.now()
            };
            // 關鍵：指定明確的 targetOrigin，禁止使用 *
            childWindow.postMessage(userData, 'http://child.example.com:8081');
            console.log('已向子頁面發送用户信息：', userData);
        }

        // 3. 監聽子頁面的消息（子 -> 父）
        window.addEventListener('message', handleMessage, false);

        // 核心：消息處理與安全校驗函數
        function handleMessage(event) {
            // 第一步：嚴格校驗發送方源（僅接收 child.example.com:8081 的消息）
            const trustedOrigin = 'http://child.example.com:8081';
            if (event.origin !== trustedOrigin) {
                console.warn('拒絕接收未知源的消息：', event.origin);
                return;
            }

            // 第二步：校驗消息格式（確保是預期的業務數據）
            if (typeof event.data !== 'object' || event.data === null) {
                console.warn('消息格式非法，非對象類型');
                return;
            }

            // 第三步：根據業務指令處理消息
            const { cmd, data, timestamp } = event.data;
            switch (cmd) {
                case 'paySuccess':
                    logReceive(`子頁面通知：支付成功，訂單號：${data.orderNo}`);
                    // 業務邏輯：更新頁面狀態，隱藏支付框
                    break;
                case 'payCancel':
                    logReceive(`子頁面通知：用户取消支付`);
                    break;
                default:
                    logReceive(`收到未知指令：${cmd}，數據：${JSON.stringify(data)}`);
            }

            // 可選：向子頁面回傳確認消息（實現雙向通信）
            event.source.postMessage({
                cmd: 'ack',
                msg: '父頁面已收到消息'
            }, event.origin);
        }

        // 輔助函數：打印接收日誌
        function logReceive(content) {
            receiveLog.innerHTML += `[${new Date().toLocaleTimeString()}] ${content}<br>`;
            receiveLog.scrollTop = receiveLog.scrollHeight;
        }

        // 避坑：頁面卸載時移除事件監聽，防止內存泄漏
        window.addEventListener('beforeunload', function() {
            window.removeEventListener('message', handleMessage);
        });
    </script>
</body>
</html>

2. 子頁面（接收方 + 發送方）：http://child.example.com:8081/child.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>子頁面 - 跨域通信測試</title>
    <style>
        .container { margin: 20px; }
        .log-box { margin: 10px 0; padding: 10px; border: 1px solid #009933; height: 150px; overflow-y: auto; }
    </style>
</head>
<body>
    <div class="container">
        <h1>子頁面（child.example.com:8081）</h1>
        <button onclick="sendPaySuccess()">通知父頁面：支付成功</button>
        <button onclick="sendPayCancel()">通知父頁面：取消支付</button>
        <div class="log-box" id="receiveLog">接收日誌：<br></div>
    </div>

    <script>
        const receiveLog = document.getElementById('receiveLog');
        // 可信源：僅接收 parent.example.com:8080 的消息
        const trustedOrigin = 'http://parent.example.com:8080';

        // 1. 監聽父頁面的消息（父 -> 子）
        window.addEventListener('message', handleParentMessage, false);

        // 核心：處理父頁面消息，嚴格校驗
        function handleParentMessage(event) {
            // 第一步：校驗源
            if (event.origin !== trustedOrigin) {
                console.warn('拒絕未知源消息：', event.origin);
                return;
            }

            // 第二步：校驗消息格式和指令
            const { cmd, data, timestamp } = event.data || {};
            if (!cmd || typeof data !== 'object') {
                console.warn('無效的業務消息：', event.data);
                return;
            }

            // 第三步：處理業務邏輯
            if (cmd === 'userLogin') {
                logReceive(`收到用户登錄信息：用户名=${data.userName}，Token=${data.token.substring(0, 20)}...`);
                // 業務邏輯：存儲用户信息，初始化支付組件
                console.log('初始化支付組件，用户ID：', data.userId);
            }

            // 接收父頁面的確認消息
            if (cmd === 'ack') {
                logReceive(`父頁面確認：${data.msg}`);
            }
        }

        // 2. 向父頁面發送支付結果（子 -> 父）
        function sendPaySuccess() {
            // 子頁面向父頁面發送消息，使用 window.parent 獲取父窗口引用
            // 關鍵：targetOrigin 設為父頁面的源，或使用 event.origin（若有）
            window.parent.postMessage({
                cmd: 'paySuccess',
                data: {
                    orderNo: `ORDER_${Date.now()}`,
                    amount: 99.00
                },
                timestamp: Date.now()
            }, trustedOrigin);
        }

        function sendPayCancel() {
            window.parent.postMessage({
                cmd: 'payCancel',
                data: {},
                timestamp: Date.now()
            }, trustedOrigin);
        }

        // 輔助函數：打印日誌
        function logReceive(content) {
            receiveLog.innerHTML += `[${new Date().toLocaleTimeString()}] ${content}<br>`;
            receiveLog.scrollTop = receiveLog.scrollHeight;
        }

        // 頁面卸載時移除監聽
        window.addEventListener('beforeunload', function() {
            window.removeEventListener('message', handleParentMessage);
        });
    </script>
</body>
</html>

場景一關鍵要點

iframe 加載時機：必須在 iframe.onload 事件後獲取 contentWindow，否則會因子頁面未加載完成導致引用為空；
雙向校驗：父、子頁面均嚴格校驗 event.origin，確保消息來自可信源；
業務指令設計：通過 cmd 字段區分業務類型（如 userLogin、paySuccess），讓消息處理更清晰；
內存泄漏防護：頁面卸載時移除 message 事件監聽，避免長期佔用內存。

場景二：window.open 新窗口與父頁面通信

該場景適用於“點擊按鈕打開新窗口，完成操作後返回結果”的需求，例如彈出的登錄窗口、訂單詳情窗口。

1. 父頁面（打開新窗口 + 接收消息）：http://parent.example.com:8080/open-parent.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>父頁面 - 新窗口通信</title>
    <style>
        .container { margin: 20px; }
        .log-box { margin-top: 20px; padding: 10px; border: 1px solid #0066cc; height: 150px; overflow-y: auto; }
    </style>
</head>
<body>
    <div class="container">
        <h1>父頁面（parent.example.com:8080）</h1>
        <button onclick="openChildWindow()">打開子窗口</button>
        <div class="log-box" id="receiveLog">接收日誌：<br></div>
    </div>

    <script>
        let childWin = null; // 存儲新窗口引用
        const receiveLog = document.getElementById('receiveLog');
        const trustedOrigin = 'http://child.example.com:8081';

        // 1. 打開新窗口
        function openChildWindow() {
            // 打開子窗口，指定尺寸和位置
            childWin = window.open(
                'http://child.example.com:8081/open-child.html',
                '_blank',
                'width=600,height=400,left=200,top=100'
            );

            // 監聽子窗口關閉事件（可選）
            const checkClose = setInterval(() => {
                if (childWin.closed) {
                    clearInterval(checkClose);
                    logReceive('子窗口已關閉');
                    childWin = null;
                }
            }, 500);
        }

        // 2. 向子窗口發送消息（需等待子窗口加載完成）
        function sendToChild() {
            if (!childWin || childWin.closed) {
                alert('子窗口未打開或已關閉！');
                return;
            }
            childWin.postMessage({
                cmd: 'init',
                data: {
                    title: '訂單支付',
                    orderId: 'OD202603021600'
                }
            }, trustedOrigin);
        }

        // 3. 監聽子窗口的消息
        window.addEventListener('message', handleChildMessage, false);

        function handleChildMessage(event) {
            if (event.origin !== trustedOrigin) return;
            if (typeof event.data !== 'object') return;

            const { cmd, data } = event.data;
            switch (cmd) {
                case 'operateResult':
                    logReceive(`子窗口返回：${data.result}，備註：${data.remark}`);
                    // 可選：向子窗口發送確認消息
                    event.source.postMessage({ cmd: 'ack', msg: '結果已收到' }, event.origin);
                    break;
                default:
                    logReceive(`未知指令：${cmd}`);
            }
        }

        function logReceive(content) {
            receiveLog.innerHTML += `[${new Date().toLocaleTimeString()}] ${content}<br>`;
            receiveLog.scrollTop = receiveLog.scrollHeight;
        }

        // 頁面卸載時清理資源
        window.addEventListener('beforeunload', function() {
            window.removeEventListener('message', handleChildMessage);
            if (childWin && !childWin.closed) {
                childWin.close();
            }
        });
    </script>
</body>
</html>

2. 子頁面（接收消息 + 向父頁面發送結果）：http://child.example.com:8081/open-child.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>子窗口 - 通信測試</title>
    <style>
        .container { margin: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>子窗口（child.example.com:8081）</h1>
        <p id="initInfo">等待父頁面初始化...</p>
        <button onclick="sendResult('success')">返回：操作成功</button>
        <button onclick="sendResult('fail')">返回：操作失敗</button>
        <button onclick="closeWindow()">關閉窗口</button>
    </div>

    <script>
        const initInfo = document.getElementById('initInfo');
        const trustedOrigin = 'http://parent.example.com:8080';

        // 1. 監聽父頁面的初始化消息
        window.addEventListener('message', handleParentInit, false);

        function handleParentInit(event) {
            if (event.origin !== trustedOrigin) return;
            const { cmd, data } = event.data;
            if (cmd === 'init') {
                initInfo.innerText = `初始化完成：${data.title}，訂單ID：${data.orderId}`;
            }
            if (cmd === 'ack') {
                alert(`父頁面確認：${event.data.msg}`);
            }
        }

        // 2. 向父頁面發送操作結果
        function sendResult(result) {
            // 子窗口通過 window.opener 獲取父窗口引用
            if (!window.opener || window.opener.closed) {
                alert('父窗口已關閉！');
                return;
            }
            const remark = result === 'success' ? '支付完成' : '用户放棄支付';
            window.opener.postMessage({
                cmd: 'operateResult',
                data: { result, remark }
            }, trustedOrigin);
        }

        function closeWindow() {
            window.close();
        }

        // 頁面卸載時移除監聽
        window.addEventListener('beforeunload', function() {
            window.removeEventListener('message', handleParentInit);
        });
    </script>
</body>
</html>

場景二關鍵要點

窗口引用管理：通過 window.open 的返回值保存子窗口引用，同時監聽 childWin.closed 狀態，避免操作已關閉的窗口；http://www.riftplatinumbuy.com/news/11111111111111
opener 特性：子窗口通過 window.opener 訪問父窗口，若父窗口關閉，window.opener 會變為 null 或 closed 為 true；http://www.riftplatinumbuy.com/news/2222222222222
兼容性：部分瀏覽器會攔截 window.open（如彈出窗口攔截器），開發時需提示用户允許彈出窗口。http://www.riftplatinumbuy.com/news/33333333333333

場景三：複雜場景——iframe 兄弟頁面跨域通信http://www.riftplatinumbuy.com/news/5555555555

兄弟頁面（同一父頁面下的兩個跨域 iframe）無法直接通信，需通過父頁面中轉實現，這是微前端、多組件嵌入場景中的常見需求。http://www.riftplatinumbuy.com/news/4444444444

1. 父頁面（中轉中心）：http://parent.example.com:8080/brother-parent.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>父頁面 - 兄弟 iframe 中轉</title>
    <style>
        .container { margin: 20px; }
        .iframe-group { display: flex; gap: 20px; margin: 20px 0; }
        iframe { flex: 1; height: 300px; border: 1px solid #ccc; }
        .log-box { padding: 10px; border: 1px solid #0066cc; height: 100px; overflow-y: auto; }
    </style>
</head>
<body>
    <div class="container">
        <h1>父頁面（中轉中心）</h1>
        <div class="iframe-group">
            <iframe id="iframeA" src="http://child.example.com:8081/brother-a.html"></iframe>
            <iframe id="iframeB" src="http://another.example.com:8082/brother-b.html"></iframe>
        </div>
        <div class="log-box" id="transferLog">中轉日誌：<br></div>
    </div>

    <script>
        // 存儲兩個子窗口的引用
        let iframeA = null;
        let iframeB = null;
        const transferLog = document.getElementById('transferLog');

        // 可信源列表
        const trustedOrigins = [
            'http://child.example.com:8081',
            'http://another.example.com:8082'
        ];

        // 1. 獲取 iframe 引用
        document.getElementById('iframeA').onload = function() {
            iframeA = this.contentWindow;
        };
        document.getElementById('iframeB').onload = function() {
            iframeB = this.contentWindow;
        };

        // 2. 核心：監聽消息並中轉
        window.addEventListener('message', handleTransfer, false);

        function handleTransfer(event) {
            // 第一步：校驗發送方是否在可信列表中
            if (!trustedOrigins.includes(event.origin)) {
                console.warn('拒絕非可信源的中轉請求：', event.origin);
                return;
            }

            // 第二步：校驗消息格式，必須包含目標標識
            const { to, cmd, data } = event.data || {};
            if (!to || !cmd) {
                console.warn('中轉消息缺少目標標識或指令：', event.data);
                return;
            }

            // 第三步：根據目標標識中轉消息
            let targetWindow = null;
            let targetOrigin = '';
            if (to === 'iframeB' && event.origin === 'http://child.example.com:8081') {
                targetWindow = iframeB;
                targetOrigin = 'http://another.example.com:8082';
            } else if (to === 'iframeA' && event.origin === 'http://another.example.com:8082') {
                targetWindow = iframeA;
                targetOrigin = 'http://child.example.com:8081';
            } else {
                logTransfer(`無效的中轉請求：從 ${event.origin} 發送到 ${to}`);
                return;
            }

            // 執行中轉
            if (targetWindow) {
                targetWindow.postMessage({
                    from: event.origin,
                    cmd,
                    data
                }, targetOrigin);
                logTransfer(`已將【${cmd}】指令從 ${event.origin} 中轉到 ${targetOrigin}`);
            } else {
                logTransfer(`目標窗口未加載完成：${to}`);
            }
        }

        function logTransfer(content) {
            transferLog.innerHTML += `[${new Date().toLocaleTimeString()}] ${content}<br>`;
            transferLog.scrollTop = transferLog.scrollHeight;
        }
    </script>
</body>
</html>

2. 兄弟頁面 A（發送方）：http://child.example.com:8081/brother-a.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>兄弟頁面 A</title>
    <style>
        .container { margin: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>兄弟頁面 A（child.example.com:8081）</h1>
        <button onclick="sendToB()">向頁面 B 發送數據</button>
        <div id="receiveBox" style="margin-top: 20px; padding: 10px; border: 1px solid #009933;"></div>
    </div>

    <script>
        const receiveBox = document.getElementById('receiveBox');
        const parentOrigin = 'http://parent.example.com:8080';

        // 向頁面 B 發送消息（通過父頁面中轉）
        function sendToB() {
            window.parent.postMessage({
                to: 'iframeB', // 關鍵：指定目標兄弟頁面
                cmd: 'syncData',
                data: {
                    key: 'theme',
                    value: 'dark' // 模擬同步主題狀態
                }
            }, parentOrigin);
        }

        // 監聽頁面 B 的回傳消息
        window.addEventListener('message', function(event) {
            if (event.origin !== parentOrigin) return;
            const { from, cmd, data } = event.data;
            if (cmd === 'syncAck') {
                receiveBox.innerText = `收到頁面 B 確認：${data.msg}，來自 ${from}`;
            }
        });
    </script>
</body>
</html>

3. 兄弟頁面 B（接收方 + 回傳）：http://another.example.com:8082/brother-b.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>兄弟頁面 B</title>
    <style>
        .container { margin: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>兄弟頁面 B（another.example.com:8082）</h1>
        <div id="receiveBox" style="margin-bottom: 20px; padding: 10px; border: 1px solid #009933;"></div>
        <button onclick="sendAckToA()">向頁面 A 發送確認</button>
    </div>

    <script>
        const receiveBox = document.getElementById('receiveBox');
        const parentOrigin = 'http://parent.example.com:8080';
        let lastFrom = ''; // 存儲發送方源，用於回傳

        // 監聽父頁面的中轉消息
        window.addEventListener('message', function(event) {
            if (event.origin !== parentOrigin) return;
            const { from, cmd, data } = event.data;
            if (cmd === 'syncData') {
                lastFrom = from;
                receiveBox.innerText = `收到頁面 A 數據：${data.key}=${data.value}，來自 ${from}`;
                // 業務邏輯：切換暗黑主題
                document.body.style.backgroundColor = '#333';
                document.body.style.color = '#fff';
            }
        });

        // 向頁面 A 發送確認（通過父頁面中轉）
        function sendAckToA() {
            if (!lastFrom) {
                alert('尚未收到頁面 A 的數據！');
                return;
            }
            window.parent.postMessage({
                to: 'iframeA',
                cmd: 'syncAck',
                data: {
                    msg: '主題已同步完成'
                }
            }, parentOrigin);
        }
    </script>
</body>
</html>

場景三關鍵要點

中轉核心邏輯：父頁面作為“消息樞紐”，通過 to 字段識別目標兄弟頁面，完成消息轉發；
雙向可信校驗：父頁面校驗發送方是否在可信列表，子頁面校驗中轉消息是否來自父頁面；
業務標識：通過 from 字段記錄發送方，實現兄弟頁面的雙向回傳。

四、企業級安全規範與避坑指南

postMessage 是“雙刃劍”，若使用不當，會帶來跨站腳本攻擊（XSS）、數據泄露等安全風險。結合大廠實戰經驗，以下是必須遵守的安全規範和避坑要點。

1. 核心安全準則（必須嚴格執行）

安全環節	核心要求	禁止行為
發送端	始終指定明確的 targetOrigin（協議+域名+端口）	生產環境使用 `*` 通配符
接收端	第一步校驗 `event.origin`（僅接收可信源）	信任 `event.data` 中的“sender”字段，或跳過源校驗
數據校驗	校驗 `event.data` 的類型、格式、業務指令	直接執行 `eval(event.data)`，或直接將數據插入 DOM
敏感數據	避免發送明文敏感數據，必要時加密傳輸	發送密碼、銀行卡號等明文敏感信息

關鍵原理：event.origin 是瀏覽器強制注入的、不可篡改的源標識，是唯一可信的跨域身份憑證，而 event.data 可被惡意構造，絕對不能作為身份校驗依據。

2. 常見避坑要點

坑點 1：iframe 跨域時無法獲取 contentDocument

很多開發者會嘗試通過 iframe.contentDocument 獲取跨域 iframe 的 DOM，這會被瀏覽器攔截，拋出“跨域訪問被拒絕”的錯誤。解決方案：僅通過 postMessage 傳遞數據，不直接操作跨域 DOM。

坑點 2：消息事件監聽重複綁定

多次執行 window.addEventListener('message', ...) 會導致同一消息被處理多次。解決方案：將監聽邏輯寫在頁面初始化時，或使用“事件委託”，頁面卸載時必須移除監聽。

坑點 3：發送大數據導致性能問題

postMessage 適合傳遞小體積的業務數據（如指令、狀態），若發送超過 10MB 的數據（如大文件、大量列表），會導致頁面卡頓、傳輸失敗。解決方案：大數據傳輸使用 CORS 接口或分片上傳，postMessage 僅傳遞傳輸狀態。

坑點 4：忽略子頁面跳轉後的源變化

若子頁面通過 location.href 跳轉到其他域名，event.origin 會變為新域名，此時父頁面的消息會發送失敗。解決方案：在子頁面跳轉前，通過 postMessage 通知父頁面，更新目標源；或在父頁面監聽 iframe 的 onload 事件，重新校驗源。

3. 進階安全優化（大廠實戰方案）

消息簽名機制：發送方對消息數據進行加密簽名（如使用 HMAC），接收方校驗簽名，防止消息被篡改；
白名單動態管理：將可信源白名單存儲在服務器，通過接口動態獲取，避免硬編碼；
指令白名單：接收方僅處理預定義的業務指令（如 userLogin、paySuccess），拒絕未知指令；
日誌記錄：對所有跨域消息的發送、接收、處理過程進行日誌記錄，便於故障排查和安全審計。

五、postMessage 與其他跨域方案的對比

為了讓你在實際開發中選擇最合適的方案，以下是 postMessage 與其他主流跨域方案的對比：

方案	核心優勢	侷限性	適用場景
postMessage	1. 無需服務器參與，前端獨立實現；<br>2. 支持雙向通信；<br>3. 兼容性好（IE8+ 支持）	1. 需手動管理窗口引用；<br>2. 存在安全風險，需嚴格校驗	1. iframe 父子/兄弟通信；<br>2. window.open 新窗口通信；<br>3. 微前端跨應用通信
CORS	1. 標準的跨域請求方案；<br>2. 支持所有 HTTP 請求方法	1. 需服務器配置；<br>2. 僅適用於客户端與服務器通信	前端向跨域服務器發送 AJAX 請求
JSONP	1. 兼容性極好（支持老式瀏覽器）	1. 僅支持 GET 請求；<br>2. 存在 XSS 風險	老式瀏覽器的跨域數據請求
BroadcastChannel	1. 支持同源多標籤頁廣播通信；<br>2. 無需管理窗口引用	1. 不支持跨域；<br>2. IE 不支持	同源多標籤頁狀態同步（如登錄狀態、主題切換）

六、總結

postMessage 作為 HTML5 解決跨域通信的核心 API，通過“消息事件機制”和“源校驗機制”，既打破了同源策略的限制，又保障了通信安全。它的核心價值在於前端獨立實現雙向跨域通信，無需依賴服務器中轉，是 iframe 交互、新窗口通信、微前端架構中的必備技術。

掌握 postMessage 的關鍵，不在於記住語法，而在於理解安全校驗的核心邏輯：發送端指定明確的 targetOrigin，接收端嚴格校驗 event.origin 和消息格式。同時，要避開“重複綁定監聽”“操作跨域 DOM”等常見坑點，結合企業級安全規範（如消息簽名、日誌記錄），才能在實際開發中安全、高效地使用這項技術。

隨着前端技術的發展，微前端、跨應用交互的需求越來越多，postMessage 依然是解決這類問題的“黃金方案”。希望本文的實戰代碼和安全指南，能幫你徹底打破同源枷鎖，從容應對各類跨域通信場景。

博客 / 詳情

打破同源枷鎖：深入理解 postMessage 跨域通信機制