Facebook Javascript SDK login problems in Chrome/Safari (webkit) - Unsafe Javascript attempt

Question

Similar questions have been asked, but the solutions to those problems don't seem to help me.

I've got a local development site set up running on a virtual machine: http://lamp.site

When the index.php loads, I've got this javascript running (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 a button is clicked, this javascript function is triggered:

#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 press the button in Firefox, it works! Lovely, I get all the right things back from Facebook.

If I use Chrome or Safari on my PC, or Safari Mobile on my iPhone, I get the facebook login window popup with the message "An error 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've got my local testing URL added into the facebook app in the developer section, that works because it logs in with Firefox. This is my channels file, stored at http://lamp.site/channel.html

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

I've tried having the channel file with and without http: in the src= tag.

The facebook app has the following settings:

• App domains: lamp.site
• Site 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 enable cross site scripting as users wouldn't do that and this is going into a mobile site.

Anyone else managed to solve this problem recently?

All the other similar questions have gone unanswered... someone must have fixed this!

EDIT: I've made a simplified version, new app ID, on my website.

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

Here is the screen shot with the app ID from Facebook Dev application panel

You can look at the source code, it's copied straight from here:

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

And the channel file does exist:

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

I can't make it any simpler, I still get the "An error occurred. Please try again later." message, but now it just forwards onto Facebook instead of authenticating and closing.

Edit: I was missing the site URLs, I've added those, the simple example is working.

As it's working on my live site, it must be to do with my local domains. But I've got this line in my /etc/hosts/ file:

192.168.0.13 lamp.site

That's the IP address of the VirtualBox Ubuntu server running on my laptop. I can browse that site fine.

Answer 1

Sandbox Mode must be disabled for it to work in Chrome. That's it, that's all it took.

I enabled that mode as I thought that would stop it showing up in searches, which I don't want. And as it worked in Firefox I couldn't see that being a problem. But there you go, I switched off sandbox mode and it started working immediately.

I don't under stand that why that is stopping Chrome though.

Answer 2

Your factory has some strange JavaScript: return new function() ... outside of that I don't see an issue. I'm using this same basic technique and I don't have any problems in Chrome.

Be sure your Facebook application is set up to your domain (let's call it "mydomain.com")... THEN, to test locally, you'll need to edit your hosts file to point mydomain.com to 127.0.0.1... so the URL in the browser location matches what Facebook is expecting.

That's probably the only difference between what I'm doing and what you're doing.

... also make sure your App ID is the proper App ID from setting up your Facebook Application. Double check it. BS "test" App ID's will give you the error message as well.

-

-

---

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

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

is the same as

var x = { foo: 'test' };

Because the new keyword is used to call a function as an object constructor, and you're using new on an anonymous function that you can't use again, so 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.');
                }
            });
        }
    }
});