| HTML |
|---|
 |
| HTML and variants |
| HTML elements and attributes |
| Editing |
| Character encodings and language |
| Document and browser models |
| Client-side scripting and APIs |
| Graphics and Web3D technology |
| Comparisons |
Web Messaging, orcross-document messaging, is anAPI introduced in theWHATWGHTML5 draft specification, allowing documents to communicate with one another across different origins, or source domains[1] while rendered in aweb browser. Prior to HTML5, web browsers disallowedcross-site scripting, to protect against security attacks. This practice barred communication between non-hostile pages as well, making document interaction of any kind difficult.[1][2] Cross-document messaging allows scripts to interact across these boundaries, while providing a rudimentary level of security.
Using the Messaging API'spostMessage method, plain text messages can be sent from one domain to another, e.g. from a parent document to anIFRAME.[3] This requires that the author first obtain theWindow object of the receiving document. As a result, messages can be posted to the following:[2]
The messageevent 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 – theWindowProxy of where the document came from (the source window).postMessage is not a blocking call; messages are processed asynchronously.[4]
Consider we want document A loaded fromexample.net to communicate with document B loaded fromexample.com into aniframe or popup window.[1] TheJavaScript for document A will look as follows:
varo=document.getElementsByTagName('iframe')[0];o.contentWindow.postMessage('Hello B','http://example.com/');
The origin of ourcontentWindow object is passed topostMessage. It must match theorigin 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:
functionreceiver(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);
Anevent listener is set up to receive messages from document A. Using theorigin 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]
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 theorigin 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 for cross-document messaging exists in current versions ofInternet Explorer,Mozilla Firefox,Safari,Google Chrome,Opera,Opera Mini,Opera Mobile, andAndroid web browser.[6] Support for the API exists in theTrident,Gecko,WebKit andPresto layout engines.[7]