Facebook Login API HTTPS Issue

Question

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>

I keep checking back for an answer on this too. It seems like a recent Chrome/Safari security update has killed all Facebook interaction when it involves opening a modal in a separate window. The protocol mismatch error (above) is especially frustrating as the developer has no control over the protocols used. — Mike_K, Jun 04 '13 at 20:15
Hmm... I checked in Firefox which also doesn't work, but it reports that "[16:51:47.802] Use of Mutation Events is deprecated. Use MutationObserver instead. @ https://fbstatic-a.akamaihd.net/rsrc.php/v2/y4/r/dePwLAaASOW.js:59" — SapphireSun, Jun 04 '13 at 20:52
The Facebook iFrame errors and the Firefox "Use of Mutation Events is deprecated" errors happen all the time and are probably not the problem. What does your site do when it is called back by the Facebook authorization flow? — Old Pro, Jun 10 '13 at 04:58
I don't have posibility to test but can you change this line `js.src = "//connect.facebook.net/en_US/all.js";` to `js.src = "http://connect.facebook.net/en_US/all.js";`fo forcing use http protocol for sciprt? — WooCaSh, Jun 12 '13 at 16:43

score 6 · Answer 1 · edited Oct 13 '14 at 14:45

6

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>

edited Oct 13 '14 at 14:45

Max Leske

5,007
6
42
54

answered Jun 06 '13 at 07:36

ShawnDaGeek

4,145
1
22
39

I am using a popup separate window for the facebook login. I don't know if that counts as a pluggin. I do know that there are several iframes embedded by the SDK code. For what it's worth, this code (with the relevant parts customized) is present at the foot of my application. – SapphireSun Jun 06 '13 at 18:23
1

Sorry Sapphire, with out seeing your code and how everything is layed out i can not help you much further than instructing you to exchange your JS SDK for the Async version. – ShawnDaGeek Jun 06 '13 at 18:33
1

I added the code that is at the foot of my page to the question at the top. – SapphireSun Jun 07 '13 at 01:49
1

It is recommended to place the JS SDK near or as close to the tag as possible. Order of things. Basicly you want the sdk loaded before you try to load any social plugins, or there will be errors. In addition to this, you could write you plugins to the DOM from with in the async and use xFBML to init them, after the sdk has loaded. – ShawnDaGeek Jun 07 '13 at 02:08

score 3 · Answer 2 · edited Jul 19 '13 at 13:59

3

I had the same issue on my development environment. Steps to solve (not sure which one did it):

Log out of the application.
Delete all cookies from the browser.
Log in to FB as the intended user (not to the developer page but to the user app permissions page).
Delete the app permission from the FB permissions page.
Log out of FB.
Reload the app and try to log in.

I would not have answered in such a voodoo answer unless I had spent some hours on it, and would value any sort of witchcraft to get me out of it.

edited Jul 19 '13 at 13:59

matkins

1,991
1
16
22

answered Jul 19 '13 at 13:37

Yuval Dimnik

93
5

Indeed. That was my issue. Easy to test - load the browser in incognito/private mode. if the errors go away then it seems to indicate a cookie/session issue. – cyberwombat May 03 '16 at 22:30

score 1 · Answer 3 · answered Jun 12 '13 at 12:40

i've been with this problem...
my solution:
move your facebook call to static page...

(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/pt_BR/all.js#xfbml=1&appId=IDDDD";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

set a ajax callback:

try{setTimeout(FB.XFBML.parse);}catch(e){}

happy :)

jquery example:

$(document).ajaxComplete(function(){
            try{
                setTimeout(FB.XFBML.parse);
            }catch(ex){}
        });

score -3 · Accepted Answer · answered Oct 04 '13 at 18:39

-3

For what it's worth, I managed to fix this issue by converting to HTTPS (which is what I should have been doing anyway).

answered Oct 04 '13 at 18:39

SapphireSun

9,170
11
46
59

Facebook Login API HTTPS Issue

4 Answers4

Linked