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.postMessage and validate event.data shape (type + nonce); a sandboxed frame reports event.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 the wcq-pong result
✓ Assert on #handshake-state[data-ready] and #frame-value (or its data-value) — never on inner-frame selectors
✓ The #send-ping button is disabled until the frame is ready, so wait for ready before driving the ping in your test

Related Challenges

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

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.postMessage and validate event.data shape (type + nonce); a sandboxed frame reports event.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 the wcq-pong result
✓ Assert on #handshake-state[data-ready] and #frame-value (or its data-value) — never on inner-frame selectors
✓ The #send-ping button is disabled until the frame is ready, so wait for ready before driving the ping in your test

Cross-Origin postMessage

What you will learn

Cross-Origin postMessage — Handshake Across an Opaque Frame

The Handshake

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop

Cross-Origin postMessage

What you will learn

Cross-Origin postMessage — Handshake Across an Opaque Frame

The Handshake

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop