阻止跨來源框架存取:了解安全錯誤
在 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中文網其他相關文章!