Cross-Origin-Opener-Policy in Google identity Authentication

1.1k Views Asked by At

I am using Google Identity authentication without any library (using only pure JS and html). I followed step by step guide in https://developers.google.com/identity/gsi/web/guides/overview . When I click on the sign in button and the popup opens, I receive this error in the console:

client:258 Cross-Origin-Opener-Policy policy would block the window.postMessage call.

I am sure that have added my website URL into the Google authentication dashboard.

I tried adding these headers to the page using classic asp:

Response.AddHeader "Content-Security-Policy-Report-Only","script-src 'self' 'unsafe-inline' https://accounts.google.com/gsi/client; frame-src https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;"

I checked this Q/A but it is about implementation but it is using the Reactjs (which I am not using) with no accepted answer.

This is how I used the Google generated code to implement the sign in button (and replaced MY_CLIENT_ID with correct client ID.)

<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"  data-client_id="MY_CLIENT_ID"   data-callback="handleCredentialResponse"></div>
<div class="g_id_signin" data-type="standard"></div>

I also could successfully receive the response using this:

function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.access_token);
    console.log("Credential: " + responsePayload.credential);
    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
}

But it seems I am missing some response data (specially the g_csrf_token authentication TOKEN) which is not received by handleCredentialResponse function but perhaps by a POST action to the current page which I am missing.

I have no Idea how should I solve the Cross-Origin-Opener-Policy issue. Should I use a JS code? or html header? or ASP code? or server settings? etc. Also please tell me what happens after I solve this issue? Do I receive some extra data from post rather than the current response?

0

There are 0 best solutions below