Cross-document message delivery in HTML5

Cross-document messaging (cross-document messaging), sometimes referred to as XDM, refers to the passing of messages between pages from different domains. For example, a page in the www.w3cmm.com domain communicates with a page in a p2p.w3cmm.com domain that is in an inline frame. It takes a lot of effort to make this communication more secure before the XDM mechanism emerges. XDm to standardize this mechanism, so that we can safely have a simple way to achieve cross-document communication.

The core of XDm is the PostMessage () method. In the HTML5 specification, this method name is mentioned in addition to the XDm section, but it is for the same purpose: passing data to another place. For XDm, "Another Place" refers to the <iframe> element that is contained in the current page, or a window that pops up from the current page.

The PostMessage () method receives two parameters: a message and a string representing which domain the message receiver came from. The second parameter is important to secure communication, which prevents the browser from sending messages to unsafe locations. Take a look at the following example.

var= document.  getElementById("MyFrame").  Contentwindow;  Iframwindow.  PostMessage("A secret","http://www.w3cmm.com");        

The last line of code attempts to send a message to the inline frame and specifies that the document in the frame must originate from the "Http://www.w3cmm.com" field. If the source matches, the message is passed into the inline frame; otherwise, postMessage () does nothing. This limitation prevents the position in the window from changing without your knowledge. If the second parameter passed to PostMessage () is "*", it means that the message can be sent to a document from any domain, but we do not recommend it.

When a XDM message is received, it triggers the message event of the Window object. This event is triggered asynchronously, so it may take a period of delay from sending a message to receiving a message (the message event that triggers the Accept window). After the message event is triggered, the event object passed to the OnMessage handler contains important information about the following three aspects.

Data: The string literal passed in as the first parameter of the PostMessage ().
Origin: The domain of the document where the message was sent, such as "http://www.w3cmm.com".
Source: The Proxy for the Window object that sends the message to the document. This proxy object is primarily used to call the PostMessage () method in a window that sends a previous message. If the window that sends the message is from the same domain, the object is window.

It is important to verify the source of the sending window after receiving the message. Just like specifying the second argument to the PostMessage () method to ensure that the browser does not send the message to an unknown page, detecting a message source in the OnMessage handler ensures that the incoming message comes from a known page. The basic detection mode is as follows.

Var Eventutil = {AddHandler: function (Element,Type,Handler) {If (Element.AddEventListener) {Element.AddEventListener(Type,Handler, False);} Else If (Element.Attachevent) {Element.Attachevent("On" +Type,Handler);} Else {Element["On" +Type] =Handler; }}};Eventutil.AddHandler(Window, "Message", function (Event) {Ensure that the domain where the message is sent is a known domainIf (Event.Origin== "Http://www.w3cmm.com") {        / /processing received data         processmessage ( event. Data        //Optional: Send receipts to the source window          event.. Postmessage ( "received!" , ); }       

It's also a reminder that Event.source is mostly a proxy for Window objects, not an actual window object. In other words, any other information about the window object cannot be accessed through this proxy object. Remember, just calling PostMessage () through this proxy is good, this method never exists and can always be called.

XDm also has some weird places. First, the first parameter of PostMessage () is implemented as "always string". But later the definition of this parameter was changed to allow any data structure to be passed in. However, not all browsers have implemented this change. For insurance purposes, it is best to pass a string only if you are using PostMessage (). If you want to pass in structured data, the best option is to call Json.stringify () on the data you want to pass in, pass in the resulting string through PostMessage (), and then call Json.parse () in the OnMessage event handler.

The use of XDM is very important when loading the contents of other domains through an inline framework. As a result, this method of delivering messages is very common in mashup and social networking applications. With XDM, pages that contain <iframe> can ensure that they are not vulnerable to malicious content, because it communicates with the embedded framework only through XDM. XDm can also be used between pages from the same domain.

Related Posts:

1. Drag and drop in the HTML5

Cross-document message delivery in HTML5