BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

CrossFrame - Safe, Cross Domain Widget Coordination for Mashups

| by Gavin Terrill on Nov 27, 2007. Estimated reading time: 2 minutes |

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.
continuing with
Furthermore, I do not recommend using hacks because they slow down the rate of innovation on the web
and concluding
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.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and dont miss out on content that matters to you

BT