security/postmessage-origin

Why

With "*", a token or personal data goes to whatever page is in the target window, including one an attacker navigated there. A listener that does not check event.origin accepts commands from any site that can open or frame yours.

Fix

Send with the exact origin ('https://widget.example.com'). In every message listener on window, return early unless event.origin is in an allowlist (and event.source is the expected frame), then validate event.data before using it. Never pass message data to an HTML sink or eval.

Examples

// bad
frame.contentWindow.postMessage({ token }, '*')
window.addEventListener('message', (e) => apply(e.data))
// good
frame.contentWindow.postMessage({ token }, 'https://widget.example.com')
window.addEventListener('message', (e) => { if (e.origin === 'https://widget.example.com') apply(e.data) })

Sources

• MDN, Window postMessage() (security concerns)
• HTML Standard, Cross-document messaging (security)

Read it in the terminal

npx github:dawidolko/frontend-skills explain security/postmessage-origin