Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Attacker tricks users into clicking invisible iframe elements
Malicious scripts injected through embedded content
Sensitive information exposed to embedded content
Iframe accessing parent page cookies and storage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sandbox Attribute Demo</title>
</head>
<body>
<div class="container">
<h1>🔒 Iframe Sandbox Demo</h1>
<div class="grid">
<!-- Unsafe Iframe -->
<div class="demo-box">
<div class="demo-header unsafe">
<h3 style="margin: 0;">⚠️ Without Sandbox</h3>
<p style="margin: 8px 0 0 0; opacity: 0.9; font-size: 14px;">Dangerous - Scripts can run freely</p>
</div>
<div class="demo-body">
<iframe
srcdoc="<h2>Unsafe Iframe</h2><p>This can run scripts and popups!</p><button onclick='alert("Popup!")'>Click Me</button>"
title="Unsafe iframe">
</iframe>
<div class="warning">
<strong>⚠️ Security Risk:</strong> Scripts, forms, and popups are allowed!
</div>
</div>
</div>
<!-- Safe Iframe -->
<div class="demo-box">
<div class="demo-header safe">
<h3 style="margin: 0;">✅ With Sandbox</h3>
<p style="margin: 8px 0 0 0; opacity: 0.9; font-size: 14px;">Protected - Restricted capabilities</p>
</div>
<div class="demo-body">
<iframe
srcdoc="<h2>Safe Iframe</h2><p>Sandboxed content - scripts blocked!</p><button onclick='alert("This won't work!")'>Click Me</button>"
sandbox
title="Sandboxed iframe">
</iframe>
<div class="success">
<strong>✓ Protected:</strong> Empty <code>sandbox</code> attribute blocks all dangerous features.
</div>
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
sandbox blocks everything<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sandbox Options</title>
</head>
<body>
<div class="container">
<h1>🛡️ Sandbox Attribute Options</h1>
<div class="options-grid">
<div class="option-card">
<h3>🚫 Default (Empty)</h3>
<code>sandbox</code>
<p>Blocks everything - maximum security</p>
<div style="margin-top: 12px;">
<span class="badge badge-danger">No Scripts</span>
<span class="badge badge-danger">No Forms</span>
<span class="badge badge-danger">No Popups</span>
</div>
</div>
<div class="option-card safe">
<h3>✅ Allow Scripts</h3>
<code>sandbox="allow-scripts"</code>
<p>Enables JavaScript execution</p>
<div style="margin-top: 12px;">
<span class="badge badge-success">Scripts OK</span>
<span class="badge badge-danger">Forms Blocked</span>
</div>
</div>
<div class="option-card safe">
<h3>📝 Allow Forms</h3>
<code>sandbox="allow-forms"</code>
<p>Enables form submission</p>
<div style="margin-top: 12px;">
<span class="badge badge-success">Forms OK</span>
<span class="badge badge-danger">Scripts Blocked</span>
</div>
</div>
<div class="option-card safe">
<h3>🔗 Allow Same Origin</h3>
<code>sandbox="allow-same-origin"</code>
<p>Treats content as same origin</p>
<div style="margin-top: 12px;">
<span class="badge badge-success">Same Origin</span>
</div>
</div>
<div class="option-card safe">
<h3>🪟 Allow Popups</h3>
<code>sandbox="allow-popups"</code>
<p>Enables opening new windows</p>
<div style="margin-top: 12px;">
<span class="badge badge-success">Popups OK</span>
</div>
</div>
<div class="option-card safe">
<h3>🎯 Allow Top Navigation</h3>
<code>sandbox="allow-top-navigation"</code>
<p>Can change parent page URL</p>
<div style="margin-top: 12px;">
<span class="badge badge-success">Navigation OK</span>
</div>
</div>
</div>
<div class="demo-section">
<h2>🔄 Combined Options Example</h2>
<p style="margin-bottom: 20px; color: #6b7280;">
You can combine multiple sandbox values for fine-grained control:
</p>
<iframe
srcdoc="<h2>Controlled Sandbox</h2><p>Scripts and forms are allowed!</p><form><input type='text' placeholder='Type here' style='padding:8px;margin:10px;border-radius:6px;border:none'/><button type='submit' style='padding:8px 16px;background:white;color:#667eea;border:none;border-radius:6px;font-weight:bold;cursor:pointer'>Submit</button></form>"
sandbox="allow-scripts allow-forms"
title="Combined sandbox example">
</iframe>
<p style="margin-top: 16px; padding: 16px; background: #f0fdf4; border-radius: 8px; color: #065f46; font-size: 14px;">
<strong>✓ Code:</strong>
<code style="background:#d1fae5;padding:4px 8px;border-radius:4px;color:#065f46">sandbox="allow-scripts allow-forms"</code>
</p>
</div>
</div>
</body>
</html>Loading preview...
allow-scripts - Enable JavaScriptallow-forms - Enable form submissionallow-popups - Allow opening windowsallow-same-origin - Same origin accessallow-top-navigation - Navigate parentallow-modals - Show dialogsallow-same-origin + allow-scripts together. This combination can let the iframe remove its own sandbox attribute!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Security Headers</title>
</head>
<body>
<div class="container">
<h1>🔐 Iframe Security Attributes</h1>
<div class="security-grid">
<!-- CSP Card -->
<div class="security-card">
<div class="card-header">
<h3>🛡️ CSP (Content Security Policy)</h3>
<p>Controls what can load in iframe</p>
</div>
<div class="card-body">
<div class="attribute">
<code>csp="default-src 'self'"</code>
<p>Restricts iframe to load only from same origin</p>
<div class="values">
<span class="value-badge">'self'</span>
<span class="value-badge">'none'</span>
<span class="value-badge">https://trusted.com</span>
</div>
</div>
<div class="tip">
<strong>💡 Pro Tip:</strong>
<p>Use CSP to prevent malicious content injection</p>
</div>
</div>
</div>
<!-- Referrer Policy Card -->
<div class="security-card">
<div class="card-header">
<h3>🔗 Referrer Policy</h3>
<p>Controls referrer information</p>
</div>
<div class="card-body">
<div class="attribute">
<code>referrerpolicy="no-referrer"</code>
<p>Prevents sending referrer header to embedded page</p>
<div class="values">
<span class="value-badge">no-referrer</span>
<span class="value-badge">origin</span>
<span class="value-badge">strict-origin</span>
</div>
</div>
<iframe
src="https://example.com"
referrerpolicy="no-referrer"
title="Referrer policy demo"
class="demo-iframe">
</iframe>
</div>
</div>
<!-- Permissions Policy Card -->
<div class="security-card">
<div class="card-header">
<h3>🎛️ Permissions Policy</h3>
<p>Fine-grained feature control</p>
</div>
<div class="card-body">
<div class="attribute">
<code>allow="camera 'none'; microphone 'none'"</code>
<p>Denies access to camera and microphone</p>
<div class="values">
<span class="value-badge">camera</span>
<span class="value-badge">microphone</span>
<span class="value-badge">geolocation</span>
<span class="value-badge">payment</span>
</div>
</div>
<div class="tip">
<strong>💡 Pro Tip:</strong>
<p>Always explicitly deny unused permissions</p>
</div>
</div>
</div>
<!-- X-Frame-Options Card -->
<div class="security-card">
<div class="card-header">
<h3>🚫 Clickjacking Protection</h3>
<p>Prevent your site in iframes</p>
</div>
<div class="card-body">
<div class="attribute">
<code>X-Frame-Options: DENY</code>
<p>Server header that prevents framing</p>
<div class="values">
<span class="value-badge">DENY</span>
<span class="value-badge">SAMEORIGIN</span>
<span class="value-badge">ALLOW-FROM uri</span>
</div>
</div>
<div class="tip">
<strong>⚠️ Important:</strong>
<p>Set this header on your server to prevent clickjacking attacks</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
sandbox attribute for untrusted contentreferrerpolicy="no-referrer" to prevent information leakageallow attribute to restrict permissions<iframe
src="https://trusted-source.com/content"
title="Secure embedded content"
sandbox="allow-scripts allow-same-origin"
referrerpolicy="no-referrer"
allow="accelerometer 'none'; camera 'none'; microphone 'none'"
loading="lazy"
width="100%"
height="400">
</iframe>sandbox attribute is supported in all modern browsers.referrerpolicy (Chrome 51+, Firefox 50+, Safari 11.1+) andallow (Chrome 60+, Firefox 74+, Safari 11.1+) have excellent support. Always test security features in your target browsers.