I have been trying to build a kind of Hello World project using Google + SignIn. I followed the tutorial at /+/web/signin/, with my (excerpted) code being:

...
<script>
        function signinCallback(authResult) {
        //location.reload();
        //var x = 0
        //while(x=0){
            if (authResult['access_token']) {
                // Successfully authorized
                 // Hide the sign-in button now that the user is authorized, for example:
                 document.getElementById('signinButton').setAttribute('style', 'display: none');
                //document.getElementById("secret").innerHTML = ("<a href="secret.html"><p>Non-Conspicuous Link to Super Secret Page</p></a>");
                //alert("IT WORKED");
                document.getElementById("secret").innerHTML=("Non-Conspicuous Link to Super Secret Page");
                document.getElementById("game").innerHTML=("Non-Conspicuous Link to Super Secret Game Page");
                document.getElementById('refresh').setAttribute('style', 'display: none');
                //alert("Please Refresh");
                 } else if (authResult['error']) {
                 // There was an error.
                 // Possible error codes:
                 //   "access_denied" - User denied access to your app
                 //   "immediate_failed" - Could not automatically log in the user
                 console.log('AuthERROR: ' + authResult['error']);
                //alert("ERROR: A team of poorly trained robots has been dispatched to handle the situation. If they arive, tell them '" + authResult['error'] + "'");
              }
            }
        </script>
...
<span id="signinButton">
        <span 
            class="g-signin"
            data-callback="signinCallback"
            data-clientid="CLIENT ID"
            data-cookiepolicy="single_host_origin"
            data-requestvisibleactions=""
            data-scope=".login"
            data-width="wide"
            data-theme="light">
        </span>
...
<a href="secret.html"><p id="secret"></p></a>
...

When I run the code in Google Chrome (Version 29.0.1547.18 dev-m), I get this error:

Blocked a frame with origin "" from accessing a frame with origin "". Protocols, domains, and ports must match.

The code in my signinCallback function is called on the page's first load, but doesn't run when the button is used for sign in. The code isn't executed until the page is reloaded.

However, this issue does not occur in Firefox, so it seems to be an error isolated to Chrome. I have not yet tested any other browsers.

Is there anyway to solve this issue?

Thanks!

I have been trying to build a kind of Hello World project using Google + SignIn. I followed the tutorial at https://developers.google./+/web/signin/, with my (excerpted) code being:

...
<script>
        function signinCallback(authResult) {
        //location.reload();
        //var x = 0
        //while(x=0){
            if (authResult['access_token']) {
                // Successfully authorized
                 // Hide the sign-in button now that the user is authorized, for example:
                 document.getElementById('signinButton').setAttribute('style', 'display: none');
                //document.getElementById("secret").innerHTML = ("<a href="secret.html"><p>Non-Conspicuous Link to Super Secret Page</p></a>");
                //alert("IT WORKED");
                document.getElementById("secret").innerHTML=("Non-Conspicuous Link to Super Secret Page");
                document.getElementById("game").innerHTML=("Non-Conspicuous Link to Super Secret Game Page");
                document.getElementById('refresh').setAttribute('style', 'display: none');
                //alert("Please Refresh");
                 } else if (authResult['error']) {
                 // There was an error.
                 // Possible error codes:
                 //   "access_denied" - User denied access to your app
                 //   "immediate_failed" - Could not automatically log in the user
                 console.log('AuthERROR: ' + authResult['error']);
                //alert("ERROR: A team of poorly trained robots has been dispatched to handle the situation. If they arive, tell them '" + authResult['error'] + "'");
              }
            }
        </script>
...
<span id="signinButton">
        <span 
            class="g-signin"
            data-callback="signinCallback"
            data-clientid="CLIENT ID"
            data-cookiepolicy="single_host_origin"
            data-requestvisibleactions="http://schemas.google./AddActivity"
            data-scope="https://www.googleapis./auth/plus.login"
            data-width="wide"
            data-theme="light">
        </span>
...
<a href="secret.html"><p id="secret"></p></a>
...

When I run the code in Google Chrome (Version 29.0.1547.18 dev-m), I get this error:

Blocked a frame with origin "https://accounts.google." from accessing a frame with origin "https://apis.google.". Protocols, domains, and ports must match.

The code in my signinCallback function is called on the page's first load, but doesn't run when the button is used for sign in. The code isn't executed until the page is reloaded.

However, this issue does not occur in Firefox, so it seems to be an error isolated to Chrome. I have not yet tested any other browsers.

Is there anyway to solve this issue?

Thanks!

• javascript
• google-chrome
• google-plus

Share Improve this question Follow asked Jul 13, 2013 at 18:19 timtim17timtim17 29544 silver badges1414 bronze badges 7

• When you say that the callback is called on the page load, do you mean it is called with an access_token or that it is called with the authResult['error'] == 'immediate_failed' ? – BrettJ Commented Jul 15, 2013 at 4:52
• @BrettJ The callback is supposed to be called with the authResult['error'] = 'immediate_failed', and it is supposed to also be called with a successful sign in (with a changed value of the access_token?) the function is supposed to also be called. However, it hasn't in Chrome. – timtim17 Commented Jul 20, 2013 at 0:38
• Double check the origins that you specified in the Google APIs console to ensure that they match where you are serving the page. These must match in protocol, domain, and port number. – BrettJ Commented Jul 22, 2013 at 16:17
• @BrettJ I'm hosting the page on a local server, is it ok in the API Console to just specify as an origin 'localhost'? – timtim17 Commented Jul 26, 2013 at 16:41
• Yes you can list http:/ /localhost (or also on a specific port if applicable), but you would want to remove that when you go into production because if your client ID was stolen, someone else could use your quota by doing operations from localhost. – BrettJ Commented Aug 16, 2013 at 20:09

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

I was adapting the java hybrid server-side flow quick-start app and having the "blocked frame" error even when using https. I found that the error was triggered by this block of javascript client-side code (within the onSignInCallback function):

for (var field in authResult) {
  $('#authResult').append(' ' + field + ': ' +
      authResult[field] + '<br/>');
}

The code above is part of the quick-start app and is there for education purposes only. The error occurs when enumerating or getting a certain field within the authResult object. Removing the above code (or surrounding it with a try-catch block) solved the problem.

Turns out that the reason that my button wasn't authenticating without a refresh was beacuse I forgot to close my <script> on my server, even though it was closed in the code in my question.

For the error it does seem like you can ignore it (thanks @Ismael Toé).