Home/ Questions/Q 7679337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T17:51:17+00:00

Original Post: I am trying to use the Client-side Authentication with the Javascript SDK

  • 0

Original Post:

I am trying to use the “Client-side Authentication with the Javascript SDK” on Chrome for OS X (17.0.963.83). The code is copied directly from the Facebook example (with the YOUR_APP_ID updated):

<!DOCTYPE html>
<html>
  <head>
    <title>Facebook Client-side Authentication Example</title>
  </head>
  <body>
    <div id="fb-root"></div>
    <script>
      // 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));

      // Init the SDK upon load
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'YOUR_APP_ID', // App ID
          channelUrl : '//'+window.location.hostname+'/channel', // Path to your Channel File
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });

        // listen for and handle auth.statusChange events
        FB.Event.subscribe('auth.statusChange', function(response) {
          if (response.authResponse) {
            // user has auth'd your app and is logged into Facebook
            FB.api('/me', function(me){
              if (me.name) {
                document.getElementById('auth-displayname').innerHTML = me.name;
              }
            })
            document.getElementById('auth-loggedout').style.display = 'none';
            document.getElementById('auth-loggedin').style.display = 'block';
          } else {
            // user has not auth'd your app, or is not logged into Facebook
            document.getElementById('auth-loggedout').style.display = 'block';
            document.getElementById('auth-loggedin').style.display = 'none';
          }
        });

        // respond to clicks on the login and logout links
        document.getElementById('auth-loginlink').addEventListener('click', function(){
          FB.login();
        });
        document.getElementById('auth-logoutlink').addEventListener('click', function(){
          FB.logout();
        }); 
      } 
    </script>

    <h1>Facebook Client-side Authentication Example</h1>
      <div id="auth-status">
        <div id="auth-loggedout">
          <a href="#" id="auth-loginlink">Login</a>
        </div>
        <div id="auth-loggedin" style="display:none">
          Hi, <span id="auth-displayname"></span>  
        (<a href="#" id="auth-logoutlink">logout</a>)
      </div>
    </div>

  </body>
</html>

When I click on “Login”, the Facebook pop-up window appears. I click on “Log In with Facebook”, the pop-up disappears, and the “auth-loggedin” div appears along with my name and the logout link. However, when I refresh the page, the page loses its Facebook authorization status and returns to the logged-out state.

The expected behavior would be for the page to remain in the logged-in state.

Using the console, I noticed that the fbsr cookie appears temporarily, and disappears once the page is refreshed. In addition, the following error is caught in the console:

Unsafe JavaScript attempt to access frame with URL https://s-static.ak.fbcdn.net/connect/xd_proxy.php#cb=f16adb7b1c&origin=http%3A%2F%2F%5BBASE DOMAIN]%2Ff22295b918&relation=opener&transport=postmessage&frame=f3e8d40458&access_token=[ACCESS TOKEN]&expires_in=4221&signed_request=[SIGNED REQUEST]&base_domain=[BASE DOMAIN] from frame with URL [MY CODE URL]#. Domains, protocols and ports must match.

I made sure that the channel file was available and am unable to reproduce this error in Firefox or Safari on OS X or on IE, Firefox, or Chrome on Windows. Any ideas? I can work around this using server-side authentication but prefer to use client-side, if possible.

1st EDIT: Further testing

So I now think that the “Unsafe JavaScript” error is a red herring. I am using the channel file, but it is not being hit either in Firefox or Chrome.

Looking at the network traffic on Firefox vs Chrome, when the page first loads, and assuming I’m logged into Facebook on both browsers, I see the following requests being processed:

Firefox

  • [facebook url]/dialog/oauth?api_key=[app_id]&app_id=[app_id]&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df24509714bbf8d%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ff193ade24ab412%26relation%3Dparent.parent%26transport%3Dpostmessage&client_id=[app_id]&display=none&domain=[base_domain]&locale=en_US&origin=1&redirect_uri=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2b6c8dce7b8936%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ff193ade24ab412%26relation%3Dparent%26transport%3Dpostmessage%26frame%3Df22112636bf762a&response_type=token%2Csigned_request%2Ccode&sdk=joey

  • [ssl facebook url]/dialog/oauth?api_key=[app_id]&app_id=[app_id]&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df24509714bbf8d%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ff193ade24ab412%26relation%3Dparent.parent%26transport%3Dpostmessage&client_id=[app_id]&display=none&domain=[base_domain]&locale=en_US&origin=1&redirect_uri=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2b6c8dce7b8936%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ff193ade24ab412%26relation%3Dparent%26transport%3Dpostmessage%26frame%3Df22112636bf762a&response_type=token%2Csigned_request%2Ccode&sdk=joey

  • [ssl fbcdn url] /connect/xd_proxy.php#cb=f2b6c8dce7b8936&origin=http%3A%2F%2F[base_domain]%2Ff193ade24ab412&relation=parent&transport=postmessage&frame=f22112636bf762a&code=2.AQBMIMy0rSFAnqaA.3600.1332514800.1-5322361%7CU-RUi4ON2SbzfzzDT03CTeT-DgQ&signed_request=[signed_request]&access_token=[access_token]&expires_in=4302&base_domain=[base_domain]&https=1

Chrome

  • [facebook url] /dialog/oauth?api_key=[app_id]&app_id=[app_id]&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df1b2a93294%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ffdca87bc8%26relation%3Dparent.parent%26transport%3Dpostmessage&client_id=[app_id]&display=none&domain=[base_domain]&locale=en_US&origin=1&redirect_uri=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df14d4dd364%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ffdca87bc8%26relation%3Dparent%26transport%3Dpostmessage%26frame%3Df230336ee8&response_type=token%2Csigned_request%2Ccode&sdk=joey

  • [ssl fbcdn url] /connect/xd_proxy.php#cb=f14d4dd364&origin=http%3A%2F%2F[base_domain]%2Ffdca87bc8&relation=parent&transport=postmessage&frame=f230336ee8&error=unknown_user

I imagine this is because Chrome does not have the fbsr cookie set; which is a long way of leading me back to my original question. Why isn’t Chrome setting the fbsr cookie (and, does it have something to do with the “Unsafe JavaScript attempt to access frame with URL” since that is sending the signed_request value in the hash?)

After all that, I’m going with bug. Unless anybody has a better idea!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Reported as a bug

    See https://developers.facebook.com/bugs/290064861064054

    It would appear that the issue has to do with Chrome settings. Specifically, the browser was set to reject third-party cookies. Once I allowed third-party cookies, then the fbsr_x cookie was set and the login state persisted across reloads. I’m not sure why Chrome is considering this to be a third-party cookie but I confirmed that the behavior is consistent across platforms and not just OS X.

    • 0