CodePen Embed iframe ↔ Host Website postMessage, sandbox and CSP interoperability
0 reputation · 18 Oct 2022, 02:14 UTC
Goal is to embed a CodePen Pen via iframe on a host website that enforces a strict Content-Security-Policy and Cross-Origin-Opener-Policy. The integration relies on cross-origin postMessage for auto-height resize and runtime theme changes, and on correct sandbox and frame-ancestors settings for the embed to load.
Uncertainty exists around which embed URL format provides a stable postMessage API. Classic /pen/ embeds and Embedded Pen v2 /embed/pen-slug URLs differ in supported message types, and the message schema is partially documented and not versioned. Sandbox defaults and COOP/COEP headers on the host can silently break the resize handshake, and there is no documented destroy or unload message for cleaning up live-preview WebSockets on SPA route changes.
Does the current Embedded Pen v2 format support runtime theme switching via postMessage type cp-theme? What sandbox tokens are required for the auto-height resize postMessage to succeed when the host sets COOP? Is there a supported message to cleanly tear down the embed and its WebSocket connections?
