Rohit Joshi February 2016

Can I stop my HTML page from loading until after my Facebook login status script has run?

I am using the Facebook Javascript SDK to enforce that users who access my site must be logged into Facebook. I'm using the function StatusChangeCallback to redirect visitors to a Facebook login page if they aren't logged into Facebook. I have copied a snippet of my script below, which is in the Head tag of my web page.

This works fine, except that I notice that my page loads momentarily before the script redirects the visitors to a login page. That means that visitors can click the "Stop" button and bypass this redirect functionality.

Is there a way to prevent the page from loading until after my Facebook login script has completed?

    <script>
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') {
      //Continue loading the page 
    } else if (response.status === 'not_authorized') {
      window.location.href = "facebook.html";
    } else {
      window.location.href = "facebook.html";
    }
  }

Answers


Blue Boy February 2016

You could hide the page using css

html { visibility:hidden; }

And then set it to visible after your script has ran with javascript/jquery

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});


rotato poti February 2016

Can you place the checking function on a page that they are coming from? Maybe the link that they press to get there?


Will February 2016

How important is it to you that people are logged in before they see the content? If 'very' important, you should know that most everything relying on JS alone will be circumventable.

For instance, this seems like it might work (presuming no need-to-be-logged-in content is on your landing page):

...
if (response.status === 'connected') {
   // jQuery for brevity
   $('#your-wrapper').load('path/to/authenticated/content.html');
} else if (response.status === 'not_authorized') {
   window.location.href = "facebook.html";
} ...

but there's nothing to stop a user with a browser console from seeing that URL and visiting it directly.

I'm assuming FB sends you some sort of token back within response. You could add that to your ajaxy content load as a sort of 'key' but again, easy to fake from the browser without an additional layer of server side authentication.

You might get an extra 1/2 security point by making 'path/to/authenticated/content.html' only respond to requests from the same server by using old Apache "Anti-hotlinking" tricks. https://httpd.apache.org/docs/2.2/rewrite/access.html#blocked-inline-images

Post Status

Asked in February 2016
Viewed 1,724 times
Voted 4
Answered 3 times

Search




Leave an answer