Reputation: 989
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:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<iframe src="http://example2.mydomain.com/welcome.php" width="1000" height="600"></iframe>
<script>
$(document).ready(function()
{
setTimeout(function(){
$('#innerdiv',$('iframe').contents()).hide();
},5000);
});
</script>
</body>
</html>
And here is the code of example2.mydomain.com/welcome.php:
<?php
header("Access-Control-Allow-Origin: " . "*");
?>
<html>
<head>
</head>
<body>
<div id="innerdiv">
hello
</div>
</body>
</html>
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?
Upvotes: 17
Views: 83002
Reputation: 9
I found this solution about "Access-Control-Allow-Origin" in custom.unified.js with divi theme wordpress and i corrected by put this condition
if (window.parent != window.top) {
window.top && window.top.__Cypress__ ? r = window.parent === window.top ? window : window.parent : window.top && (r = window.top, window.top, window.self)
}
Upvotes: -2
Reputation: 14344
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.
Upvotes: 25