為什麼我在 JavaScript 收到「SecurityError: Blocked Cross-Origin Frame Access」？

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

嘗試存取

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

此錯誤是同源策略的結果，同源策略是瀏覽器強制執行的基本安全措施。

;同源策略及其意義

同源策略阻止腳本存取資源（例如與其他頁面或框架一樣）具有不同的來源。來源由 URL 的協定（例如 HTTP）、主機名稱和連接埠定義。這些組件中任何一個的差異都會構成一個單獨的來源。

例如，來自“http://www.example.com”的腳本無法訪問來自“https://www.example.com”的資源、“http://www.anothersite.com”或「http://www.example.com:81」。

訪問跨源框架：A解決方法

雖然阻止了對跨源框架的直接腳本訪問，但有一個使用window.postMessage 和事件偵聽器的解決方法。這種方法可讓您在主頁和框架之間交換資料：

主頁：

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

window.addEventListener('message', event => {
  // Check the origin of the data
  if (event.origin === 'https://your-first-site.example') {
    // Data is from the main page, use event.data to process it
  }
});

以上是為什麼我在 JavaScript 收到「SecurityError: Blocked Cross-Origin Frame Access」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！