Facebook gives "Unsafe JavaScript attempt to access frame with URL" error in Chrome

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.