Edi Edi - 10 months ago 569
Javascript Question

Access-Control-Allow-Origin not working for iframe withing the same domain

I'm trying to access an iframe within a subdomain and get a cross domain error.

Here is the code of example.mydomain.com/iframe_test.html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<iframe src="http://example2.mydomain.com/welcome.php" width="1000" height="600"></iframe>

And here is the code of example2.mydomain.com/welcome.php:

header("Access-Control-Allow-Origin: " . "*");

<div id="innerdiv">

When the line $('#innerdiv',$('iframe').contents()).hide() is executed, the following error occurs:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://example.mydomain.com" from accessing a frame with origin "http://example2.mydomain.com". Protocols, domains, and ports must match.

I checked with Fiddler that the Access-Control-Allow-Origin header was really returned in the response of welcome.php

Is it possible to access the contents of an iframe within a subdomain?


Access-Control-Allow-Origin is used only for XHR.

What you need is called Same Origin Policy.

You have to add document.domain = 'example.com' to your pages.