Chrome-only cross-domain scripting errs in Facebook iFrame App upon FB.Login(..)

Question

In Google Chrome (I'm on 9.0.597.98) my Facebook iFrame app using Graph API/Javascript SDK tends to always throw the following two JavaScript errors (see below) based on cross-domain scripting, but only on one page of the app.

It goes into an endless retry loop on the second message. After leaving it overnight, it reported a half million retries by this morning!

The FB call being used is for login:

FB.login(function(response) {
  if (response.session) {
    // user successfully logged in
  } else {
    // user cancelled login
  }
});

In Firefox and IE9 I do not get these errors. It's specific to Chrome (maybe WebKit). What's odd is I have a second page in the app that uses FB.Login and it works in Chrome in addition to the other browsers. I read somewhere that Safari has more stringent requirements on cross domain scripting - it and Chrome share the same code base.

Domains, protocols and ports must match (error message) I believe is actually satisfied because I have another page that works with the FB.Login call The only other difference I see between these two messages is the postmessage query argument has a different value for each (bolded in the messages). However there is only one iFrame that constitutes a Facebook app so I wonder why two different values might be used one after the other. I don't mean to lead answers to focus on this item, but I did want to point it out.

Suggestions are welcome as to what I might try to resolve this errors.

Chrome JavaScript Console Messages:

Message 1: Unsafe JavaScript attempt to access frame with URL

https://www.facebook.com/dialog/permissions.request?api_key=168297653202478&app_id=168297653202478&display=popup&fbconnect=0&locale=en_US&method=permissions.request&next=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df3d15633dc%26origin%3Dhttp%253A%252F%252Fsubdomain.example.com%252Ff22a8befa%26relation%3Dopener%26transport%3D postmessage %26frame%3D f111baf6f4 %26result%3D%2522xxRESULTTOKENxx%2522&perms=publish_stream%2Coffline_access&return_session=1&sdk=joey&session_version=3 from frame with URL http://subdomain.example.com/colonversationmap/Admin.TestPage.aspx?signed_request=871miFgH_-o05POnx20387XHd2YlArKLU6qUv8VkxY4.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImlzc3VlZF9hdCI6MTI5ODQyMDEwMSwidXNlciI6eyJjb3VudHJ5IjoiY2EiLCJsb2NhbGUiOiJlbl9VUyIsImFnZSI6eyJtaW4iOjIxfX19. Domains, protocols and ports must match.

Message 2: Unsafe JavaScript attempt to access frame with URL

https://www.facebook.com/dialog/permissions.request?api_key=168297653202478&app_id=168297653202478&display=popup&fbconnect=0&locale=en_US&method=permissions.request&next=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df304d46e08%26origin%3Dhttp%253A%252F%252Fsubdomain.example.com%252Ff23ce8203%26relation%3Dopener%26transport%3D postmessage %26frame%3D fcd3637bc %26result%3D%2522xxRESULTTOKENxx%2522&perms=publish_stream%2Coffline_access&return_session=1&sdk=joey&session_version=3 from frame with URL http://subdomain.example.com/colonversationmap/Admin.TestPage.aspx?signed_request=871miFgH_-o05POnx20387XHd2YlArKLU6qUv8VkxY4.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImlzc3VlZF9hdCI6MTI5ODQyMDEwMSwidXNlciI6eyJjb3VudHJ5IjoiY2EiLCJsb2NhbGUiOiJlbl9VUyIsImFnZSI6eyJtaW4iOjIxfX19. Domains, protocols and ports must match.

Answer 1

I also ran into an issue where the getLoginStatus() was not being called in Chrome. I tried calling it on page load and after a user-initiated action with no success.

It turned out that it was not a cross-domain issue. The call was being blocked by the Un-Passwordise extension in Chrome. As soon as I disabled the extension, it worked perfectly, even on page load.

More info about this issue here: FB.getLoginStatus never fires the callback function in Facebook's JavaScript SDK

Answer 2

For my case, it turned out that Chrome complained whenever I called the Facebook JavaScript API's FB.login(..) method immediately upon Page or DOM load.

To circumvent this problem in Chrome I put a button on the page that the user must click to initiate the login script. That works in Chrome. It's a workaround but good enough for me for now.

note: For the secondary page that I mentioned in my question that works, it already was set up for user-initiated login prompt.

Answer 3

Adding a channel file may help this problem. See the Facebook Javascript API documentation: https://developers.facebook.com/docs/reference/javascript/

Answer 4

I had this problem on my site, but turned out I was using old version of FB.login.

From Facebook FB.login page:

As of December 13th, 2011, the JavaScript SDK now only supports OAuth 2.0 for authentication. The ability to enable OAuth 2.0 in the JS SDK was first introduced in July. All apps were given until October 1, 2011 to test and migrate. With this change, please ensure that you replaced response.session with response.authResponse. To ask for permissions, you must use scope instead of perms. Read more about the specific changes here.