Cross-document messaging
Encyclopedia
Cross-document messaging, or web messaging, is an API introduced in the WHATWG HTML5 draft specification, allowing documents to communicate with one another across different origins, or source domains. Prior to HTML5, web browsers disallowed cross-site scripting
Cross-site scripting
Cross-site scripting is a type of computer security vulnerability typically found in Web applications that enables attackers to inject client-side script into Web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same...

, to protect against security attacks. This practice barred communication between non-hostile pages as well, making document interaction of any kind difficult. Cross-Document messaging allows scripts to interact across these boundaries, while providing a rudimentary level of security.

Requirements and Attributes

Using the Messaging API's postMessage method, plain text messages can be sent from one domain to another. This requires that the author first obtain the Window object of the receiving document. As a result, messages can be posted to the following:
  • 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.
  • source - the WindowProxy of where the document came from (the source window).

Example

Consider we want document A to communicate with document B, which is contained within an iframe or popup window. The Javascript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....

 for document A will look as follows:

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello B', 'http://documentB.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. The Javascript for document B will look as follows:

window.addEventListener('message', receiver, false);
function receiver(event) {
if (event.origin

'http://documentA.com') {
if (event.data

'Hello B') {
event.source.postMessage('Hello A, how are you?', event.origin);
}
else {
alert (event.data);
}
}
}

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.

Security

Poor origin checking can pose a risk for applications which employ cross-document messaging. 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.

Support

Support for cross-document messaging exists in current versions of Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...

, Mozilla Firefox
Mozilla Firefox
Mozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. , Firefox is the second most widely used browser, with approximately 25% of worldwide usage share of web browsers...

, Safari
Safari
A safari is an overland journey, usually a trip by tourists to Africa. Traditionally, the term is used for a big-game hunt, but today the term often refers to a trip taken not for the purposes of hunting, but to observe and photograph animals and other wildlife.-Etymology:Entering the English...

, Google Chrome
Google Chrome
Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...

, Opera
Opera (web browser)
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...

, Opera Mini
Opera Mini
Opera Mini is a web browser designed primarily for mobile phones, smartphones and personal digital assistants. Until version 4 it used the Java ME platform, requiring the mobile device to run Java ME applications. From version 5 it is also available as a native application for Android, iOS, Symbian...

, Opera Mobile
Opera Mobile
Opera Mobile is a web browser for smartphones and PDA's developed by the Opera Software company. The first version was released in 2000 for the Psion Series 7 and netBook. Today, it is available for a variety of devices that run on Android, S60, Windows Mobile, Maemo , and MeeGo...

, and Android web browser. Support for the API exists in the Trident
Trident (layout engine)
Trident is the name of the layout engine for the Microsoft Windows version of Internet Explorer.It was first introduced with the release of Internet Explorer version 4.0 in October 1997; it has been steadily upgraded and remains in use today...

, Gecko
Gecko (layout engine)
Gecko is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation , as well as in many other open source software projects....

, WebKit
WebKit
WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook...

 and Presto
Presto (layout engine)
Presto is the layout engine for later versions of the Opera web browser . After several public betas and technical previews, it was released on January 28, 2003 in Opera 7 for Windows, and as of Opera 11 it is still in use. Presto is dynamic: the page or parts of it can be re-rendered in response...

layout engines.
The source of this article is wikipedia, the free encyclopedia.  The text of this article is licensed under the GFDL.
 
x
OK