pierrelf.com
Phase 14: Security + Storage#
Implement iframe element support with proper origin isolation and the postMessage cross-origin communication API.
Background#
Depends on: Same-Origin Policy enforcement.
Iframes create nested browsing contexts, each with their own Document, origin, and security boundary. postMessage provides a safe, opt-in mechanism for cross-origin communication between frames.
Requirements#
iframe element#
- Parse the iframe element in the HTML tree builder (src, srcdoc, sandbox, allow, name attributes)
- Each iframe creates a new nested browsing context with its own Document
- Load the iframe src URL using the resource loader
- Parse and render the iframe content into a separate DOM tree
- Layout: iframe is a replaced element with default width/height (300x150) or as specified by CSS/attributes
Browsing context model#
- Implement a BrowsingContext struct representing a tab or iframe
- Each browsing context has: an ID, a Document, an origin, a parent (if nested), and child contexts
- Top-level browsing context = the main page
- Nested browsing context = iframe
Origin isolation#
- Each iframe has its own origin derived from its src URL (or the parent for srcdoc)
- Cross-origin iframes cannot access the parent document's DOM and vice versa
- Same-origin iframes can access each other via contentDocument / contentWindow
- Enforce these restrictions in the JS-DOM bridge
postMessage API#
- Implement window.postMessage(message, targetOrigin) in JS
- Serialize the message (structured clone algorithm -- start with string/number/boolean/null/array/object)
- Deliver a MessageEvent to the target window's message event listeners
- The MessageEvent includes: data, origin (of sender), source (reference to sender window)
- targetOrigin check: if targetOrigin is not "*", verify it matches the recipient's origin before delivery
sandbox attribute#
- Parse the sandbox attribute on iframe
- When sandbox is present with no value, apply all restrictions: no scripts, no forms, no top navigation, unique origin
- Support sandbox tokens: allow-scripts, allow-forms, allow-same-origin, allow-top-navigation, allow-popups
Integration points#
- crates/html: parse iframe element
- crates/dom: represent nested browsing contexts
- crates/layout: layout iframe as replaced element
- crates/render: render iframe content into a sub-surface
- crates/js: implement contentWindow, contentDocument, postMessage, MessageEvent
- crates/browser: manage browsing context tree and iframe loading
Acceptance Criteria#
- iframe loads and renders content from a URL
- Cross-origin iframe cannot access parent DOM (security error)
- Same-origin iframe can access parent via window.parent.document
- postMessage delivers messages cross-origin with correct origin and source
- targetOrigin filtering works (non-matching origins are not delivered)
- sandbox attribute restricts iframe capabilities
- Nested iframes work (iframe within iframe)
- cargo clippy --workspace -- -D warnings passes
- cargo test --workspace passes