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.
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.
Posted in 
Tags: 
