postMessage target origin - window.parent.origin vs "*"

Question

Is window.parent.postMessage(message, window.parent.origin) more secure than window.parent.postMessage(message, '*')?

We have an iframe component that is loaded by a parent frame. That frame can be from anywhere (our web application is a shared component and can be accessed from any client installation of our main product). So we can't know in advance who loaded us unless we keep some kind of database with allowed origins which we don't.

We are sending a postMessage() to our parent frame, and we can't know the target origin in advance, so I put '*'. I colleague of mine suggested I use window.parent.origin instead, but as far as I understand this has the same effect - postMessage will check that the target origin is the same as itself! Not to mention that it fails when cross-domain.

So am I missing something here? Does using window.parent.origin confer any greater security than a wildcard?

Answer 1

The wildcard "*" could be dangerous if parent page gets redirected to a malicious site that could receive your message with sensitive data.

In this particular case, the parent.origin wouldn't give any security benefits. Ideally, the component's server should be used to detect and the validate the origin of the parent window.

Answer 2

Is window.parent.postMessage(message, window.parent.origin) more secure than window.parent.postMessage(message, '*')?

It depends on what the danger is for you. And what do you consider safe use of your app.

Imagine that your iframe is hosted on domain A, and it is called from domain B. If in this case, sending messages from your iframe to the parent is considered dangerous, then yes - window.parent.postMessage(message, window.parent.origin) more secure than window.parent.postMessage(message, '*').

Using window.parent.origin as targetOrigin will not provide any data to the parent that hosted on a domain other than the iframe domain.