v152 · HTML · Frames
Cross-Origin Simulation
Walk through each step of the cross-origin resize flow — the old postMessage approach versus the new allow-responsive-sizing + Supports-Responsive-Sizing: 1 declarative approach. Run both side by side to see where the complexity lives.
Scenario: parent example.com embeds child widget.io. Content height changes from 200px to 480px.
Old: postMessage + ResizeObserver
6 steps
Press run to simulate the cross-origin resize flow.
steps: 6
simulated round-trip: —
JS files required: 2
New: allow-responsive-sizing
3 steps
Press run to simulate the cross-origin resize flow.
steps: 3
browser propagation: —
JS files required: 0
| Dimension | postMessage (old) | allow-responsive-sizing (new) |
|---|---|---|
| Parent script required | ✗ Yes — message listener + height setter | ✓ No script — just the HTML attribute |
| Child script required | ✗ Yes — ResizeObserver + postMessage | ✓ No script — HTTP response header only |
| Origin validation | ✗ Manual — easy to forget targetOrigin | ✓ Browser-enforced via double opt-in |
| Layout sync | ✗ Async — fires after layout, one frame late | ✓ In-frame — browser propagates before paint |
| Works if JS blocked | ✗ No | ✓ Yes |
| Works cross-origin | ✗ Only with cooperative server on both sides | ✓ Yes — header + attribute is the contract |
| Fallback on older browsers | N/A — this is the fallback | Attribute ignored, iframe stays fixed |
see also
- Accordion Embed — expanding/collapsing content with auto-resize
- postMessage Comparison — latency comparison with live items
- Opt-in Mechanism — attribute + header walkthrough
- ChromeStatus entry