Am I inside
an iframe?

The one-line check

window.self always refers to the current window. window.top always refers to the outermost window. If they are not the same object, your page is not the top one — somebody embedded you.

if (window.self !== window.top) {
  console.log('We are inside an iframe');
} else {
  console.log('We are the top-level page');
}

That is the whole detection. Everything below is when this simple check is not enough.

Why window.top and not window.parent

window.parent points to the immediate parent. If your page is two iframes deep — frame inside a frame inside a top page — window.parent is the middle frame, not the actual top window. window.top always points to the outermost window of the browsing context, so the check works at any nesting depth.

Cross-origin access throws

The check itself never throws. But the moment you try to read window.top (its location, its document, any property other than identity comparison), the Same-Origin Policy will block you if the parent is on a different origin. Wrap any subsequent access in a try / catch:

const framed = window.self !== window.top;
let crossOrigin = false;
if (framed) {
  try {
    // Just touching the property is enough to trigger the SOP check.
    window.top.location.href;
  } catch {
    crossOrigin = true;
  }
}
console.log({ framed, crossOrigin });

How to stop your page from being framed

If the answer to “am I in an iframe?” should always be no, do not rely on JavaScript — refuse the framing at the HTTP level. Two headers do this, and you should send both:

X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none'

X-Frame-Options: DENY is the legacy header — every modern browser still respects it. frame-ancestors in Content-Security-Policy is the replacement; it supports an allowlist (frame-ancestors 'self' https://trusted.example) and supersedes X-Frame-Options where both are present. Browsers that see either one will refuse to render the page inside an iframe at all — long before any of your JavaScript loads.

The sandbox caveat

An iframe with the sandbox attribute and no allow-same-origin is treated by the browser as a unique opaque origin, even if its URL matches its parent. From inside such a frame, window.self !== window.top still returns true as expected. But touching anything on window.top throws — because the sandbox is now, effectively, cross-origin to everything else.

For a frame to share origin with its parent it needs sandbox="allow-scripts allow-same-origin". That combination is generally a bad idea — same-origin sandbox can rewrite its own iframe attributes and break out of the sandbox — but the API allows it.

Defending the check itself

A determined embedding page that loads your script (rather than embedding your URL) can override window.top before your code runs:

// Hostile page sets this up before injecting your script:
Object.defineProperty(window, 'top', { get: () => window.self });

For pages where this matters (banking, internal admin, anything one-click-destructive) do not rely on the JS check at all. Send the HTTP headers above. If you cannot send the headers — for instance, you are a script being included on someone else's page — accept that window.top is untrustworthy and verify the embedding origin via the server.

Frequently asked questions