Why is this an issue?
Browsers allow message exchanges between Window objects of
different origins.
Because any window can send or receive messages from another window, it is important to verify the sender’s/receiver’s identity:
- When sending a message with the postMessage method, the identity’s receiver should be defined (the wildcard keyword (
*) should not
be used).
- When receiving a message with a message event, the sender’s identity should be verified using the origin and possibly source properties.
Noncompliant code example
When sending a message:
var iframe = document.getElementById("testiframe");
iframe.contentWindow.postMessage("secret", "*"); // Noncompliant: * is used
When receiving a message:
window.addEventListener("message", function(event) { // Noncompliant: no checks are done on the origin property.
console.log(event.data);
});
Compliant solution
When sending a message:
var iframe = document.getElementById("testsecureiframe");
iframe.contentWindow.postMessage("hello", "https://secure.example.com"); // Compliant
When receiving a message:
window.addEventListener("message", function(event) {
if (event.origin !== "http://example.org") // Compliant
return;
console.log(event.data)
});
Resources
