HTML5 Web Messaging

[Former Member]

My Iframe Dilemma

Last year, I had a very interesting issue in one of my projects: An external application should be embedded in a Content-Management-System via iframe. Sounds like nothing special, right? Well actually yes, but both applications should communicate, although they were hosted in different domains. Now everybody knows, that Web Browser, for security and privacy reasons, prevent documents in different domains from affecting each other. Because there was no time in this project to migrate one application to the other domain and the CMS had no Portal-Event-Mechanism, I needed an other quick and reliable solution.

Cross-Document Messaging

Cross-document messaging is a HTML5-API for sending messages between two documents safely. These documents don't have to run within the same domain, which is the actual big advantage of this technique. Besides, the API is very easy to use: With postMessage() you can send messages to other window-objects, where you can receive them via message-event. Look at the following listing:

1. Base-Website

// get iframe

var iframe = document.getElementById('externalApp');

// get window object

var iframeWindow = iframe.contentWindow || iframe.contentDocument;

// send a message to window

iframeWindow.postMessage('Hello iframe', 'http://popup.de');

2. Embedded Iframe

// EventHandler for message processing

function receiveMessage(event){

     // check origin of message, because you

     // process ALL message of any origin

     if(event.origin == 'http://mysite.de'){

          // log message in browser console

          console.log(event.data);

     }

}

// Register EventHandler

// For security reasons: Don't code this, if you don't expect messages from other sides

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

As you can see, it's very simple to change messages between two documents.

My Guidance

Although HTML5 Web messaging provides a very smart API, you should use it only in exceptional situations. It's always better to keep your applications in one single domain to prevent same origin policy issue. Avoiding SOP allows you to communicate directly between multiple windows or iframes in the first place. But there is even more room for improvement! I think the best way for arranging multiple web-apps or widgets is using a portal, which normally provides a clean and powerful event-mechanism.

Before you start doing great things with Web Messaging, please check out this comprehensive documentation of Mozilla Developer Network to get all important details for development.

Thanks for reading!