3

NOTE I read all the related questions regarding this issue but i couldn't find a solution for my problem.

Facebook Login API HTTPS Issue

Facebook: Unsafe JavaScript issue (document.domain values should be same)

I'm facing the blocked frame facebook api issue:

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.

i followed the facebook api tutorial and i'm using this code.

     window.fbAsyncInit = function() {
        FB.init({
          appId      : 'appID',
          status     : true,
          channelUrl : 'http://staging.mywebsite.com/login/channel',
          cookie     : true,
          xfbml      : true 
        });

        FB.login(function(response) {
            if (response.authResponse) {
                console.log('done');
            } else {
                console.log('problem');
            }
        });

        FB.Event.subscribe('auth.login', function(response) {
            console.log('test reponse');
            console.log(response);

        }); 
      };

      (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));

/login/channel contains: 

     $cache_expire = 60*60*24*365;
     header("Pragma: public");
     header("Cache-Control: max-age=".$cache_expire);
     header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
     echo '<script src="//connect.facebook.net/en_US/all.js"></script>';

fb login button: 

     <fb:login-button width="200" max-rows="1" scope="email,user_birthday,user_interests,user_likes,user_location,user_hometown,user_mobile_phone,user_address"></fb:login-button>

I tried this too but it didn't fix the problem:

      channelUrl : '//staging.mywebsite.com/login/channel', //same issue

did i miss anything ? or maybe i should change something in the fb app settings?

Community
  • 1
  • 1
trrrrrrm
  • 11,362
  • 25
  • 85
  • 130
  • 1
    Perhaps this isn't really helpful, but just wanted to let you know that I get these errors all the time in the console. Nevertheless, everything still works as expected, so its just ugly rather than actually a problem. In other words, if you are experiencing a problem this is likely not the cause of it... – Aron Sep 19 '13 at 23:45
  • 1
    True, I couldn't overcome the problem so far, but everything is working, but still i don't like code that generates errors. so still trying to find a solution for that. – trrrrrrm Sep 20 '13 at 04:13
  • Also one thing i noticed, this problem happened when i was using staging.myserver.com and disappeared on my actual myserver.com when i pushed the code to production. – trrrrrrm Sep 20 '13 at 04:14

1 Answers1

0

It looks like you might need to modify the code below to go over https

(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 = "https://connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

Also, src="//domain.com will inherit the protocol. You could try:

echo '<script src="https://connect.facebook.net/en_US/all.js"></script>';
Bas Kuis
  • 748
  • 1
  • 7
  • 20