DEV Community: bore.ddev

How to Get the Parent Domain from a Cross-Origin Iframe in JavaScript (Without Losing Your Sanity)

bore.ddev — Sat, 22 Aug 2026 08:11:48 +0000

1. Introduction

If you are developing an iframe-based widget, embedded tool, or third-party script, you will inevitably run into a question that sounds deceptively simple:

"Which website embedded my iframe?"

Knowing the parent domain is essential for domain authorization, analytics, and security origin checks. But here is the catch: modern web browsers trust nobody — especially not your iframe.

Trying to read window.parent.location.href across origins is like peeking into your neighbor's window — the browser's security guard (DOMException) will tackle you immediately. And if you rely on document.referrer, strict no-referrer policies will ghost your script faster than a bad Tinder date.

In this guide, we will cover:

Why window.parent.location fails (and why Same-Origin Policy is browser-speak for "You can look, but don't touch").
Why document.referrer breaks when websites decide to go full stealth mode.
How window.location.ancestorOrigins saves us from nested iframe Inception.
How to write a robust, production-ready Vanilla JavaScript helper function (getTopParentDomain) that gets the domain without crashing your app.

2. Why `window.parent.location` Fails (Same-Origin Policy)

When your iframe page (https://my-widget.com) is embedded inside a host page (https://example.com), they are Cross-Origin (different domains).

Because they are cross-origin, the browser enforces the Same-Origin Policy (SOP). SOP is the browser security rule that basically states: "Scripts can directly access DOM properties across windows only when the relevant documents share the same origin."

If you try to bypass this:

// ❌ DOMException: Blocked a frame with origin "https://my-widget.com" from accessing a cross-origin frame.
// (Also known as: the error message that makes you question your life choices at 2 AM)
const parentUrl = window.parent.location.href;

The browser shuts it down instantly. You cannot read the parent's URL, DOM, or cookies. Security policies in 2026: Google knows who the user is, the ISP knows who the user is, but your own iframe isn't allowed to know what website it's sitting on.

3. The `document.referrer` Problem (Or: How Referrer Policies Ghost You)

A common first approach is document.referrer.:

console.log(document.referrer); // "https://example.com/blog/page-1"

In an ideal world, document.referrer gives you the host URL. But we don't live in an ideal world; we live in a world of privacy policies.

Why `document.referrer` ghosted you

Websites can strip referrer headers entirely using a meta tag:

<!-- Parent website going full stealth mode -->
<meta name="referrer" content="no-referrer">

or HTTP headers:

Referrer-Policy: no-referrer

or directly on the iframe tag:

<iframe src="https://my-widget.com" referrerpolicy="no-referrer"></iframe>

When any of these are active, document.referrer inside your iframe evaluates to an empty string (""). Your iframe enters the DOM wearing dark sunglasses and a trench coat with zero memory of where it came from.

4. The Solution: Multi-Tier Parent Domain Resolution

Since no single method works 100% of the time across all browsers, we build a 3-tier survival engine:

                              ┌────────────────────────────────────────┐
                              │     getTopParentDomain() Started       │
                              └───────────────────┬────────────────────┘
                                                  │
                                       Is top-level window?
                                       (window.parent === window)
                                         /                \
                                    YES /                  \ NO (Inside Iframe)
                                       /                    \
                     ┌──────────────────────────┐    ┌───────────────────────────────────┐
                     │ Parse document.referrer  │    │ Check ancestorOrigins[last]       │
                     │ Or return 'Direct Access'│    │ (Chromium / WebKit - Top Domain)  │
                     └──────────────────────────┘    └─────────────────┬─────────────────┘
                                                                       │
                                                                 Found origin?
                                                                  /         \
                                                             YES /           \ NO
                                                                /             \
                                          ┌──────────────────────────┐   ┌────────────────────────────┐
                                          │ Return Top Main Domain   │   │ Check document.referrer    │
                                          └──────────────────────────┘   └──────────────┬─────────────┘
                                                                                        │
                                                                                  Found origin?
                                                                                   /         \
                                                                              YES /           \ NO
                                                                                 /             \
                                                           ┌──────────────────────────┐   ┌───────────────────────────┐
                                                           │ Parse Referrer Origin    │   │ Start postMessage         │
                                                           └──────────────────────────┘   │ Handshake (3s Timeout)    │
                                                                                          └───────────────────────────┘

5. Handling Nested Iframes with `ancestorOrigins` (Escaping Iframe Inception)

What happens if someone puts your iframe inside another iframe inside another iframe? Congratulations — you've created web development Russian nesting dolls:

Topmost Main Site A (https://main-portal.com) [Address Bar]
 └── Wrapper Iframe B (https://agency-host.com)
      └── Your Widget C (https://my-widget.com)

If you try to inspect immediate parent origins in a nested setup, you get agency-host.com, which isn't the real website!

In Chrome, Edge, Safari, and Opera, Chromium gives us window.location.ancestorOrigins. This is an array of all parent origins up the chain:

window.location.ancestorOrigins[0] 
// ➔ "https://agency-host.com" (Immediate Parent B)

window.location.ancestorOrigins[window.location.ancestorOrigins.length - 1] 
// ➔ "https://main-portal.com" (Topmost Main Site A in the Address Bar!)

ancestorOrigins[ancestorOrigins.length - 1] is your totem in Inception — it instantly wakes you up at the topmost domain in the address bar.

(Note: Chrome gives you ancestorOrigins generously. Browser support isn't universal, so we need another fallback. Because apparently Firefox would like us to mind our own business. That's why we need Tier 3).

6. The Bulletproof Handshake: Bi-Directional `postMessage`

When no-referrer strips document.referrer AND ancestorOrigins is unsupported (hello, Firefox!), we fall back to a bi-directional postMessage handshake.

A postMessage handshake is basically two introverted browser windows awkwardly waving at each other across cross-origin boundaries until someone confirms their origin.

The Handshake Steps:

Widget Mounts: The iframe posts a WIDGET_READY signal to window.parent.
Parent Script Listens: The host script catches WIDGET_READY and posts back { type: 'PARENT_ORIGIN_INIT' }.
Browser Cryptography Magic: The browser automatically attaches event.origin to the message inside the iframe. The browser supplies event.origin based on the origin of the window that sent the message. JavaScript cannot arbitrarily set this value, but your application should still validate the received origin and message source before trusting the message.

7. Production-Ready Vanilla JS Solution

Here is the complete, zero-dependency, production-ready Vanilla JavaScript code.

1. Parent Page Script (Placed on Host Site)

// Placed on the host website (or bundled into your embed script)
window.addEventListener('message', function(event) {
  // Respond only when widget notifies it is ready
  if (event.data && event.data.type === 'WIDGET_READY') {
    if (event.source) {
      event.source.postMessage({ type: 'PARENT_ORIGIN_INIT' }, '*');
    }
  }
});

2. The Iframe Domain Helper (`getTopParentDomain`)

/**
 * Helper to extract topmost domain from Chromium ancestorOrigins
 */
function getTopmostAncestorDomain() {
  if (window.location.ancestorOrigins && window.location.ancestorOrigins.length > 0) {
    const topAncestor = window.location.ancestorOrigins[window.location.ancestorOrigins.length - 1];
    if (topAncestor && topAncestor !== 'null') {
      return topAncestor;
    }
  }
  return null;
}

/**
 * Detects the available embedding origin, with the top-level ancestor available when ancestorOrigins is supported.
 * @returns {Promise<string>} Resolves to the detected parent domain (e.g. "https://example.com")
 */
function getTopParentDomain() {
  if (typeof window === 'undefined') {
    return Promise.resolve('Server');
  }

  const isEmbedded = window.parent !== window;

  // 1. Direct Browser Access (Not inside an iframe)
  if (!isEmbedded) {
    if (document.referrer) {
      try {
        return Promise.resolve(new URL(document.referrer).origin);
      } catch (e) {
        return Promise.resolve(document.referrer);
      }
    }
    return Promise.resolve('Direct Access');
  }

  // 2. Try Chromium/WebKit ancestorOrigins immediately
  const ancestorDomain = getTopmostAncestorDomain();
  if (ancestorDomain) {
    return Promise.resolve(ancestorDomain);
  }

  // 3. Try document.referrer immediately
  if (document.referrer) {
    try {
      const referrerDomain = new URL(document.referrer).origin;
      if (referrerDomain && referrerDomain !== 'null') {
        return Promise.resolve(referrerDomain);
      }
    } catch (e) {
      // Ignore URL parse error
    }
  }

  // 4. Fallback: Initiate postMessage Handshake (for strict no-referrer policies)
  return new Promise(function(resolve) {
    let resolved = false;

    function cleanupAndResolve(domain) {
      if (resolved) return;
      resolved = true;
      clearTimeout(timeoutId);
      window.removeEventListener('message', handleHandshake);
      resolve(domain);
    }

    function handleHandshake(event) {
      if (event.data && event.data.type === 'PARENT_ORIGIN_INIT') {
        if (event.origin && event.origin !== 'null') {
          // Prefer ancestorOrigins if available; fallback to browser-verified event.origin
          const topDomain = getTopmostAncestorDomain() || event.origin;
          cleanupAndResolve(topDomain);
        }
      }
    }

    // Listen for parent handshake response
    window.addEventListener('message', handleHandshake);

    // Notify parent window that widget is ready
    window.parent.postMessage({ type: 'WIDGET_READY' }, '*');

    // Timeout safety fallback (3 seconds: enough for slow sites without blocking forever)
    const timeoutId = setTimeout(function() {
      cleanupAndResolve('Unknown');
    }, 3000);
  });
}

// Example Usage:
getTopParentDomain().then(function(domain) {
  console.log('Detected Parent Domain:', domain);
});

8. Summary Checklist for Developers

Scenario	Detection method	Result
Supported browser + nested iframe	`ancestorOrigins[last]`	Top-level ancestor origin
Cross-origin iframe + referrer available	`document.referrer`	Referring origin
Referrer unavailable	`postMessage`	Immediate parent's origin
Direct page access	`document.referrer`	Referring origin or empty

Conclusion

So, what started as a simple question — "Which website embedded my iframe?" — turns out to involve a few browser security rules, privacy policies, and enough iframe nesting to make you question your life choices.

The practical approach is to use the browser information available to you:

Use ancestorOrigins[last] when you need the top-level ancestor origin and the browser supports it.
Use document.referrer when referrer information is available.
Use a postMessage handshake when the parent page can explicitly cooperate and provide its origin.
If none of these methods can provide the information, return a safe fallback instead of pretending the browser owes you an answer.

The important part is that there is no universal way for a cross-origin iframe to freely inspect its parent's location. That's not a missing JavaScript API. That's the browser's security model doing exactly what it was designed to do.

So the next time your iframe asks, "Who is my parent?", at least now you have a few ways to investigate before calling it a family issue.

Happy coding!

Stop Pasting Your JWT Tokens Into Random Websites

bore.ddev — Sat, 27 Jun 2026 14:33:40 +0000

I built a 21-tool developer toolkit that runs entirely in your browser. No servers. No sign-ups. No data leaving your machine. Ever. Here's why, and here's what it does.

You're debugging a broken API response at 11 PM. You've got a JWT token in your clipboard, a JSON payload that won't parse, and a CSS-to-Tailwind conversion you've been putting off since Tuesday.

So you open a random "online JSON formatter" from Google. Paste your JWT into a text box labeled "Enter your token here." Click "Decode."

Somewhere, on some server you'll never see, your token is now stored. Along with the 200 other things you've pasted into that tool this month.

That's the problem I kept running into. And it's not just JWT tokens. It's API keys in Base64, test data in JSON, regex patterns you don't want logged, passwords you definitely shouldn't be typing into a random input field.

So I built something different.

What is DevClat?

DevClat is a free, open, client-side developer toolkit with 21 tools — and every single one runs in your browser. No backend. No API calls. No "we take your privacy seriously" banner over a tracking script.

It's a single-page React app. You open it, use it, close it. Your data never touches a server because there is no server.

Try the DevClat Developer Toolkit →

The Tools (All 21 of Them)

I didn't build 21 "me too" utilities. Each tool exists because I personally needed it and got tired of context-switching between 15 browser tabs.

Data Generation

Mock Data Generator — The one that started it all. Pick a preset (Users, Products, Orders, Addresses, Transactions, Posts, Employees, Invoices, Reviews) or build a custom schema with any field type. Output as JSON, CSV, or SQL. Powered by faker.js, running entirely client-side. Generate 100 rows of realistic fake data without sending a single byte over the network.

Lorem Ipsum Generator — Not the usual "lorem ipsum dolor sit amet" generator. Configure paragraph count, copy with one click, done. You've got bigger things to worry about than placeholder text.

Editors & Formatters

JSON Formatter & Validator — Paste broken, minified, or malformed JSON. Get instant pretty-printing, syntax highlighting, and error line highlighting. Collapsible tree view for large payloads. One-click copy. No "Loading..." spinners, no "Your JSON has been saved for analytics."

Text Diff Tool — Git-diff style comparison without opening a terminal. Side-by-side view with line-level and word-level highlighting. Unified, split, and words output modes. A statistics panel that actually tells you what changed. Perfect for comparing config files, API responses, or that SQL migration you're afraid to run.

Regex Tester — Type a pattern, see matches highlighted in real-time. Toggle flags (g, i, m, s, u) without rewriting your regex. Capture groups displayed inline. No more running grep in the terminal just to test if your email regex actually works.

HTML Preview Editor — Side-by-side HTML/CSS/JS editor with instant live preview. Full-page preview mode for when you need to see what your component actually looks like without deploying.

Markdown Preview — Write Markdown on the left, see rendered HTML on the right. Real-time. Supports tables, code blocks, headings, links. Zero friction.

CSS Minifier — Paste CSS, get compressed output. Side-by-side size comparison so you can feel smug about those extra 2KB you just saved.

Converters

CSS to Tailwind Converter — This one's special. Paste raw CSS, get Tailwind utility classes. 200+ property mappings, dark mode support, arbitrary value handling, color palette resolution, and @media block support. Bidirectional — paste Tailwind, get CSS back. I use this daily.

Base64 Encoder/Decoder — Real-time conversion. Full Unicode support. One-click copy. Encoding eyJhbGciOiJIUzI1NiJ9 shouldn't require a three-step process.

URL Encoder/Decoder — Encode and decode URL components instantly. Handles query parameters, path segments, and special characters. Works in both directions.

JWT Token Decoder — Paste any JWT, see the header, payload, and signature decoded instantly. Check expiration, algorithm, and claims. Nothing leaves your browser. This is the tool I wish existed three years ago.

Design Tools

CSS Gradient Builder — Linear, radial, and conic gradients with draggable color stops, angle control, and live preview. Copy the CSS output. No more guessing what linear-gradient(135deg, #667eea 0%, #764ba2 100%) actually looks like.

Box Shadow Generator — Multi-layer support, inset mode, blur, spread, and offset. Live preview with copy-ready CSS output. Build complex shadow systems without opening Figma.

Color Contrast Checker — WCAG 2.1 AA and AAA compliance checking. Enter foreground and background colors, get instant pass/fail results. Accessibility compliance without the accessibility audit.

Generators

QR Code Generator — Enter text or URL, get a downloadable PNG. Canvas-based rendering, no watermarks. Works offline.

Password Generator — Cryptographically strong passwords with configurable length, character types, and a real-time strength meter. The kind of password generator that actually generates strong passwords.

UUID Generator — Batch generate up to 100 UUID v4 identifiers. Standard (hyphenated) or compact format. One click, done.

Timestamp Converter — Unix timestamps to human-readable dates and back. Supports seconds and milliseconds, ISO 8601, and custom date formats. Finally, a timestamp tool that doesn't make you count zeros.

Utilities

Flexbox & Grid Playground — Drag and drop elements to build flexbox and grid layouts visually. See the Tailwind output update in real-time as you adjust gaps and alignment. Learn CSS layout without reading MDN for the 47th time.

Text Tokenizer — Count tokens, words, characters, and lines. Visual token breakdown shows exactly how your text gets tokenized. Essential for LLM prompt engineering and staying within context windows.

The Interactive Terminal (My Favorite Feature)

Here's something you won't find in any other web-based dev tool: a working terminal.

DevClat has a mock CLI built right into the homepage. Type help to see available commands. Type open generator to switch tools. Type list to see everything available.

It auto-types a demo command when you load the page — devclat mock-data --users 3 --format json — and shows you the output in real-time with syntax-highlighted JSON.

This isn't a gimmick. It's a deliberate UX choice. Instead of forcing you to click through a grid of icons to find what you need, the terminal gives keyboard-first users a fast, predictable way to navigate. Type a command, get a result. No hunting, no scrolling.

Click "Try CLI" and the terminal focuses, auto-types help, and shows you exactly how to interact with it.

How It's Built

I'm not going to pretend this is rocket science. The architecture is deliberately simple:

React 19 for the UI
Vite 6 for the build
Tailwind CSS 4 for styling
faker.js for mock data generation
qrcode library for QR code rendering

Every tool is a standalone component. Navigation is managed via a single activeTool state variable — no client-side router, no URL history, no complex state management. Switching tools is instant because everything is already loaded.

The theme system uses CSS variables synced with a JavaScript constants file. Dark mode is default. Light mode works. Both are clean.

The key insight: you don't need a backend for developer tools. Every tool I listed above can be implemented entirely with JavaScript string manipulation, DOM APIs, and browser-native features. The moment you add a server, you add latency, complexity, privacy concerns, and a maintenance burden. I chose none of those.

Why This Matters

There are hundreds of "free online developer tools" out there. Most of them are:

Ad-supported — banner ads, pop-ups, and "disable your ad blocker" notices
Server-dependent — your data gets sent somewhere, processed, and (maybe) deleted
Tracker-heavy — analytics scripts, fingerprinting, and retargeting pixels
Offline-hostile — try using them on a plane or a spotty coffee shop WiFi

DevClat is none of these things. It's a static site. There's nothing to track because there's nothing to send. It works offline because there's nothing to fetch. It's fast because there's nothing to wait for.

Privacy isn't a feature. It's the architecture.

What's Next

I'm adding more tools. The architecture scales trivially — create a component, add it to the tool list, done. Some ideas in the pipeline:

CSS variable inspector
API response mock server (local, via Service Worker)
Diff viewer for entire files
More data presets for the mock generator

If you've got ideas, or if you want to contribute, the project is built to be extended.

Try It

No sign-up. No "free trial." No credit card. Just tools.

Open the Free DevClat Toolkit →

Paste a JWT token. Generate some fake data. Convert CSS to Tailwind. Build a gradient. Check a password's strength. Whatever you need — it's all client-side, all private, all free.

Built with React, Vite, and a deep distrust of random web utilities that ask you to paste your API keys.