Facebook Login API HTTPS Issue

SapphireSun picture SapphireSun · Jun 3, 2013 · Viewed 17.7k times · Source

The website I'm working on has a Facebook login option, but recently a user reported it wasn't working for them. I disabled my extensions etc, I got this error in my console:

Blocked a frame with origin "https://www.facebook.com" from accessing a frame 
with origin "http://static.ak.facebook.com".  The frame requesting access has 
a protocol of "https", the frame being accessed has a protocol of "http". 
Protocols must match.

Is there an option I can feed to the API that will get it to work on the same protocols? FYI, the primary website runs on HTTP (no S).

It is especially odd because it seems like it stopped working all of a sudden (but it is possible this was always a problem as I am new and am learning this system).

I have this code at the foot of my page:

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : ..., // App ID
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true,  // parse XFBML
            channel: '//...mychannel.../channel'
        });

        FB.Event.subscribe('auth.authResponseChange', function(fbResponse) {
            // function that logs in user
        });
    };

    // Load the SDK Asynchronously
    (function(d){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));
</script>

Answer

Shawn E Carter picture Shawn E Carter · Jun 6, 2013

If you are not loading the javascript sdk async, you could see this error a lot.

refer to: https://developers.facebook.com/docs/javascript/quickstart

in addition, if you are using any Facebook plugins via the iframe code, be sure the src url protocol matches.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>