Web Messaging

Requirements and attributes

Using the Messaging API's postMessage method, plain text messages can be sent from one domain to another, e.g. from a parent document to an IFRAME.^[3] This requires that the author first obtain the Window object of the receiving document. As a result, messages can be posted to the following:^[2]

other frames or iframes within the sender document's window
windows the sender document explicitly opens through JavaScript calls
the parent window of the sender document
the window which opened the sender document

The message event being received has the following attributes:

data - The data, or actual content, of the incoming message.
origin - The origin of the sender document. This typically includes the scheme, hostname and port. It does not include the path or fragment identifier.^[1]
source - the WindowProxy of where the document came from (the source window).

postMessage is not a blocking call; messages are processed asynchronously.^[4]

Example

Consider we want document A loaded from example.net to communicate with document B loaded from example.com into an iframe or popup window.^[1] The JavaScript for document A will look as follows:

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello B', 'http://example.com/');

The origin of our contentWindow object is passed to postMessage. It must match the origin of the document we wish to communicate with (in this case, document B). Otherwise, a security error will be thrown and the script will stop.^[3] The JavaScript for document B will look as follows:

function receiver(event) {
    if (event.origin == 'http://example.net') {
        if (event.data == 'Hello B') {
            event.source.postMessage('Hello A, how are you?', event.origin);
        }
        else {
            alert(event.data);
        }
    }
}
window.addEventListener('message', receiver, false);

An event listener is set up to receive messages from document A. Using the origin property, it then checks that the domain of the sender is the expected domain. Document B then looks at the message, either displaying it to the user, or responding in turn with a message of its own for document A.^[1]

Security

Poor origin checking can pose a risk for applications which employ cross-document messaging.^[5] To safeguard against malicious code from foreign domains, authors should check the origin attribute to ensure messages are accepted from domains they expect to receive messages from. The format of incoming data should also be checked that it matches the expected format.^[1]

Support

Support for cross-document messaging exists in current versions of Internet Explorer, Mozilla Firefox, Safari, Google Chrome, Opera, Opera Mini, Opera Mobile, and Android web browser.^[6] Support for the API exists in the Trident, Gecko, WebKit and Presto layout engines.^[7]

References

^ ^a ^b ^c ^d ^e ^f Cross-Document Messaging – HTML Draft Standard
^ ^a ^b WebKit DOM Programming Topics - Cross Document Messaging
^ ^a ^b Remy, Sharp, Messages, Workers, and Sockets, Introducing HTML5, New Riders, 2011, p. 197-199
^ http://www.w3.org/TR/2010/WD-webmessaging-20101118/#web-messaging
^ HTML5 Security in a Nutshell
^ When can I use Cross-Document Messaging?
^ A Selection of Supported Features in HTML5

External links

HTML5 Web Messaging recommendation
HTML5 Web Messaging specification
Cross-Document Messaging – HTML Draft Standard, WHATWG
WebKit DOM Programming Topics - Cross Document Messaging, Apple Developer Library
Eng, Chris (2010-05-17), HTML5 Security in a Nutshell, Veracode
When can I use Cross-Document Messaging?, CanIUse
A Selection of Supported Features in HTML5

[WHATWG-1] ^ ^a ^b ^c ^d ^e ^f Cross-Document Messaging – HTML Draft Standard

[WebKit-2] WebKit DOM Programming Topics - Cross Document Messaging

[INTRODUCING-3] Remy, Sharp, Messages, Workers, and Sockets, Introducing HTML5, New Riders, 2011, p. 197-199

[4] ttp://www.w3.org/TR/2010/WD-webmessaging-20101118/#web-messaging

[Security-5] HTML5 Security in a Nutshell

[canIuse-6] When can I use Cross-Document Messaging?

[SUPPORT-7] A Selection of Supported Features in HTML5

[1]

[2]

[3]

[4]

[5]

[6]

[7]