Web Messaging: Difference between revisions
added Category:Application programming interfaces using HotCat |
Bad practice, wrong order for the code. |
||
Line 14: | Line 14: | ||
==Example== |
==Example== |
||
Consider we want document A to communicate with document B, which is contained within an <code>iframe</code> or popup window.<ref name="WHATWG"/> The [[Javascript]] for document A will look as follows: |
Consider we want document A to communicate with document B, which is contained within an <code>iframe</code> or popup window.<ref name="WHATWG"/> The [[Javascript]] for document A will look as follows: |
||
<source lang= |
<source lang=javascript> |
||
var o = document.getElementsByTagName('iframe')[0]; |
var o = document.getElementsByTagName('iframe')[0]; |
||
o.contentWindow.postMessage('Hello B', 'http://documentB.com/'); |
o.contentWindow.postMessage('Hello B', 'http://documentB.com/'); |
||
</source> |
</source> |
||
The origin of our <code>contentWindow</code> object is passed to <code>postMessage</code>. It must match the <code>origin</code> 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.<ref name="INTRODUCING"/> The Javascript for document B will look as follows: |
The origin of our <code>contentWindow</code> object is passed to <code>postMessage</code>. It must match the <code>origin</code> 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.<ref name="INTRODUCING"/> The Javascript for document B will look as follows: |
||
<source lang= |
<source lang=javascript> |
||
⚫ | |||
function receiver(event) { |
function receiver(event) { |
||
if (event.origin == 'http://documentA.com') { |
if (event.origin == 'http://documentA.com') { |
||
Line 27: | Line 26: | ||
} |
} |
||
else { |
else { |
||
alert |
alert(event.data); |
||
} |
} |
||
} |
} |
||
} |
} |
||
⚫ | |||
</source> |
</source> |
||
An event listener is set up to receive messages from document A. Using the <code>origin</code> 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.<ref name="WHATWG"/> |
An event listener is set up to receive messages from document A. Using the <code>origin</code> 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.<ref name="WHATWG"/> |
Revision as of 01:43, 29 February 2012
HTML |
---|
Comparisons |
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.[1] Prior to HTML5, web browsers disallowed cross-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.
Requirements and Attributes
Using the Messaging API's postMessage
method, plain text messages can be sent from one domain to another.[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
- theWindowProxy
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.[1] The Javascript 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.[3] The Javascript for document B will look as follows:
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);
}
}
}
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.[4] 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.[5] Support for the API exists in the Trident, Gecko, WebKit and Presto layout engines.[6]
See Also
External Links
- 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
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
- ^ HTML5 Security in a Nutshell
- ^ When can I use Cross-Document Messaging?
- ^ A Selection of Supported Features in HTML5