How to disable direct access to Iframe

Question

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

Inside this web page, we have a iframe which actually comes from https://www.mycompany.com/myapp

Everything is working fine, except that if for some reason, the users come to know about this url https://www.mycompany.com/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.mycompany.com is the company'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.mycompany.com/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 :)

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, Apr 17 '15 at 08:56
possible duplicate of [Detect iFrame embedding in Javascript](http://stackoverflow.com/questions/925039/detect-iframe-embedding-in-javascript) — CBroe, Apr 17 '15 at 09:06

score 4 · Answer 1 · answered Apr 17 '15 at 16:18

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.mycompany.com/go/mybusinessname'. If not, redirect the page.

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

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

score 0 · Accepted Answer · answered Apr 20 '15 at 04:24

0

I realized we already had a function to determine whether the page in running under https://www.mycompany.com. 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);
    }
}

answered Apr 20 '15 at 04:24

harry

115
3
11

The statement evaluating if window == window.top and the getLocation function is redundant. location.href already returns the URL and includes the pathname. In fact, your way leaves a security hole. Someone can spoof a file called /go/mybusinessname on their website and open your 'myapp' link in an iframe. Your safest solution is to evaluate the entire URL and ensure it matches your company URL (or an array of acceptable URLs). See my answer for details. – Walker Boh Apr 20 '15 at 17:25

score -1 · Answer 3 · answered Apr 17 '15 at 09:06

-1

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.

answered Apr 17 '15 at 09:06

Oleg K.

1,549
8
11

How to disable direct access to Iframe

3 Answers3