Javascript – Facebook gives “Unsafe JavaScript attempt to access frame with URL” error in Chrome

facebookgoogle-chromejavascript

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.

Best Answer

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.