Let's say normally my users access our web page via

Inside this web page, we have a iframe which actually es from

Everything is working fine, except that if for some reason, the users e to know about this url . They can start accessing it directly by typing into the address bar.

This is what I want to prevent them from doing. Is there any best practice to achieve this?

==== Update to provide more background ====

The parent page which is is the pany's page and it's maintained by some other team. So they have all the generic header and footer, etc. so each application is rendered as an iframe inside it. (This also means we cannot change the parent page's code)

If users access directly, they won't be able to see the header and footer. Yes, it's not a big deal, but I just want to maintain the consistency.

Another of my concern is that, in our dev environment (aka when running the page locally) we don't have the parent-iframe thing. We access our page directly from http://localhost:port. Hence I want to find a solution that can allow us access it normally when running locally as well.

If such solution simple does not exist, please let me know as well :)

Let's say normally my users access our web page via https://www.mypany./go/mybusinessname

Inside this web page, we have a iframe which actually es from https://www.mypany./myapp

Everything is working fine, except that if for some reason, the users e to know about this url https://www.mypany./myapp. They can start accessing it directly by typing into the address bar.

This is what I want to prevent them from doing. Is there any best practice to achieve this?

==== Update to provide more background ====

The parent page which is https://www.mypany. is the pany's page and it's maintained by some other team. So they have all the generic header and footer, etc. so each application is rendered as an iframe inside it. (This also means we cannot change the parent page's code)

If users access https://www.mypany./myapp directly, they won't be able to see the header and footer. Yes, it's not a big deal, but I just want to maintain the consistency.

Another of my concern is that, in our dev environment (aka when running the page locally) we don't have the parent-iframe thing. We access our page directly from http://localhost:port. Hence I want to find a solution that can allow us access it normally when running locally as well.

If such solution simple does not exist, please let me know as well :)

• javascript
• jquery
• iframe

• Have the IFRAME call into the outer parent frame using Javascript to validate itself. Nominally this won't work directly browsing (I say nominally because with enough effort, anything is possible). – Lloyd Commented Apr 17, 2015 at 8:56
• possible duplicate of Detect iFrame embedding in Javascript – C3roe Commented Apr 17, 2015 at 9:06

3 Answers 3

On your iframe's source, you can check the parent's window by using window.top.location and see if it's set to 'https://www.mypany./go/mybusinessname'. If not, redirect the page.

var myUrl = 'https://www.mypany./go/mybusinessname';

if(window.top.location.href !== myUrl) {
    window.top.location.href = myUrl;
}

I realized we already had a function to determine whether the page in running under https://www.mypany.. So now I only need to do the below to perform the redirecting when our page is not iframe

var expectedPathname = "/go/mybusinessname";
var getLocation = function (href) {
    var l = document.createElement("a");
    l.href = href;
    return l;
};
if (window == window.top) { // if not iframe
    var link = getLocation(window.top.location.href);
    if (link.pathname !== expectedPathname) {
        link.pathname = expectedPathname;
        window.top.location.replace(link.href);
    }
}

You can use HTTP referer header on server-side. If the page is opened in IFRAME - the referer contains parent page address. Otherwise, it is empty or contains different page.