Google+ Sign-In - Uncaught SecurityError

Question

I'm implementing Google+ Sign-In's hybrid / one-time auth code flow and experiencing this error in Chrome's JS console after the sign-in prompts and granting the app permission, presumably when Google's code tries to call back to the button:

Uncaught SecurityError: Blocked a frame with origin "https://ww2.fa.org" from accessing a frame with origin "https://accounts.google.com". Protocols, domains, and ports must match.

This does not seem to occur in Safari or IE and a similar permission error occurs sometimes in Firefox, but is reproducible more often than not in Chrome. Refreshing the frame with the sign-in button (after following the google-side prompts) will usually result in the refreshed button "knowing" that the sign-in was successful a call to the success handler... it should always work without a refresh, but just doesn't.

Any thoughts? The sign-in is at https://ww2.fa.org/gauth/ and it only requests the email scope if you're inclined to take a look!

Answer 1

The way I got rid of this error message is to add https://accounts.google.com to the AUTHORIZED JAVASCRIPT ORIGINS in your OAuth client settings in Cloud Developers Console under API & auth -> Credentials.

Update

That actually didn't fix it and the problem resurfaced again when I switched to using gapi.auth.signIn instead of gapi.login.render. The problem as described in the comments in this post was that serialization of the g-oauth-window attribute of the authResult when sending it to your backend. Removing that parameter or sending just the attributes you need fixed it for me.

var signInCallback = function(authResult) {
  delete authResult['g-oauth-window'];
  ajaxCallToBackend(authResult);
};

Hope this helps.

Answer 2

If you get the same error and the above method posted by Adam didn't work for you (it didn't work for myself) try the method below.

I overcame the problem by disabling any chrome extensions that I had installed that read and change the rendered HTML and ones that rewrite page headers and inject an sort of JavaScript in to the page.

One such extension(the one causing my Blocked a frame with origin "https://apis.google.com" from accessing a frame with origin "https://example.com error) was namely Ripple Emulator (Beta) 0.9.15 A browser based html5 mobile application development and testing tool which "Reads and changes the all your data on the websites you visit" as it states in the extensions permission details.

Another such extension I disabled was ModHeader 1.2.4 Modify the Request Headers which also "Reads and changes the all your data on the websites you visit".

Just have a look at your Chrome extensions and eliminate any you suspect modifying pages.