Browsers allow message exchanges between Window objects of different origins.

Because any window can send / receive messages from other window it is important to verify the sender's / receiver's identity:

- When sending message with postMessage method, the identity's receiver should be defined (the wildcard keyword (*) should not be used).

- When receiving message with message event, the sender's identity should be verified using the origin and possibly source properties.

Noncompliant Code Example

When sending message:

var iframe = document.getElementById("testiframe");
iframe.contentWindow.postMessage("secret", "*"); // Noncompliant: * is used

When receiving message:

window.addEventListener("message", function(event) { // Noncompliant: no checks are done on the origin property.
      console.log(event.data);
 });

Compliant Solution

When sending message:

var iframe = document.getElementById("testsecureiframe");
iframe.contentWindow.postMessage("hello", "https://secure.example.com"); // Compliant

When receiving message:

window.addEventListener("message", function(event) {

  if (event.origin !== "http://example.org") // Compliant
    return;

  console.log(event.data)
});

See