CrossFrame - Safe, Cross Domain Widget Coordination for Mashups

Julien Lecomte, a member of Yahoo!'s DHTML Evangelist Team, has announced the release of "CrossFrame, a Safe Communication Mechanism Across Documents and Across Domains". The "hack", as Julien puts it, allows intra page communication between IFrames from different domains hosted in a web page. Traditionally, this has been difficult due to the browser's "Same Origin Policy" which prevents communication with resources from separate domains as a security precaution. CrossFrame builds on the URL fragment identifier approach, addressing two significant issues:

• Unnecessarily consuming CPU cycles by requiring the receiver to poll.
• Creating "fake" history entries on Safari and Opera.

CrossFrame works by ensuring that cross domain sites have shared knowledge of variables used in the hosting page. The process works in two steps:

In order to communicate with the mashup hosted in domain Y, the page, hosted in domain X, dynamically creates a hidden IFrame and points it to a special proxy file hosted in domain Y, using the URL fragment identifier to convey the message (step 1) When the special proxy file is loaded in the hidden IFrame, it reads its URL fragment identifier and passes it to a globally accessible function defined in the IFrame hosting the mashup (step 2) using parent.frames['mashup'] to get to it.

Using CrossFrame is simply a matter installing the proxy file, importing the required javascript libraries and using javascript to send and receive:

To receive messages, subscribe to the onMessage event:

YAHOO.util.CrossFrame.onMessageEvent.subscribe(
    function (type, args, obj) {
        var message = args[0];
        var domain = args[1];
        // Do something with the incoming message...
    }
);

To send a message, call YAHOO.util.CrossFrame.send():

YAHOO.util.CrossFrame.send("http://www.y.com/proxy.html",
                           "frames['mashup']",
                           "message");

To get a feel of how this works in a browser, a demonstration has been set up here.  

Facebook have also used the idea of using IFrames for communication in their Beacon tool. In his blog post "Deconstructing Facebook Beacon Javascript", Jay Goldman characterizes its use as:

a neat side-step of the Cross-site Scripting security features in modern browsers

Indeed, at the end of his article, Julien warns of the dangers of using CrossFrame:

There is a danger associated with this kind of “hack”. First of all, browser vendors may decide to change their security policies and mimic Opera’s behavior for example.

Furthermore, I do not recommend using hacks because they slow down the rate of innovation on the web

Therefore, as paradoxical as it may seem, I do not recommend using CrossFrame (or any of those ugly hacks for that matter)

Unfortunately, developers today have very few options when it comes to a sanctioned intra-widget communication technique. While proposals have been made to address this issue, it will be some time before browsers have implemented a standardized approach to solving this problem. In the mean time, the CrossFrame hack is a viable alternative for developers that absolutely need something that works in today's browsers.