I am trying to implement Facebook Login System into my website.
While it try to connect to facebook, I get an error from console log:
Unsafe JavaScript attempt to access frame with URL .php?xxxxxxxxxxxxxxxx
I am using JavaScript SDK
I added this in the body tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Facebook Login button:
<div class="fb-login-button" data-perms="email">Login with Facebook</div>
I am testing from localhost - I have register my website on facebook develop apps (Site URL: http://localhost)
How to fix this problem? or should I use PHP SDK?
Edit: Same problem when I uploaded to server with public domain.
I am trying to implement Facebook Login System into my website.
While it try to connect to facebook, I get an error from console log:
Unsafe JavaScript attempt to access frame with URL https://s-static.ak.fbcdn.net/connect/xd_proxy.php?xxxxxxxxxxxxxxxx
I am using JavaScript SDK
I added this in the body tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Facebook Login button:
<div class="fb-login-button" data-perms="email">Login with Facebook</div>
I am testing from localhost - I have register my website on facebook develop apps (Site URL: http://localhost)
How to fix this problem? or should I use PHP SDK?
Edit: Same problem when I uploaded to server with public domain.
Share Improve this question edited Nov 4, 2011 at 17:20 I'll-Be-Back asked Nov 4, 2011 at 16:57 I'll-Be-BackI'll-Be-Back 10.8k42 gold badges118 silver badges224 bronze badges 5- Your script is hindered by the Same origin policy - en.wikipedia.org/wiki/Same_origin_policy – Rob W Commented Nov 4, 2011 at 16:58
- 2 So what is the workaround? I am using Chrome – I'll-Be-Back Commented Nov 4, 2011 at 17:01
- Talking with others that have used the Facebook API in the past, and what has been mentioned in some of the answers below, it seems testing from local host has issues. Try setting up a non-localhost test server. – ToddBFisher Commented Jan 3, 2012 at 5:52
- I see this error with the Google +1 button too. It's specific to chrome. stackoverflow.com/questions/5660116/… – sdolgy Commented Jan 11, 2012 at 10:14
- 1 Known Chrome issue. Don't waste time like I did trying to remedy this :) – grantwparks Commented Mar 3, 2012 at 16:37
7 Answers
Reset to default 4The error that you see there is a non-fatal error. There is no workaround for this, as your browser is advising you that it is not a great idea to load JavaScript from foreign domains. Just ignore this message and look elsewhere for bugs if your scripts do not run. Sajith is also correct that you can't debug from localhost.
See here also, "Unsafe JavaScript attempt to access frame with URL..." error being continuously generated in Chrome webkit inspector
Be sure to have this line on the top of your page (it works for me) :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">
It is not possible to test all Facebook integration using domain localhost. You need to place your script in any public access domain and need to update the url in developer app settings page. The security error showing from JavaScript is due to this localhost access by facebook scripts
You can only use the same domain name in which you have registered with Facebook apps.
1. You need a public domain name (www.example.com). 2. You need to register with Facebook apps. 3. Get the 2 keys from the Facebook and use in the code:
appId : 'xxxxxxxxxxxxxx',
Had this error when I implemented fileglu and it may be a CORS error since you are running off localhost. Try running on Facebook and can you replace the bottom half with the code below:
(function() {
var e = document.createElement('script');
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js#appId=<your-app-id>&xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
I also had Oauth 2.0 and custom channel enabled in my FB.init() page. See: http://fbdevwiki.com/wiki/FB.init for more information.
You can tweak your localhost machine to appear to be of the domain that facebook requires.
On linux or OSX, add an entry to /etc/hosts; on windows, edit c:\windows\system32\drivers\etc\hosts. Add an entry like this:
127.0.0.1 local-dev.mydomain.com local-dev
Where "mydomain.com" is the domain with which your FB app ID is registered.
In my case error was caused by like widget that was loaded using addthis on the site that already had FB app.
It looked like problem was in conflicting with multiple fb js-sdk.
So solution could be replace addthis facebook like wdiget by native facebook like widget.
I've also had another bug in webkit when js-sdk was not loaded. I fixed that by replacing window.fbAsyncInit by jQuery.getScript(). Eventually it fixed error "Unsafe JavaScript attempt to access frame with URL" also.
Here is example:
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function() {
FB.init({
appId: 'your app id',
cookie: true,
xfbml: true,
oauth: true,
status: true
});
// Trigger custom event so we can use it to run init dependent actions in different places.
$(document).trigger('FBSDKLoaded');
//...
});