Pankaj Mouriya

postMessage#

postMessage safely enables cross origin communication between objects, e.g., between a page, pop up, between a page and an iframe.

Requirement: You need to have some kind of reference to the other origin with whom you want to talk to. It can be an embedded iframe

postMessage API Implementation and limitations, figure 1

Sender

targetWindow.postMessage("hello other document!", "*");

Receiver

window.addEventListener("message",function(message){console.log(message.data)});

Limitation#

Let's assume, store.sitea.com wants to retrieve a username, so it listens for messages from login.sitea.com

window.addEventListener(‘message’ event => {
setCurrentUser(event.data.name)
})

Store.sitea.com embeds an iframe to login.sitea.com which runs below code

const data = { username: ‘PankajMouriya’ }
window.parent.postMessage(data, ‘*’)

postMessage API Implementation and limitations, figure 2

Imagine what if attacker embeds login.sitea.com

postMessage API Implementation and limitations, figure 3

Remediation#

You can specify the destination origin for which the message is intended to

Validate Destination of message -

const data = { username: ‘PankajMouriya’ }
window.parent.postMessage(data, ‘http://store.sitea.com’)

But again, because store.sitea.com listens for messages from any source as it does not explicitly mentions which source, an attacker can embed store.sitea.com and send bogus messages to it

postMessage API Implementation and limitations, figure 4

Remediation#

Validate source of message -

window.addEventListener(‘message’ event => {
if(event.origin !== ‘http://login.sitea.com’) return
setCurrentUser(event.data.name)
})