CodePen Embed iframe ↔ Host Website postMessage, sandbox and CSP interoperability

Short answer

Yes – the current Embedded Pen v2 accepts a cp-theme postMessage to switch between light and dark themes at runtime. The iframe only needs the allow-scripts sandbox token for the auto‑height handshake to work when the host page sets a COOP header. There is no documented “destroy” message; the recommended clean‑up step is to remove the iframe from the DOM, which causes CodePen’s live‑preview WebSocket to close.

Why it works

• Theme switching – CodePen’s embed JS listens for a type: "cp-theme" message and applies the theme immediately. The payload must be {theme: "light"} or {theme: "dark"}.
• Auto‑height resize – The embed posts {type: "cp-height", height: } whenever its content size changes. To receive this, the iframe must allow script execution (allow-scripts); allow-same-origin is not required for the handshake.
• COOP interaction – With a COOP header (e.g., same-origin or same-origin-allow-popups), the iframe becomes a separate browsing context. PostMessage still works as long as the sandbox permits script execution. If the host uses same-origin and the iframe is not sandboxed, the browser may block the message; adding allow-scripts resolves this.
• Teardown – CodePen does not expose a “destroy” or “unload” postMessage. Removing the <iframe> from the DOM triggers the browser to close the underlying WebSocket connection used for the live preview.

Practical verification steps

1. Create a test page with a strict CSP (e.g., frame-ancestors 'none'; script-src 'self') and a COOP header (e.g., same-origin).

2. Embed the CodePen v2 iframe:

   <iframe src="https://codepen.io/pen/embedded/pen-xyz?height=400&theme-id=dark" sandbox="allow-scripts"></iframe>

3. Send a theme switch message from the host:

   const iframe = document.querySelector('iframe');
   iframe.contentWindow.postMessage({type: 'cp-theme', theme: 'light'}, '*');

   Observe the Pen’s theme changing immediately.

4. Trigger a height change inside the Pen (e.g., toggle a class that expands content). Listen for the resize message:

   window.addEventListener('message', e => {
     if (e.data.type === 'cp-height') {
       console.log('New height:', e.data.height);
     }
   });

5. When the embed is no longer needed, remove the iframe:

   iframe.remove();

   Open DevTools → Network → filter by “ws” to confirm the WebSocket closes.

Missing diagnostic detail

If your host uses COOP: same-origin and you still do not receive cp-height messages, double‑check that the iframe’s sandbox attribute includes allow-scripts and that no other CSP directives (e.g., frame-src) are blocking the iframe.