Question

We have some code that is making use of the new postMessage functionality in HTML 5 to work around cross-domain communication issues. I’m trying to find a way to detect whether I’m posting messages to an iFrame that loaded its contents correctly. If the frame fails to load correctly, postMessage doesn’t know this and will happily post messages into an unresponsive frame (I assume since the messages are being delivered to the frame, regardless of whether or not it’s contents loaded).

This is our workflow:

1. User loads http://www.a.com/specialpage.aspx
2. a.com/specialpage.aspx in turn loads a child iFrame with it’s source set to a proxy page from another domain, say http://www.b.com/lookatmyproxy.htm as an example.
3. User does some action, clicks a button
4. window.postMessage is used to post a message to the child frame, where it is (hopefully) picked up by the proxy that the frame loaded (b.com/lookatmyproxy.htm). After it is received, the message is validated, processed, and the reply is posted back to the parent frame (a.com/specialpage.aspx).
5. User is shown the results of their action, everyone is happy.

The problem scenario is that if b.com is down and the proxy fails to load inside the iFrame, postMessage will just fire and forget and the parent frame never receives an error or reply of any kind. The security concerns and nature of iframes seem to prevent me from checking the frame contents or status to find out if the proxy loaded correctly. I could put a relay with some timeout logic that we are in control of in between a.com and b.com (a.com posts to a.com/relay, which in turn posts to b.com/proxy, etc.), but that seems overcomplicated.

Is there a way for me to either check the iFrame and tell that it’s contents loaded correctly, or detect that postMessage is delivering to a frame whose source failed to load?

Answer 1

It’s not the cleanest answer but I was able to fix my problem. What I found was some old documentation that, while security does not let you read info from other frames, you can call some functions. In older browsers this was used to trick frames into setting each other url fragments and causing actions to happen. A good reference is here:

http://softwareas.com/cross-domain-communication-with-iframes

Since postMessage is allowed, the first thing my proxy does is post a “loaded” message to its parent frame if it exists. The proxy looks something like this:

//tell the parent that we're functional
var data = '{ "action" : "Loaded" }';
if (parent && parent.frames && parent.frames[0] && parent.frames[0].content) {
    parent.frames[0].content.postMessage(data, '*');
}

window.addEventListener("message", function (e) {
    if (e.domain == undefined) {
        //do something
    }
}, false);

On the other side of things, my pages listen for that message and set a variable when they receive it to show that the proxy loaded correctly. If they never receive the message, all actions assume the proxy is unavailable and the UI reacts accordingly to block user actions. That looks something like this:

$(document).ready(function () {
    window.addEventListener("message", function (e) {
        var args = (e.data && (e.data.length > 0)) ? JSON.parse(e.data) : {};
        if (args.action) {
            if (args.action == 'Loaded') {
                if (typeof ProxyLoaded_success == 'function') {
                    ProxyLoaded_success(args);
                }
            } 
        }
    }, false);
});

var proxyLoaded = false;
function ProxyLoaded_success(args) {
    proxyLoaded = true;
}

function abc() {
    if(proxyLoaded == true) {
        //do something here
    } else {
        alert("proxy didn't load. call support");
    }
}