跨域 iframe 無法透過 window.open 彈出新視窗

問題場景

頁面 A (domain A) 嵌入 iframe 指向頁面 B (domain B)。嘗試在 iframe 內按鈕點擊時呼叫 window.open() 讓父頁面 A 彈出新視窗，受限於同源策略而失敗。

安全機制解析

瀏覽器同源策略禁止不同源的文件互相操作 DOM 或呼叫 window.open 等敏感 API。父頁面無法直接控制跨域 iframe 的導航行為，iframe 內腳本也無法存取父頁面的 window 物件方法。

可行替代方案

• 目標連結加 target="_blank"：在域名 B 的頁面上，將需彈出的連結或按鈕表單設置 target="_blank"，由使用者直接點擊觸發。
• postMessage 通訊：iframe 透過 parent.postMessage() 傳送訊息給父頁面，父頁面監聽 message 事件後在同源環境下呼叫 window.open()。
• 代理頁面：在域名 A 建立代理頁面，iframe 載入代理頁面，代理頁面再內嵌域名 B 內容（若允許被嵌入），繞過跨域限制。

postMessage 範例

// iframe 內 (domain B)
parent.postMessage({action: 'openPopup', url: 'https://example.com'}, 'https://domain-a.com');

// 父頁面 (domain A)
window.addEventListener('message', e => {
    if (e.origin !== 'https://domain-b.com') return;
    if (e.data.action === 'openPopup') window.open(e.data.url, '_blank');
});

跨域通訊請遵循最小權限原則，驗證 origin 確保安全。