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

Asked 29/4, 2014 at 11:4 Answered 7/2, 2020 at 14:36

Solved javascript iframe cross-domain-policy

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?

Beard answered 29/4, 2014 at 11:4 Comment(0)

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.

Vassaux answered 29/4, 2014 at 11:12 Comment(8)

Where should we add that document.domain stuff? Can you elaborate a little more. Thank you. – Lotz 8/2, 2015 at 17:29

@SaeedNeamati You need to add it to both of the pages into script tag. Basically the main page and the iframe page need to have <script>document.domain = 'example.com'</script> set – Embosser 11/3, 2015 at 11:42

This doesn't work, I get: Uncaught SecurityError: Failed to set the 'domain' property on 'Document': 'example.com' is not a suffix of ''. – Spawn 1/6, 2015 at 22:26

@MikeR what address of your document? – Vassaux 2/6, 2015 at 4:48

Must use document.domain = 'localhost'; or your domain You should open in web server, not a local file – Milo 17/4, 2017 at 14:59

This solution is deprecated – Plowman 4/8, 2021 at 15:22

Note on deprecation: developer.mozilla.org/en-US/docs/Web/API/Document/domain – Frighten 8/11, 2021 at 12:10

-2

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)
    }

Benignity answered 7/2, 2020 at 14:36 Comment(0)

Recommended topics

Hot tags