使用 Iframe 時如何克服「SecurityError: Blocked Cross-Origin Access」？

安全錯誤：阻止跨來源存取

嘗試將iframe 整合到HTML 頁面並使用JavaScript 存取其元素時，您可能會遇到以下錯誤：

SecurityError: Blocked a frame with origin "http://www.example.com" from accessing a cross-origin frame.

此錯誤源自於瀏覽器遵守同源策略，這是一種防止腳本存取框架的安全措施有著不同的起源。來源包含協定、主機名稱和連接埠。

解決方法

雖然禁止直接跨源腳本訪問，但您可以利用 window.postMessage及其對應的訊息事件在來源之間建立通訊框架：

主要Page:

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'https://your-second-site.example');

Iframe:

window.addEventListener('message', event => {
    // Verify the origin to ensure it's your site
    if (event.origin === 'https://your-first-site.example') {
        // Retrieve data from event.data
        console.log(event.data);
    }
});

這種方法允許框架之間的雙向通訊。跨來源訊息傳遞還可以應用於彈出視窗和從主頁產生的其他新視窗。

以上是使用 Iframe 時如何克服「SecurityError: Blocked Cross-Origin Access」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！