60

My sample Facebook app was working great yesterday in Chrome. The page integrates Silverlight ad Facebook via the JavaScript SDK. I can check basic login status, login to Facebook, get your name and log out.

Today, with no changes on my part, it's broken in Chrome with a JavaScript error that's very common on Google search results, but no real answers. It still works great in IE and Firefox.

Here's the public URL:

http://www.andrewdothay.net/prj/facebook/

When you open the JavaScript console in Chrome, it throws tons of these errors:

Unsafe JavaScript attempt to access frame with URL

http://www.facebook.com/login.php?api_key=151352704876752&cancel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df1175dd3f%26origin%3Dhttp%253A%252F%252Fwww.andrewdothay.net%252Ff304d89d8%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df3760623c%26result%3DxxRESULTTOKENxx&channel_url=http%3A%2F%2Fwww.andrewdothay.net%2Fprj%2Ffacebook%2F&display=popup&fbconnect=1&locale=en_US&method=auth.login&next=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df3c546942%26origin%3Dhttp%253A%252F%252Fwww.andrewdothay.net%252Ff304d89d8%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df3760623c%26result%3DxxRESULTTOKENxx&return_session=1&sdk=joey&session_version=3&v=1.0 from frame with URL http://www.andrewdothay.net/prj/facebook/.

Domains, protocols and ports must match.

Any ideas on what's going on with Chrome here?

Update

I discovered that Chrome on today's machine was blocking the login pop-up when I was calling FB.login(), but I know I wasn't getting those 190 error messages in the JavaScript console yesterday.

So, when I allow pop-ups in Chrome, it does work for an end user, but all those new error messages are killing my diagnostic experience as a developer.

a7drew
  • 7,801
  • 6
  • 38
  • 39
  • Very odd. I get this error fairly often on facebook apps in chrome, and sometimes something similar in FF. However I usually get the error just once, and then everything works as expected. – Matt Aug 26 '10 at 18:08

8 Answers8

29

I've found the solution. If you execute FB.login without user action, webkit blocks the popups.

For instance, I used an invite system on my project. There was a input/text to enter invitation code. I checked the invitation code is available with an ajax/post request. if it is available, I run FB.login(). As you guess, browser blocked popup and tons of errors appeared at js console.

So you must run FB.login() after a user action. I'll put a facebook login button between ajax/post and FB.login(). Users'll have to click it -thats sucks- but they'll not see a problem.

Btw, the problem reoccurs after a few days. I think it's about trust system of browser. When you're developing it, you visit lots of times, browser thinks it's reliable at first. I'm not sure about this part but my solution works.

Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
Mücahit Yılmaz
  • 617
  • 7
  • 17
  • 1
    So does this mean we can't use the FB.Event.subscribe('auth.statusChange', onStatus); ? – BeaverProj Nov 21 '11 at 21:11
  • 1
    @BeaverProj I did'n try that so, I don't know. – Mücahit Yılmaz Mar 23 '12 at 13:53
  • How close does the user action need to be to the FB.login call? I'm getting a popup but it just says "an error occoured. please try again later". I've got a button calling a function, that then itself calls FB.login. Do you think that's not direct enough? – Pete Oct 11 '12 at 21:52
  • @Skeater I can't say definitely without preview of your code but using jquery, $(x).click(function(){ FB.login () ... }) is enough. – Mücahit Yılmaz Oct 12 '12 at 07:18
  • I've got another SO post about it: http://stackoverflow.com/questions/12849065/facebook-javascript-sdk-login-problems-in-chrome-safari-webkit-unsafe-javasc I'd appriciate it if you could take a look. – Pete Oct 12 '12 at 07:31
5

In my case it was because of facebook JS loaded multiple times at single page: one for login and second for "like" button. Removing reference in "like" module saves the day.

Meta
  • 425
  • 7
  • 20
  • 1
    Similar for me. I was calling FB.init after initialising the SDK with URL //connect.facebook.net/en_US/all.js#xfmbl=1&appId=[appId] - I think the xfmbl=1 causes an implicit FB.init, although the facebook documentation isn't conclusive about this. When I removed the separate call to FB.init, the problem disappeared. – xgretsch May 10 '12 at 08:35
  • `xfmbl` (which must be read "transfumble") doesn't seem to make a difference. I had exactly the same problem. – Potatoswatter May 20 '12 at 14:58
2

In my case the problem was related to <div id="fb-root"></div> tag. I wasn't putting it immediatly after the opening <body> tag, as recommended by the docs.

After putting it in the right place, the "Unsafe JavaScript..." error stopped.

fjsj
  • 10,995
  • 11
  • 41
  • 57
2

Removing the 'xfbml : true' option from my FB.init call fixed this for me.

I was having the problem in the default internet browser on Android Jelly Bean

Pakage
  • 684
  • 7
  • 12
2

Mücahit Yılmaz is correct. Take the example I pasted below and if you use the setTimeout() method it fails, other wise it works. I still get the warning message in a loop until I properly login but it's a small price to pay. I'm sure users won't see it.

$(document).ready(function() {
$("#facebook_link").click(function() {
    //setTimeout(fb);
    fb();
    return false;
});

function fb() {
    FB.getLoginStatus(function(response) {
        if (response.session) {
            // logged in and connected user, someone you know
            gotResponse(response);
        } else {
            // no user session available, someone you dont know
            FB.login(function(response) {
                if (response.session) {
                    // user successfully logged in
                    gotResponse(response);
                } else {
                    // user cancelled login, do nothing
                }
            });
        }
    });
}

function gotResponse(response) {
    console.dir(response);
}

});

It's easy to reproduce: login to facebook in another tab, then try this code and you'll see no warnings. Logout, then try the code and you get the warnings. It's because it hits the .login block.

mdeanda
  • 185
  • 1
  • 5
1

And in my case the problem was related to type of protocol: from:

<div class="fb-like-box" data-href="https://www.facebook.com/xxxxxx"

to:

<div class="fb-like-box" data-href="http://www.facebook.com/xxxxxx"

as my web store didnt use https I removed 's' from data-href attribute of the likebox.

Michal - wereda-net
  • 940
  • 9
  • 14
  • 2
    I think you can just put //www.facebook.com/.... See:http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just – Joshua Goossen Nov 22 '14 at 16:18
1

I had this problem with a chrome browser and it was due to my chrome settings. I had the browser set to disallow 3rd parties sites from setting cookie data. Allowing Pop-ups was not an issue for me. When the facebook iFrame is created it must set a cookie that it then uses to track if the user needs to login. If that cookie isn't allowed to be set then the site fails. One thing that would be useful in the facebook api would be a setting that shows when something is failing. I do not see that as an event that one can subscribe to and assign a callback.

Here is a link to the FB javascript sdk on subscriptions. Any response on finding a callback for failed requests would be appreciated.
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

Molomby
  • 5,859
  • 2
  • 34
  • 27
George Foster
  • 11
  • 1
0

Mücahit Yılmaz's solution worked for me, as well. I didn't need to access the user's information, so I removed the login script from the sample app. Also removed the Welcome message and any information requiring info stored in the $basic variable.

deewilcox
  • 852
  • 2
  • 12
  • 24