Same Origin Policy & iframe

Mariko Kosaka

在本程式碼研究室中,瞭解相同來源政策在存取 iframe 內資料時如何運作。

設定:含有相同來源 iframe 的網頁

這個頁面在相同來源中嵌入名為 iframe.htmliframe。 由於主機和 iframe 共用相同的來源,主機網站便可存取 iframe 內的資料,並公開諸如 blow 這類秘密訊息。

const iframe = document.getElementById('iframe');
const message = iframe.contentDocument.getElementById('message').innerText;

變更為跨來源 iframe

請嘗試將 iframesrc 變更為 https://other-iframe.glitch.me/。 代管網頁仍可存取秘密訊息嗎?

主機和內嵌的 iframe 沒有相同的來源,因此資料存取會受到限制。