Is it secure to use window.origin with postMessage?

Question

When using postMessage it's important to define a targetOrigin to ensure we don't leak data to other sites.

It's equally important to check the origin when receiving a message to prevent other sites from triggering our scripts.

But, if we're just expecting to do this on our own domain, is there anything wrong with:

targetWindow.postMessage({message}, window.origin);

--

window.addEventListener("message", e => {
  if (e.origin == window.origin){
    //Trigger something
  }
});

Answer 1

targetWindow.postMessage({message}, window.origin);

So line transmits the windows origin (e.a. The page domain loaded) As the origin data for the post message. This is fine.

window.addEventListener("message", e => { if (e.origin == window.origin){ //Trigger something } });

This would check that the message received is from the same origin as this window. This is slightly more problematic, if someone hosted this code on same other domain it would still work. (If that’s not a concern than it’s fine). A more secure strategy would be to replace the window.origin with a const ORIGIN = “<domain>; and if( e.origin === ORIGIN). This would make it impossible to redefine the origin mod processing of the javascript (or at least after the const) and would make the check do a type check and value check. (Instead of a typebended value check)

Source