I recently worked a fair bit with some of the new features in HTML5. If you haven’t played with them yet please don’t get your hopes up. Although a standards sounds nice, the implementation by all the browsers is appalling. </html5-rant>
Anyway, during development I stumbled upon the ‘postMessage’ function. In short, ‘postMessage’ allows you to send messages between frames even if they are hosted on different domains. The function itself is incredibly easy and very useful. Every browser supports sending a ‘string’ to the other frame.
A message is send using <target-frame>.postMessage(
Apart form the possible vulnerabilities that could occur while using postMessage, post messages are a pain in the ass to debug. So I create a small Chrome plugin that will notify you – via an icon in your address bar (see fig. 1) – if HTML5 post messages are received on the current page. All received messages will be printed to the console (using console.log) when this happens.
Fig 1. Chrome address bar when a post message has been detected
The plugin is very basic – I created it in about an hour – but very useful when developing web applications or simply looking for juicy bits on a website.