在本程式碼研究室中,瞭解在存取 iframe 內資料時,相同來源政策的運作方式。
設定:含有同源 iframe 的網頁
這個頁面會在相同來源中嵌入名為 iframe.html
的 iframe
。由於主機和 iframe 共用相同的來源,主機網站可以存取 iframe 內的資料,並公開以下類似的機密訊息。
const iframe = document.getElementById('iframe');
const message = iframe.contentDocument.getElementById('message').innerText;
變更為跨來源 iframe
請嘗試將 iframe
的 src
變更為 https://other-iframe.glitch.me/
。主機網頁是否仍可存取密件?
由於主機和嵌入的 iframe
來源不同,因此資料存取權受到限制。