HTML

Iframe with Sandbox + lazy loading

admin by @admin ADMIN
2d ago
May 31, 2026
Public
0 0 up · 0 down Sign in to vote
Embed third-party content (YouTube, Stripe, maps) safely. `sandbox` restricts what the embedded page can do. `loading="lazy"` defers offscreen iframes — huge perf win for blog posts with multiple embeds.
HTML
Raw
<!-- YouTube embed — sandbox keeps it from breaking out -->
<iframe
    src="https://www.youtube-nocookie.com/embed/abc123"
    title="How we cut page load time in half"
    width="800" height="450"
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    referrerpolicy="strict-origin-when-cross-origin">
</iframe>

<!-- More restrictive sandbox (for embedding untrusted user-uploaded HTML) -->
<iframe
    src="/preview/user-123.html"
    title="User preview"
    sandbox="allow-same-origin allow-scripts"
    loading="lazy">
</iframe>

<!-- sandbox tokens (each one re-enables a specific capability):
     allow-scripts       — JS execution
     allow-forms         — submitting forms
     allow-same-origin   — keep the iframe in its own origin (avoids null-origin)
     allow-popups        — window.open
     allow-top-navigation — navigate the parent (DANGEROUS — usually omit)
     Omit sandbox entirely for trusted same-origin iframes. -->
Tags

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.