Securing Javascript same-origin postMessage call and message listener, is this enough?

Question

This is my first foray into using postMessage. Want to make sure the communication between the child iframe and the parent is secure.

Per this page: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

"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 (including, for example, http://evil.example.com) can send a message to any other window, and you have no guarantees that an unknown sender will not send malicious messages. Having verified identity, however, you still should always verify the syntax of the received message. Otherwise, a security hole in the site you trusted to send only trusted messages could then open a cross-site scripting hole in your site."

Here is what the parent's message listening function looks like:

uri = 'https://www.somedomain.com/';
window.addEventListener("message", function(event) {
    if (event.origin !== uri.base.slice(0, -1)) return;
    if (event.source.location.origin !== uri.base.slice(0, -1)) return;
    if (event.source.location.origin !== window.location.origin) return;

    console.log(event.data);
});

The child iframe's postMessage call:

uri = 'https://www.somedomain.com/';
eventData = {'type':'sometype','action':'someaction','id':'q12wucxdfgbvgfcvt'};
parent.postMessage(eventData, uri.slice(0, -1));

Are the checks in the listening function enough? Or too many?

Thanks

hackape hackape · Accepted Answer · 2021-09-22T17:00:54

Too much. If checked synchronously, event.source.location.origin == event.origin will always be true. This means the first 2 conditions are dupe. With the third condition, it effectively says “I only deal with same origin message, and that origin must be 'https://www.somedomain.com'”.

Thus it can be reduced to: event.origin == window.location.origin && event.origin == "https://www.somedomain.com"

Now I’m a bit confused about your true intention. 🤔

If you know beforehand that your page is indeed hosted at "https://www.somedomain.com" then you don’t have to check it at all, you just need to check event.origin == window.location.origin.

If you know beforehand the origin is not, then the check will never pass.

The only scenario where checking "https://www.somedomain.com" verbatim makes any sense, is when you deploy the same script to two different origins, and you want the condition to be true on one side but false on the other. But I doubt this is what you really want.

Securing Javascript same-origin postMessage call and message listener, is this enough?

1 Answers