Window.Postmessage and Cross-Origin Communication


December 20, 2016
0

The window.postMessage() enables safe and secure cross-origin communication. Normally, scripts on different pages are allowed to access each other if the pages are executed at the same location and use the same protocol. The window.postMessage() provides a secure mechanism to override this restriction to communicate between windows residing on different origins. Since this postMessage() method is a JavaScript API method, this is independent of the development environment (.NET, Java, PHP etc.) and can be used in any modern web browsers including IE8.

In order to enable communication between pages in cross origin, some JavaScript code needs to reside in each of the pages. To send a message to another window referenced by win, the postMessage() method is used.

Syntax for this is – postMessage(data, targetDomain, [transfer]), where:

data
Data to be sent to the other window. These can be a broad variety of data objects,which can be passed safely to the destination window without having to serialize them yourself.

targetDomain
Limit receiving iframe by given domain. Can contain ‘*’ which doesn’t put any    restrictions.

transfer (optional)
A sequence of transferable objects that are transferred with the message.The    ownership of these objects is given to the destination side and they are no longer usable    on the sending side.

Usually in a controlled environment, the domain of the iframe or the target will be known, so it is recommended to pass the domain name as targetDomain argument to enhance the security aspect of the website.

Here is the example of the code, which sends message to the target window using the window.postMessage() method.

<script>
$(‘document‘).ready(function () {
$(‘a’).on(‘click‘, function (e) {
var win = document.getElementById(“iframe“).contentWindow;
win.postMessage($(‘#FacilityId‘).val(), “http://targetdomain.com”);
});
});
</script>

The target window can listen for the dispatched messages, which are sent from the other window by executing the following JavaScript code.

window.onload = function () {
function receiveMessage(e) {
// Check to make sure that this message came from the correct domain.
if (e.origin !== “/*Domain URL of source domain*/”)
return;
// Update the div element to display the message.
messageEle.innerHTML = “Message from source is : ” + e.data;
}

window.addEventListener(‘message‘, receiveMessage);
}

The properties of the dispatched message are:

data
The object passed from the other window.

origin
The origin of the window that sent the message at the time postMessage was called.

source
A reference to the window object that sent the message; you can use this to establish       two-way communication between two windows with different origins.

Security
If you do not expect to receive any messages from other sites or source, do not add any event listeners for message events. If you do expect to receive messages from other sites, always verify the sender’s identity using the origin and possibly source properties. Any window can send a message to any other window, and there is no guarantee that an unknown sender will not send malicious messages. Having verified identity, however, you still should always verify the syntax of the received message.

Courtesy: Ajish Rehuman, PreludeSys

Leave a Reply

Your email address will not be published. Required fields are marked *