Iframe cross domain issue

Question

I want to pass a message from iframe to parent page in every few seconds like:

Iframe Domain = www.abc.com
Parent Domain = www.xyz.com

Have check with:

Cross domain iframe issue
https://stackoverflow.com/questions/5203741/jquery-cross-iframe-script-loading-ownerdocument-issue

Can someone help me on it?

And what is your problem? `postMessage` should work cross-domain. — Amadan, Dec 25 '12 at 06:51
@Amadan postMessage would work cross-domain, if the service allows * (or xyz.com). Or am I mistaken? — TJ-, Dec 25 '12 at 07:51
You are mistaken. The whole point of `postMessage` is to allow communication between strangers. You can't force the other frame to execute any code that it doesn't already possess, just send it data - what they do with this data, and how they validate it, is on them. This contrasts with things like `document.getElementById('myframe').contentWindow.document` as quoted in the linked question, which tries to actively pry into another frame's affairs. Read more about `postMessage` [at MDN](https://developer.mozilla.org/en-US/docs/DOM/window.postMessage). — Amadan, Dec 25 '12 at 08:35

score 1 · Accepted Answer · edited May 23 '17 at 12:02

I just recently helped another person with a very similar concern, passing messages between IFrames. (see Issues with Cross Document Messaging between IFrame & Parent).

Using a modified version of the code that I am borrowing from suamikim in that aforementioned topic, I have integrated a timer. This should serve as a good starting point for you. These parent and child html pages will work cross-domain just as described in the comments above by Amadan. I just tested and confirmed it, by placing parent.html on one domain, which pointed to child.html on a totally separate untrusted domain.

parent.html

<html>
<head>
    <script type="text/javascript">
        function parentInitialize() {
            var count = 0;
            window.addEventListener('message', function (e) {
                // Check message origin etc...
                if (e.data.type === 'iFrameRequest') {
                    var obj = {
                        type: 'parentResponse',
                        responseData: 'Response #' + count++
                    };
                    e.source.postMessage(obj, '*');
                }
                // ...
            })
  }
    </script>
</head>
<body style="background-color: rgb(72, 222, 218);" onload="javascript: parentInitialize();">
    <iframe src="child.html" style="width: 500px; height:350px;"></iframe>
</body>
</html>

child.html

<html>
<head>
    <script type="text/javascript">
        function childInitialize() {
            // ...

            try {
                if (window.self === window.top) {
                    // We're not inside an IFrame, don't do anything...
                    return;
                }
            } catch (e) {
                // Browsers can block access to window.top due to same origin policy.
                // See https://stackoverflow.com/a/326076
                // If this happens, we are inside an IFrame...
            }

            function messageHandler(e) {
                if (e.data && (e.data.type === 'parentResponse')) {
                    // Do some stuff with the sent data
                    var obj = document.getElementById("status");
                    obj.value = e.data.responseData;
                }
            }

            window.addEventListener('message', messageHandler, false);

            setInterval(function () {
                window.parent.postMessage({ type: 'iFrameRequest' }, '*');
            }, 1000);
            // ...
        }
    </script>
</head>
<body style="background-color: rgb(0, 148, 255);" onload="javascript: childInitialize();">
    <textarea type="text" style="width:400px; height:250px;" id="status" />
</body>
</html>

Good luck!

Iframe cross domain issue

1 Answers1

Linked