Facebook app - Silent “Protocols must match” error

Question

Here is my current login flow for my Facebook app (see this answer for an explanation). logout() and login() are dummy functions that render the page when the user is logged out or logged in.

window.fbAsyncInit = function() { 
    FB.init({
        appId: '...',
        channelUrl: window.location.protocol + '//' + window.location.host + '/channel.html',
        status: false,
        cookie: true,
        xfbml: false,
        oauth: true
    });

    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            login(response);
        } else {
            FB.Event.subscribe('auth.login', function(response) {
                login(response);
            });
            logout();
        }
    });
};

With this login flow, I don't have to reload the page when the user logs in, but I get the silent error:

Blocked a frame with origin "http://www.facebook.com" from accessing a frame with origin "https://s-static.ak.facebook.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

I assume that reloading the page transfers the iframe holding the app to the https:// protocol, but I don't really understand why or what that means. Why is this error occurring, and is it something to be concerned about?

astroanu astroanu · Accepted Answer · 2013-08-05T13:07:10

This is a security issue in most browsers. You cant ajax an https link from a http page

possible duplicate of Facebook gives "Unsafe JavaScript attempt to access frame with URL" error in Chrome

Facebook app - Silent “Protocols must match” error

1 Answers