Sandboxing an embed in HTML

An iframe runs someone else's page inside yours, so start by allowing nothing.

<iframe src="https://example.com/widget" title="Weather widget"
        width="320" height="180" loading="lazy"
        sandbox="allow-scripts allow-popups"
        referrerpolicy="no-referrer"
        allow="geolocation 'none'; camera 'none'"></iframe>

<iframe src="/preview.html" title="Live preview" width="480"
        height="320" sandbox></iframe>

How it works

An empty sandbox blocks scripts, forms, popups and same-origin access.
Add back only what the embed needs, one token at a time.
allow-scripts with allow-same-origin lets it remove its own sandbox.

The run, in numbers

Lines: 8
Characters to type: 314
Tokens: 51
Three-star pace: 80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 38 seconds.

Type this snippet

Step 2 of 3 in Scripts & embeds, step 11 of 13 in Interactive HTML.

← Previous Next →