Loading challenge...
Cross-Origin postMessage
Drive a sandboxed cross-origin iframe via postMessage — frameLocator cannot reach it
What you will learn
- Recognize that a sandboxed/cross-origin iframe cannot be driven via frameLocator and must use window.postMessage
- Implement and assert the ready → ping → pong handshake using stable parent-side DOM markers
- Validate inbound message shape and understand why event.origin is "null" for an opaque sandboxed frame
Cross-Origin postMessage — Handshake Across an Opaque Frame
A sandboxed iframe with an opaque (cross-origin) origin can only be reached via window.postMessage — frameLocator cannot pierce it
The frame below is rendered from a srcdoc with sandbox="allow-scripts" and deliberately no allow-same-origin. The browser therefore gives it an opaque origin (it reports "null"), so the parent cannot query its DOM — the only channel is postMessage.
The contract is a three-step handshake: ready → ping → pong. The frame announces wcq-ready on load; you send wcq-ping with a nonce; it replies with wcq-pong echoing the nonce plus a computed value.
The Handshake
Wait for ready, send a ping, observe the pong value
⏳ Waiting for the frame to post wcq-ready…
- Pong value:
- —
- Last event.origin:
- —
Note the reported origin is "null" — the opaque sandbox has no real origin, which is exactly why DOM piercing fails and shape validation matters.
Testing Tips
Automation hints
- ✓ A sandboxed / cross-origin iframe's DOM is unreachable —
frameLocator("#xo-frame")cannot find any inner selector; do not try to assert on elements inside the frame - ✓ Communicate via
window.postMessageand validateevent.datashape (type + nonce); a sandboxed frame reportsevent.origin === "null", so assert the contract, not a same-origin URL — see#frame-origin - ✓ The handshake is the contract: wait for
wcq-ready(gates#handshake-state[data-ready=true]), then click#send-ping, then read thewcq-pongresult - ✓ Assert on
#handshake-state[data-ready]and#frame-value(or itsdata-value) — never on inner-frame selectors - ✓ The
#send-pingbutton is disabled until the frame is ready, so wait for ready before driving the ping in your test
