Search code examples
javascriptgoogle-chromefirefoxsame-origin-policy

Same origin policy seemingly not working

I'm trying to understand the same origin policy in detail. To this end i tried to see how it worked with code (i'm a total noob in web development) so i started a Flask server and created a domain local.com and a subdomain store.local.com. Then in the store.html page of the subdomain i created an iframe with src=http://local.com - without modifying the document.domain property in any way as read here.

Now from what i had read, i tought this would fail, but instead it correctly shows the content of the super domain index.html page. I've repeated the experiment hosting the two domains on two different physical computers but that didn't change anything. (I've tried both Firefox and Chrome)

Now i've also tried with with src=http://google.com and this does actually get stopped by the SOP. So at the moment i'm kind of in deep confusion, could anyone pls help me make some sense of it? Thanks.

Solution

  • IFrames are generally exempt from the same origin policy.

    However, if you look at the HTTP response headers when you call http://google.com, you will see the following header:

    x-frame-options:SAMEORIGIN

    This explicitly tells your browser that it should prevent the page from being displayed across origins.

    MDN describes this particular behavior:

    Here are some examples of resources which may be embedded cross-origin:

    [...]

    • Anything with <frame> and <iframe>. A site can use the X-Frame-Options header to prevent this form of cross-origin interaction.