HTML Iframes, Objects & Embedded Content

1. Nested Browsing Contexts & Embedding

An Inline Frame (<iframe>) creates an independent nested browsing context inside the current parent HTML document. It loads a completely separate document tree with its own JavaScript execution context, window object, and session history.

2. Core `<iframe>` Attributes & Feature Policies

Modern iframes control hardware and browser feature access through the allow attribute (Permissions Policy):

<iframe 
  src="https://maps.google.com/embed?pb=..." 
  title="Bangalore Office Location Map" 
  width="100%" 
  height="360" 
  style="border: 0; border-radius: 8px;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
  <p>Your browser does not support iframes. <a href="https://maps.google.com">Open map in new tab</a>.</p>
</iframe>

3. Interactive Sandboxed Frame & Cross-Origin Bridge

Below is a sandboxed interactive widget demonstrating origin-safe parent-to-frame message passing using the postMessage standard:

<!-- Sandboxed Widget Frame -->
<iframe 
  id="paymentWidget" 
  src="https://pay.gateway.com/checkout"
  sandbox="allow-scripts allow-forms"
  title="Secure Payment Terminal">
</iframe>

<script>
// Parent dispatches command to child frame
function sendTokenToFrame(token) {
  const frame = document.getElementById('paymentWidget');
  frame.contentWindow.postMessage(
    { type: 'AUTH_TOKEN', payload: token },
    'https://pay.gateway.com' // Strict Target Origin
  );
}

// Listen for status replies safely
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://pay.gateway.com') return;
  console.log('Payment response:', event.data);
});
</script>

4. The `sandbox` Attribute Flags Reference

When the sandbox attribute is present with no value (<iframe sandbox>), all security restrictions are active. You selectively restore features by specifying tokens:

5. Clickjacking & Framing Security Headers

Clickjacking (UI Redressing) is an attack where a malicious website loads your sensitive page (e.g., bank transfer or account delete) inside an invisible transparent iframe positioned directly over an enticing dummy button. Modern servers protect their pages with HTTP headers:

6. Test Your Knowledge: Iframes & Embedding Quiz

Verify your mastery of nested browsing contexts, sandbox security, and postMessage communication: