Isolating a playground without breaking it

A learner should be able to type arbitrary JavaScript and see the result immediately. That sentence is also a warning label. The browser security model gives us the tools to do this safely, if we use them precisely.

The dangerous combination

An iframe with both allow-scripts and allow-same-origin can remove its own sandbox and reach the parent page. For untrusted same-origin previews, that combination is a vulnerability, not a feature.

<iframe
  sandbox="allow-scripts"
  srcdoc="<!doctype html>…">
</iframe>

The rest of the boundary

1. 01
   Separate origin

   The production preview is served from an isolated origin, not a path on the main site.

2. 02
   Strict CSP

   Only the resources a preview needs. No access to application APIs or session cookies.

3. 03
   Validated messages

   Console output is sent with postMessage and checked against the exact iframe window.

4. 04
   Quotas and limits

   Rate limits and a kill switch so a runaway loop cannot become a platform incident.

The frontend you are looking at uses a sandboxed iframe with allow-scripts only. It is a demonstration of the boundary, not the complete production runtime. The difference matters, and we label it.