Member Avatar for DaveyMoyes

Hi all, I have a facebook page tab application that is hosted on my server.
If I navigate to the FQD location the page will load as you would expect.

What I would like to do is detect if the page is being loaded inside an iframe, ie. being displayed from inside facebook, from the page tab application. ie.

If the page is being displayed from outside of facebook, ie. domainname.com/dir/facebook-app is in the address bar of the browser, I would like to auto redirect the page to the facebook page tab application url.

I have found the following code, but my page just loops ?

    <script type="text/javascript">
    top.location.href = "";
    </script>

I have a variable called $token that is the full path
How can I edit the script to first detect if the page is being loaded within a iframe and secondly auto redirect the header location, using the $token variable if the page is being loaded from the address bar url.

  • 1 Contributor
  • 1 Reply
  • 4K Views
  • 40 Minutes Discussion Span
  • Latest Post Latest Post by DaveyMoyes

Dani AI

Generated

The redirect loop happens because the page always tells the top window to navigate, including when it is already inside Facebook’s iframe. Instead, only redirect when the page is not framed. A reliable client-side test is to compare the current window to the top window; if they are the same, you are outside any iframe and can safely navigate to your Page Tab URL. Using location.replace avoids polluting browser history.

<script>
  // Only run this when your app is not inside an iframe
  if (window.top === window.self) {
    window.location.replace("https://www.facebook.com/pagename/app_257600168717381");
  }
</script>

Avoid reading parent.location or similar across origins (e.g., from facebook.com to your domain); modern browsers block cross-origin frame reads by design. Use the simple top-vs-self check instead. For Page Tabs specifically, a robust server-side fallback is to look for the platform’s signed POST payload (e.g., signed_request); if it is missing, issue a 302 to your tab URL. Finally, harden your app by allowing only Facebook to frame it with a response header such as: Content-Security-Policy: frame-ancestors https://www.facebook.com https://*.facebook.com (and optionally X-Frame-Options: SAMEORIGIN for legacy browsers). This prevents unexpected embeds and reduces clickjacking risk. See MDN on window.top/window.self, the Same-Origin Policy, and frame-ancestors for details. MDN Window.top, MDN Window.self, MDN Same-origin policy, MDN CSP frame-ancestors.

Member Avatar for DaveyMoyes

Ok, I have found a working script. Just thought I would post the answer I found to help others.

<script type="text/javascript">

    var framespage="<?php if($token){echo $token; }?>" //This is the frames page for your page.

    //No need for editing below here.
    if (top.location==document.location){
      top.location=framespage;
    }else{
      var parent_location=parent.location.href;
      var str_beginning=parent_location.length-framespage.length;
      if (parent_location.substring(str_beginning, parent_location.length)!=framespage){
        parent.location=framespage;
      }
    }

</script>

Hope this helps others.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.