HTML5 Web Messaging

Web Messaging (or cross-document messaging) it’s the API introduced to the HTML5 specification, allowing documents from various sources / domains to communicate in a secure manner. This is the basic level of security that allows to operate over the cross-site scripting protection level.

HTML5 Web Messaging

The basic method is postMessage, allowing to establish communication. Importantly, we have to access the Window object of the target document.

A simple example:

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello!', 'http://the-site.com/');

But let’s look at specific, ready examples.

One of the best I have found on teamtreehouse:

http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

working example can be started directly at codepen.io.

The whole works very well, and the example can be a base for our further solutions.

dreadhead parkour

Resources

– interesting demo of capabilities on codeproject:

http://www.codeproject.com/Articles/248264/HTML-WebMessaging-Experiment

– a small buy useful tutorial:

http://klanguedoc.hubpages.com/hub/HTML5-Cross-Document-Messaging-Tutorial

– Dev Opera:

https://dev.opera.com/articles/window-postmessage-messagechannel/

Summary

HTML5 Web Messaging is a very interesting feature worth remembering. It can be a quick way to get out of the problematic situation. And if we can — let’s use it.