Same Origin Policy & iframe

Same-Origin Policy & iframes: A Quick Check

This short walkthrough demonstrates how the same-origin policy governs access to data inside an iframe.

Same-origin setup

Start with a page that embeds an iframe named iframe.html from the same origin. Because the host page and the embedded frame share an origin, the host can reach into the frame and disclose a secret message.

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

Switching to a cross-origin frame

Next, change the iframe's src to https://other-iframe.glitch.me/. Now the host page and the embedded frame are no longer same-origin, so the browser blocks access to the frame's data—the secret message is no longer reachable.