How to identify if a webpage is being loaded inside an iframe or directly into the browser window?

Question

I am writing an iframe based facebook app. Now I want to use the same html page to render the normal website as well as the canvas page within facebook. I want to know if I can determine whether the page has been loaded inside the iframe or directly in the browser?

• simhumileco: A few nice ways (including comments): tommcfarlin.com/check-if-a-page-is-in-an-iframe
• Dan Atkinson: External links aren't a very good way of answering questions. Especially if the content of those external links can be reduced to return window.location !== window.parent.location.

Answer 1

Update (2024):

According to the docs on cross-origin script API access, window.self and window.top are both included in the list of properties that browsers of potentially-different origins can access.

const inIframe = window.self !== window.top;

---

Previous Answer

Note: Browsers can block access to window.top due to same origin policy. IE bugs also take place.

Here's the working code:

function inIframe () {
 try {
 return window.self !== window.top;
 } catch (e) {
 return true;
 }
}

top and self are both window objects (along with parent), so you're seeing if your window is the top window.

• akshat: This seems to work fine in Firefox. Does it work in other browsers too?
• sglessard: Having a page with an iframe within an iframe, to test from my child iframe if my parent iframe was embeded in the page, I used if (parent === top)
• Gaurang Jadia: @sglessard If the child page and parent are from different domains then Firefox will complain for Same Origin Policy (www.w3.org/Security/wiki/Same_Origin_Policy) and code won't work
• jeremysawesome: This works in IE 11, 10, and 9 for me. Also it works in FF and Opera as well as, of course, Chrome. I haven't run into any issues with it.
• Jeromy French: For those still rocking the latest in 1995 tech, window.self !== window.top returns true when run from within contents of frame, or iframe.

Answer 2

When in an iframe on the same origin as the parent, the window.frameElement method returns the element (e.g. iframe or object) in which the window is embedded. Otherwise, if browsing in a top-level context, or if the parent and the child frame have different origins, it will evaluate to null.

window.frameElement
 ? 'embedded in iframe or object'
 : 'not embedded or cross-origin'

This is an HTML Standard with basic support in all modern browsers.

• Oriol: Note attempting to read frameElement will throw a SecurityError exception in cross-origin iframes, according to W3C (WHATWG says it should return null instead). So you might want to wrap it inside a try...catch statement.
• OlehZiniak: getting null inside and outside of iframe
• xeophin: The description at MDN says that "if the document into which it's embedded has a different origin (such as having been located from a different domain), this is null."
• Art3mix: Just to clerify what the return should be: Returns the element (such as <iframe> or <object>) in which the window is embedded, or null if the element is either top-level or is embedded into a document with a different script origin; that is, in cross-origin situations.
• Ivan: Works like a charm including on same-domain nested iframes. Thanks a lot!

Answer 3

if ( window !== window.parent ) 
{
 // The page is in an iframe 
} 
else 
{ 
 // The page is not in an iframe 
}

• mkoryak: except when you open an iframe of your own website.
• Nathan: This was the most straightforward and readable in my opinion.
• repeekyraid cero: @mkoryak: I'm actually doing exactly this: Iframing my website into itself at one specific juncture: How can this then be detected reliably ?
• Mahn: It doesn't matter if the iframe points to the same website, the parent and the child are never going to have the same window object.

Answer 4

I'm not sure how this example works for older Web browsers but I use this for IE, Firefox and Chrome without an issue:

var iFrameDetection = (window === window.parent) ? false : true;

• CalculatorFeline: Or simply !(window===window.parent)
• Ivan Leonenko: window !== window.parent
• mikep: iFrameDetection returns false positive in case of popup window. So to detect iframe correctly it should be var iFrameDetection = (window === window.parent || window.opener) ? false : true;
• mikep: @CalculatorFeline I prefer explicit statement as author wrote because it is quicker to understand at first look so code is less buggy. Minificator tools do this job for me to rewrite it in shortest way when deployed. Why I should write minified code which is worse readable for humans?
• CalculatorFeline: What about Ivan's suggestion to use !==?

Answer 5

RoBorg is correct, but I wanted to add a side note.

In IE7/IE8 when Microsoft added Tabs to their browser they broke one thing that will cause havoc with your JS if you are not careful.

Imagine this page layout:

MainPage.html
 IframedPage1.html (named "foo")
 IframedPage2.html (named "bar")
 IframedPage3.html (named "baz")

Now in frame "baz" you click a link (no target, loads in the "baz" frame) it works fine.

If the page that gets loaded, lets call it special.html, uses JS to check if "it" has a parent frame named "bar" it will return true (expected).

Now lets say that the special.html page when it loads, checks the parent frame (for existence and its name, and if it is "bar" it reloads itself in the bar frame. e.g.

if(window.parent && window.parent.name == 'bar'){
 window.parent.location = self.location;
}

So far so good. Now comes the bug.

Lets say instead of clicking on the original link like normal, and loading the special.html page in the "baz" frame, you middle-clicked it or chose to open it in a new Tab.

When that new tab loads (with no parent frames at all!) IE will enter an endless loop of page loading! because IE "copies over" the frame structure in JavaScript such that the new tab DOES have a parent, and that parent HAS the name "bar".

The good news, is that checking:

if(self == top){
 //this returns true!
}

in that new tab does return true, and thus you can test for this odd condition.

• user123444555621: Has the bug been fixed in the meantime? I can't reproduce it in IE8. I always get the correct window.parent.
• scunliffe: Not sure - I'll run my test suite against IE9 and below again and post an update.
• Michael Scheper: It's 2021, and I'm still dancing on IE's grave.
• scunliffe: Sadly I'm still supporting IE... though I will definitely be celebrating the day that I no longer have to. ;-)

Answer 6

The accepted answer didn't work for me inside the content script of a Firefox 6.0 Extension (Addon-SDK 1.0): Firefox executes the content script in each: the top-level window and in all iframes.

Inside the content script I get the following results:

 (window !== window.top) : false 
 (window.self !== window.top) : true

The strange thing about this output is that it's always the same regardless whether the code is run inside an iframe or the top-level window.

On the other hand Google Chrome seems to execute my content script only once within the top-level window, so the above wouldn't work at all.

What finally worked for me in a content script in both browsers is this:

 console.log(window.frames.length + ':' + parent.frames.length);

Without iframes this prints 0:0, in a top-level window containing one frame it prints 1:1, and in the only iframe of a document it prints 0:1.

This allows my extension to determine in both browsers if there are any iframes present, and additionally in Firefox if it is run inside one of the iframes.

• Rob W: Try document.defaultView.self === document.defaultView.top or window !== window.top. In Firefox's add-on SDK's content script, the global self object is an object used to communicate with the main script.

Answer 7

I'm using this:

var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);

• Luke: Why do you do this: .indexOf("HTMLIFrameElement") ?
• Chuck Kollars: .indexOf('foobarbaz') > -1 is a way to check for "substring match" (i.e. can 'foobarbaz' be found somewhere within the string?), but without using regular expressions. It's logically equivalent to .match(/foobarbaz/). It (used to:-) work on a wider range of browsers, and still may be used either out of habit or because of fears about the performance of regular expression machinery.

Answer 8

Best-for-now Legacy Browser Frame Breaking Script

The other solutions did not worked for me. This one works on all browsers:

One way to defend against clickjacking is to include a "frame-breaker" script in each page that should not be framed. The following methodology will prevent a webpage from being framed even in legacy browsers, that do not support the X-Frame-Options-Header.

In the document HEAD element, add the following:

<style id="antiClickjack">body{display:none !important;}</style>

First apply an ID to the style element itself:

<script type="text/javascript">
 if (self === top) {
 var antiClickjack = document.getElementById("antiClickjack");
 antiClickjack.parentNode.removeChild(antiClickjack);
 } else {
 top.location = self.location;
 }
</script>

This way, everything can be in the document HEAD and you only need one method/taglib in your API.

Reference: https://www.codemagi.com/blog/post/194

• Raymond Nijland: framing is not the only threat, what about objecting (meaning using HTML5 object tag which replaces iframe tag).. i think this will not work against that..

Answer 9

Since you are asking in the context of a facebook app, you might want to consider detecting this at the server when the initial request is made. Facebook will pass along a bunch of querystring data including the fb_sig_user key if it is called from an iframe.

Since you probably need to check and use this data anyway in your app, use it to determine the the appropriate context to render.

Answer 10

Use this javascript function as an example on how to accomplish this.

function isNoIframeOrIframeInMyHost() {
// Validation: it must be loaded as the top page, or if it is loaded in an iframe 
// then it must be embedded in my own domain.
// Info: IF top.location.href is not accessible THEN it is embedded in an iframe 
// and the domains are different.
var myresult = true;
try {
 var tophref = top.location.href;
 var tophostname = top.location.hostname.toString();
 var myhref = location.href;
 if (tophref === myhref) {
 myresult = true;
 } else if (tophostname !== "www.yourdomain.com") {
 myresult = false;
 }
} catch (error) { 
 // error is a permission error that top.location.href is not accessible 
 // (which means parent domain <> iframe domain)!
 myresult = false;
}
return myresult;
}

Answer 11

I actually used to check window.parent and it worked for me, but lately window is a cyclic object and always has a parent key, iframe or no iframe.

As the comments suggest hard comparing with window.parent works. Not sure if this will work if iframe is exactly the same webpage as parent.

window === window.parent;

• MarkosyanArtur: in chrome in main window context window.parent === window is true. So your answer is incorrect. And this comparsion could be used for check (at least in chrome, didn't test it in another browsers).
• www-0av-Com: DOES NOT WORK in context of iFrame, but ` if(window === window.parent){ ` does. I'm not marking you down as I don't know why it doesn't work

Answer 12

function amiLoadedInIFrame() {
 try {
 // Introduce a new propery in window.top
 window.top.dummyAttribute = true;
 // If window.dummyAttribute is there.. then window and window.top are same intances
 return !window.dummyAttribute;
 } catch(e) {
 // Exception will be raised when the top is in different domain
 return true;
 }
}

Answer 13

Following on what @magnoz was saying, here is a code implementation of his answer.

constructor() {
 let windowLen = window.frames.length;
 let parentLen = parent.frames.length;
 if (windowLen == 0 && parentLen >= 1) {
 this.isInIframe = true
 console.log('Is in Iframe!')
 } else {
 console.log('Is in main window!')
 }
}

Answer 14

It's an ancient piece of code that I've used a few times:

if (parent.location.href == self.location.href) {
 window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468';
}

• piotr_cz: To add to Eneko Alonso: this works (parent.location == self.location)
• Dan: @piotr_cz, it works only if same-origin policy allows access to parent.location. Otherwise an exception is thrown

Answer 15

If you want to know if the user is accessing your app from facebook page tab or canvas check for the Signed Request. If you don't get it, probably the user is not accessing from facebook. To make sure confirm the signed_request fields structure and fields content.

With the php-sdk you can get the Signed Request like this:

$signed_request = $facebook->getSignedRequest();

You can read more about Signed Request here:

https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest/

and here:

https://developers.facebook.com/docs/reference/login/signed-request/

Answer 16

This ended being the simplest solution for me.

 <p id="demofsdfsdfs"></p>
<script>
if(window.self !== window.top) {
//run this code if in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "in frame";
}else{
//run code if not in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "no frame";
}
</script>

Answer 17

if (window.frames.length != parent.frames.length) { page loaded in iframe }

But only if number of iframes differs in your page and page who are loading you in iframe. Make no iframe in your page to have 100% guarantee of result of this code

• Percy: Not a very elegant solution to determining whether or not the window is inside an iframe or not, and there's no guarantee you'll be able to read from parent.frames either.
• TheMaster: @Percy why not? Isn't window.frames is allowed cross origin property?

Answer 18

Write this javascript in each page

if (self == top)
 { window.location = "Home.aspx"; }

Then it will automatically redirects to home page.

• Marius Balčytis: Your redirect will work when you're not if frame. So I would not be able to navigate in your site. Secondly, techniques exists to prevent from redirecting from the parent page.