首頁 > web前端 > js教程 > 為什麼我的 JavaScript 程式碼在存取 IFrame 時會出現「SecurityError: Blocked a Frame with origin...」錯誤?

為什麼我的 JavaScript 程式碼在存取 IFrame 時會出現「SecurityError: Blocked a Frame with origin...」錯誤?

Susan Sarandon
發布: 2024-12-28 14:03:10
原創
170 人瀏覽過

Why Does My JavaScript Code Get a

阻止跨來源框架存取:了解安全錯誤

在 Web開發中,當嘗試存取具有與父文檔來源不同,開發者可能會遇到以下錯誤:

SecurityError: Blocked a frame with origin "http://www.example.com" from accessing a cross-origin frame.
登入後複製

此錯誤的出現是由於

同源策略

同源策略限制腳本存取不同來源網站的資源以防止潛在的安全漏洞。來源是指 URL 的協定、主機名稱和連接埠的組合。

考慮以下範例:

  • http://www.example.com/home /index.html 可以造訪http://www .example.com/home/other.html內的資源且http://www.example.com:80.
  • https://google.com/search?q=james bond 無法存取來自http://www.example.com/home/index.html.

解決方法用於存取跨來源框架

雖然禁止直接JavaScript 存取跨來源框架,但有一些解決方法可以交換資料:

  • window.postMessage ():允許在兩個不同視窗之間傳遞受控訊息origins.
  • postMessage() iframe 中的監聽器:監聽從父文件發送的訊息。
// In the main page:
frame.contentWindow.postMessage('message', 'https://your-second-site.example');

// In the iframe:
window.addEventListener('message', (event) => {
  if (event.origin === 'https://your-first-site.example') {
    console.log(event.data); // Received message
  }
});
登入後複製

停用Same-來源政策(警告)

停用同源策略可以用於開發目的,但切勿在生產環境中使用,因為它會帶來重大的安全風險。以下是用於在各種瀏覽器中停用該策略的資源連結:

    [Google Chrome](https://stackoverflow.com/questions/26982875/how-to-disable-same -origin-policy )
  • [Mozilla火狐](https://superuser.com/questions/287723/temporarily-disable-same-origin-policy-in-firefox)
  • [Safari](https: //apple.stackexchange.com/questions /211467/如何在Safari中禁用同源策略)

以上是為什麼我的 JavaScript 程式碼在存取 IFrame 時會出現「SecurityError: Blocked a Frame with origin...」錯誤?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板