Facebook Javascript SDK registration issues in Chrome / Safari (webkit) - Insecure Javascript attempt

Question

Similar questions were asked, but solutions to these problems do not seem to help me.

I have a local development site configured on a virtual machine: http://lamp.site

When index.php loads, this javascript works for me (with the correct appId):

/* facebook auth */ window.fbAsyncInit = function() { FB.init({ appId: '01234567890', channelUrl: 'http://lamp.site/channel.html' }); }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); 

Then, when the button is pressed, this javascript function is activated:

 #HTML <li><a class="btn" href="#" ng-click="connectToFacebook()">Connect with Facebook</a></li> #Snippet in AngularJS Controller $scope.connectToFacebook = function() { facebookConnect.authenticate( function(reason) { // fail console.log(reason); }, function(user) { // success console.log('logged in',user); //Session.login(); }); return false; } #Factory in AngularJS module .factory('facebookConnect', function() { return { authenticate: function(fail, success) { FB.login(function(response) { console.log(response); if (response.authResponse) { FB.api('/me', success); } else { fail('User cancelled login or did not fully authorize.'); } }); } } 

If I click a button in Firefox, it will work! Great, I get all the right things from Facebook.

If I use Chrome or Safari on my PC or Safari Mobile on my iPhone, I get a facebook login pop-up with the message "An error has occurred. Please try again later" and the following console data:

 Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/dialog/permissions.request from frame with URL http://lamp.site/index.php?page=login. Domains, protocols and ports must match. Object authResponse: null status: "not_authorized" __proto__: Object User cancelled login or did not fully authorize. 

I have my local testing URL added to the facebook application in the developer section, which works because it logs in with Firefox. This is my feeds file saved in http://lamp.site/channel.html

 <script src="http://connect.facebook.net/en_US/all.js"></script> 

I tried to have a channel file with and without http: in the src = tag.

The facebook application has the following settings:

• Application Domains: lamp.site
• Website URL: http://lamp.site
• Mobile Site URL: http://lamp.site

So it works in Firefox, what the hell am I doing wrong. I can’t just turn on cross-site scripting, as users wouldn’t, and this is happening on the mobile site.

Has anyone else managed to solve this problem recently?

All other similar questions remained unanswered ... someone had to fix it!

EDIT: I made a simplified version, a new application identifier, on my website.

http://dev.willshawmedia.com/fb/

Here is a screenshot with the app ID from the Facebook Dev app bar

You can see the source code, it was copied right here:

https://developers.facebook.com/docs/guides/web/

And the channel file exists:

http://dev.willshawmedia.com/fb/channel.html

I can’t make it easier, I still get the message "An error has occurred. Please try again later." message, but now it just goes to Facebook instead of authentication and closure.

Edit: I didn’t have enough site URLs, I added them, a simple example works.

How it works on my site, this should be related to my local domains. But I have this line in / etc / hosts / file:

 192.168.0.13 lamp.site 

That the IP address of the VirtualBox Ubuntu server is working on my laptop. I can browse this site well.

Answer 1

Sandbox mode must be turned off to work in Chrome. What is it, that is all that is needed.

I turned on this mode, as I thought it would stop him from searching for what I don't want. And since it worked in Firefox, I could not see that it was a problem. But there you go, I turned off sandbox mode, and it immediately started working.

I do not understand why this stops Chrome, though.

Answer 2

There is strange JavaScript in your factory: return new function() ... outside of this, I don't see a problem. I use the same basic technique and I have no problems in Chrome.

Make sure your Facebook application is configured on your domain (call it "mydomain.com") ... THEN, to test locally, you need to edit the hosts to point mydomain.com to 127.0.0.1 ... so the URL in The browser location is as expected by Facebook.

This is probably the only difference between what I do and what you do.

... also make sure your app id is the correct app id to set up your Facebook app. Double check. The BS application identifier "test" will also give you an error message.

-

-

---

EDIT : on the front is new function(){ } ... which I think is not your problem .... I want to explain a little more:

 var x = new function() { this.foo = 'test'; }; 

coincides with

 var x = { foo: 'test' }; 

Since the new keyword is used to call a function as the constructor of an object, and you are using a new one for an anonymous function that you cannot reuse, there is no reason to declare it.

So your snippet could (and probably should) be:

 .factory('facebookConnect', function() { return { authenticate: function(fail, success) { FB.login(function(response) { console.log(response); if (response.authResponse) { FB.api('/me', success); } else { fail('User cancelled login or did not fully authorize.'); } }); } } });