Allowing a child Iframe to call a function on its parent window from a different domain

Question

I have made a page which gets loaded in an IFrame and it needs to call a function on the parent page after it finishes loading.

It works locally in development (on the same domain) but in the Real World it is hosted on a completely different domain, so obviously I am running into Cross domain problems, ie:

Unsafe JavaScript attempt to access frame with URL http://[...]site1.com from frame with URL http://[...]site2.com/iframe. Domains, protocols and ports must match.

I control both the servers, so is it possible for me to put something on one or both of the servers that says they're allowed to talk to each other?

I have looked at setting "document.domain" in both the Iframe page and the parent page.

I have experimented with setting the Access Control Header:

header('Access-Control-Allow-Origin: *');

But neither of those work.

Is there any way of allowing an Iframe calling a function in the Parent window on a completely different domain when I control both servers?

This [post](http://stackoverflow.com/questions/5477324/iframe-calling-parent-javascript) provides an extremely simple solution. — craned, Jun 23 '15 at 19:37

score 90 · Accepted Answer · answered Oct 24 '12 at 03:47

90

You can communicate between frames via the message posting API.

For example, in your child frame you might call:

parent.postMessage("child frame", "*");

And in the parent frame, register a message handler:

window.addEventListener("message", function(event) {
    console.log("Hello from " + event.data);
});

answered Oct 24 '12 at 03:47

dfreeman

2,834
2
20
24

1

Tested on the IE11 – Luca Ziegler Sep 27 '19 at 12:34
To get the output of the function, you would also need to [send a message back](https://stackoverflow.com/a/56153777/975097) to the child frame. – Anderson Green May 22 '22 at 20:18

score 4 · Answer 2 · answered Oct 24 '12 at 03:55

4

There are a number of options here: http://softwareas.com/cross-domain-communication-with-iframes

answered Oct 24 '12 at 03:55

iivel

2,576
22
19

although there is a note at the top that this article is mainly kept for historical purposes and in the modern world you should only be using `postMessage` (as per the accepted answer) – Adam Burley Dec 07 '18 at 21:58

Gilbou · Answer 3 · 2013-10-12T10:12:38.877

This problem can be easily solved by using an .htaccess rewrite.

Demo:

A. Create a directory named "iframeContent/" on SERVER 1.

B. Place in that directory a file named index.php containing:

<html> 
<head></head> 
<body>

<script type="text/javascript">

    parent.check();

</script>

</body> 
</html>

This is the content of the iFrame. It will call a function in a parent.

C. Create a directory named "iframeTesting_without-htaccess/" on SERVER 2.

D. Place in that directory a file named index.php containing:

<html> 
<head></head> 
<body>

<script type="text/javascript">

    function check() { 

       alert("hello");

    }

</script>

<iframe id="sidebnrId" name="sidebnr"
src="PATH-ON-SERVER-1/iframeContent/" frameborder="0"
height="500px" width="600px" scrolling="no"></iframe>

</script>

</body> 
</html>

This is simply the content of the parent windows. Just note that the iFrame content is located on another server (because on SERVER 1).

E. Access "PATH-ON-SERVER-2/iframeTesting_without-htaccess/" with a web-browser -> nothing happens: the iframe does not have access to the function of its parent.

HERE IS HOW YOU CAN SOLVE THE PROBLEM

F. Create another directory named "iframeTesting_with-htaccess/" on SERVER 2.

G. Place in that directory a file named index.php containing:

<html> 
<head></head> 
<body>

<script type="text/javascript">

    function check() { 

       alert("hello");

    }

</script>

<iframe id="sidebnrId" name="sidebnr"
src="content-iframe/" frameborder="0"
height="500px" width="600px" scrolling="no"></iframe>

</script>

</body> 
</html>

This time the iFrame does not point anymore directly to the content on SERVER 1 but to an intermediate fictive directory "content-iframe/" located on the same server (SERVER 2).

H. Place in that directory a .htaccess file containing:

Options +FollowSymLinks
RewriteEngine On

RewriteBase /

RewriteRule ^content-iframe/$ PATH-ON-SERVER-1/iframeContent/ [R,NC,P]

The role of that file is to redirect any access to the fictive directory to the content on the SERVER 1.

I. Try again, access "PATH-ON-SERVER-2/iframeTesting_with-htaccess/" with a web-browser. This time it will work. I hope it helped :-)

score 1 · Answer 4 · answered Oct 24 '12 at 03:47

1

In modern browsers, you can use window.postMessage() to communicate between cooperating frames on different domains. You can't call a function directly, but you can pass data or messages between the two. See the description on MDN.

answered Oct 24 '12 at 03:47

jfriend00

683,504
96
985
979

Allowing a child Iframe to call a function on its parent window from a different domain

4 Answers4

Linked