Facebook gives "Unsafe JavaScript attempt to access frame with URL" error in Chrome
JavascriptFacebookGoogle ChromeJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
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.
Solution 4 - Javascript
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.
Solution 5 - Javascript
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
Solution 6 - Javascript
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/>
Solution 7 - Javascript
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.
Solution 8 - Javascript
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.