Iframe DOM Methods Demo

An interactive demonstration of native DOM methods available for same-origin iframe communication and manipulation, including History API navigation.

Overview

This project demonstrates how parent windows and iframes can interact with each other when they share the same origin. It showcases various native browser APIs and DOM methods that allow bidirectional communication and manipulation between frames, plus iframe navigation using the History API.

Features

Parent → Iframe Interactions

• Access iframe's contentWindow and contentDocument
• Read and modify iframe DOM elements
• Change iframe styles dynamically
• Call functions defined in the iframe
• Query iframe DOM structure
• Add event listeners to iframe elements
• Trigger custom events in the iframe

Iframe → Parent Interactions

• Access parent window via window.parent
• Access top-level window via window.top
• Get the iframe element using window.frameElement
• Modify parent DOM elements
• Update parent input values
• Call functions defined in the parent
• Query parent DOM structure
• Listen to parent events
• Trigger custom events in the parent

Navigation & History API

• Navigate between multiple iframe pages
• Parent-controlled iframe navigation
• History API methods: pushState(), replaceState(), back(), forward()
• Iframe history management from parent
• popstate event handling
• History state preservation across navigation

Advanced Features

• Window relationship checking
• Origin comparison
• Event propagation across frames
• Cross-frame function calls
• Shared data access between frames

Installation

npm install

Live Demo

🌐 View Live Demo on GitHub Pages

The demo is automatically deployed to GitHub Pages via GitHub Actions whenever changes are pushed to the main branch.

Running Locally

For local development, you can use the included Express server:

npm install
npm start

Or directly with Node:

node server.js

The server will start on http://localhost:3000

Usage

Online Demo

1. Visit the live demo
2. Use the interactive buttons to test different iframe DOM methods
3. Observe the outputs to see the results of each operation
4. Try buttons in both the parent page and inside the iframe content

Local Development

1. Install dependencies: npm install
2. Start the server: npm start
3. Open your browser and navigate to http://localhost:3000
4. Experiment with the iframe DOM methods interactively

Key DOM Methods Demonstrated

From Parent Window

• iframe.contentWindow - Access the iframe's window object
• iframe.contentDocument - Access the iframe's document object
• Direct DOM manipulation across frames
• Cross-frame function invocation

From Iframe

• window.parent - Access the parent window
• window.top - Access the top-level window
• window.frameElement - Get reference to the iframe element itself
• Parent DOM manipulation from inside the iframe

Navigation & History API

• iframe.src = url - Navigate iframe from parent
• iframe.contentWindow.history.back() - Navigate iframe history from parent
• iframe.contentWindow.history.forward() - Forward in iframe history from parent
• window.history.pushState() - Add history entry with state
• window.history.replaceState() - Modify current history entry
• window.history.back() / forward() - Navigate through history
• popstate event - Listen for history navigation

Shared Methods

• addEventListener() - Listen to events across frames
• dispatchEvent() - Trigger custom events across frames
• querySelector() / getElementById() - Query DOM across frames
• Direct property access and function calls

Same-Origin Policy

All these methods work because the parent and iframe share the same origin (protocol, domain, and port). Cross-origin iframes would be restricted by the browser's security model and would require postMessage() API for communication.

Project Structure

/iframe-hacking/
├── server.js         # Express server
├── index.html        # Parent page with iframe and controls
├── iframe.html       # Content loaded in the iframe
├── package.json      # Node.js dependencies
└── README.md         # This file

Browser Compatibility

Works in all modern browsers that support:

• ES6+ JavaScript
• Iframe elements
• DOM manipulation APIs
• Custom events

Security Considerations

This demo is for educational purposes and demonstrates same-origin iframe interactions. In production:

• Always validate and sanitize data passed between frames
• Be cautious with cross-frame DOM manipulation
• Consider using postMessage() for more structured communication
• Implement proper Content Security Policy (CSP) headers
• Be aware of clickjacking vulnerabilities with iframes

Deployment

This project is automatically deployed to GitHub Pages using GitHub Actions. The workflow:

1. Triggers on every push to the main branch
2. Deploys all static files (HTML, CSS, JS) to GitHub Pages
3. Makes the demo accessible at: https://bobbravo2.github.io/iframe-hacking/

Note: The Express server (server.js) is only needed for local development. GitHub Pages serves the HTML files directly as static content.

Manual Deployment

You can also trigger a deployment manually:

1. Go to the repository on GitHub
2. Click on "Actions" tab
3. Select "Deploy to GitHub Pages" workflow
4. Click "Run workflow"

License

MIT