FB.login() fails with "Unsafe JavaScript attempt to initiate navigation for frame" on Android Chrome but not desktop Chrome

Question

I have a Facebook JS SDK login flow here: https://web.triller.co/#/user/login

When the user taps the Facebook button, the following function is executed:

loginFacebook()
{
    const fbPromise = new Promise((resolve, reject) => {
        FB.login(resp => {
            if (resp.authResponse)
            {
                resolve(resp.authResponse.accessToken);
            }
            else
            {
                console.log(resp);
                reject(new Error('Facebook login canceled or failed.'));
            }
        });
    });

    return fbPromise
        .then(accessToken => api.postJson('user/login_facebook', { accessToken }))
        .then(this._handleLogin.bind(this));
}

Basically, it calls FB.login(), and expects to receive a valid resp.authResponse. Unfortunately, it doesn't, even after successfully authenticating on the Facebook popup/tab. Instead, we receive { authResponse: undefined, status: undefined } and the following error from the browser:

Unsafe JavaScript attempt to initiate navigation for frame with URL 'https://m.facebook.com/v2.8/dialog/oauth?foo=bar' from frame with URL 'https://web.triller.co/#/user/login?_k=cmzdb6'. The frame attempting navigation is neither same-origin with the target, nor is it the target's parent or opener.

The error occurs immediately after authenticating within the Facebook popup/tab, and it only occurs on Android Chrome. Desktop Chrome (on a Mac) does not show the same error. Safari on iOS does not show the error, either.

Any thoughts on what's going on? Why the difference between Android Chrome and desktop Chrome? Could it have something to do with the hash in the URL?

Answer 1

In desktop this issue can be caused by XFINITY Constant Guard Protection Suite Chrome extension. Disble it and problem will be solved.

In Android, try removing XFINITY or similar security extensions or applications (Norton security antivirus).

https://developer.salesforce.com/forums/?id=906F00000008qKnIAI

Answer 2

I think it fails because of the m.facebook.com/... based on this https://en.wikipedia.org/wiki/Same-origin_policy#Origin_determination_rules (see the case for http://en.example.com/dir/other.html and why it fails). Although it shouldn't based on what I've done with the fb api this is weird, try making a cors request instead as a workaround?