CODEWITHSUNDEEP
javascriptspring-bootgoogle-signingoogle-api-js-clientcross-origin-opener-policy
Pendyala Kedhareeswar
Pendyala Kedhareeswar

Reputation: 1

can can I resolve the cross origin opener closed window error

type here

I have integrated the google sign in option into my web appication and when i am trying to use that sign in option the google sign in window which usually pops when we signin with google id that asks us to select the mail id is closing immediately like after loading for 2 seconds and in the console i have the following error

Error:
** cb=gapi.loaded_0?le=scs:187 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
_.g.pB @ cb=gapi.loaded_0?le=scs:187
ov.pB @ cb=gapi.loaded_0?le=scs:191
_.aw @ cb=gapi.loaded_0?le=scs:197
_.ew @ cb=gapi.loaded_0?le=scs:201
_.kw @ cb=gapi.loaded_0?le=scs:206
Rx.Uo @ cb=gapi.loaded_0?le=scs:248
Rx @ cb=gapi.loaded_0?le=scs:247
_.Zx @ cb=gapi.loaded_0?le=scs:258
S$ @ cb=gapi.loaded_0?le=scs:374
P$ @ cb=gapi.loaded_0?le=scs:376
(anonymous) @ platform.js:76
(anonymous) @ platform.js:48
tc @ platform.js:39
ka @ platform.js:48
L.<computed>.L.<computed> @ platform.js:48
la @ platform.js:48
(anonymous) @ platform.js:48
tc @ platform.js:39
ka @ platform.js:48
Yc.L.<computed> @ platform.js:48
Yc.J.<computed> @ platform.js:48
(anonymous) @ cb=gapi.loaded_0?le=scs:1
cb=gapi.loaded_0?le=scs:124 Uncaught {error: 'idpiframe_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'}
(anonymous) @ cb=gapi.loaded_0?le=scs:124
setTimeout (async)
_.ri @ cb=gapi.loaded_0?le=scs:124
(anonymous) @ cb=gapi.loaded_0?le=scs:162
cl @ cb=gapi.loaded_0?le=scs:155
Promise.then (async)
Yk @ cb=gapi.loaded_0?le=scs:155
_.bl @ cb=gapi.loaded_0?le=scs:155
wl @ cb=gapi.loaded_0?le=scs:161
dl @ cb=gapi.loaded_0?le=scs:160
(anonymous) @ cb=gapi.loaded_0?le=scs:155
(anonymous) @ cb=gapi.loaded_0?le=scs:249
nv.dispatchEvent @ cb=gapi.loaded_0?le=scs:172
_.kw.Zr @ cb=gapi.loaded_0?le=scs:207
(anonymous) @ cb=gapi.loaded_0?le=scs:199
_.g.Qca @ cb=gapi.loaded_0?le=scs:193
(anonymous) @ cb=gapi.loaded_0?le=scs:195
cb=gapi.loaded_0?le=scs:175 Cross-Origin-Opener-Policy policy would block the window.closed call.
wv @ cb=gapi.loaded_0?le=scs:175
(anonymous) @ cb=gapi.loaded_0?le=scs:175
cb=gapi.loaded_0?le=scs:175 Cross-Origin-Opener-Policy policy would block the window.closed call.
wv @ cb=gapi.loaded_0?le=scs:175
(anonymous) @ cb=gapi.loaded_0?le=scs:175
cb=gapi.loaded_0?le=scs:175 Cross-Origin-Opener-Policy policy would block the window.closed call.
wv @ cb=gapi.loaded_0?le=scs:175
(anonymous) @ cb=gapi.loaded_0?le=scs:175
cb=gapi.loaded_0?le=scs:175 Cross-Origin-Opener-Policy policy would block the window.closed call.


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
    <!-- Load the Google Platform Library -->
    <script src="https://apis.google.com/js/platform.js" async defer onload="googleSignInInit()"></script>
    <!-- Specify your app's client ID -->
    <meta name="google-signin-client_id" content="my id">
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            flex-direction: column; /* Adjusted to column layout */
        }

        form {
            max-width: 400px;
            width: 100%;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            background-color: #fff;
            margin-bottom: 16px; /* Added margin to separate the form and Google Sign-In button */
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 16px;
            box-sizing: border-box;
        }

        button {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            margin-bottom: 16px;
        }

        .g-signin2 {
            margin-top: 16px;
            margin-bottom: 16px;
        }
    </style>
</head>
<body>

<form id="signupForm" action="/signup" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <!-- Use a submit button to trigger form submission -->
    <button type="submit">Sign Up</button>
</form>

<div class="g-signin2" data-onsuccess="onGoogleSignIn"></div>

<script>
    // Function to handle Google Sign-In initialization
    function googleSignInInit() {
        gapi.load('auth2', function() {
            gapi.auth2.init({
                client_id: 'my id ',
            });
        });
    }

    // Function to handle Google Sign-In success
    function onGoogleSignIn(googleUser) {
        var profile = googleUser.getBasicProfile();
        console.log('Google Sign-In Success!');
        console.log('ID: ' + profile.getId());
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail());

        // Add your logic to send the Google Sign-In data to the server (if needed)
        sendGoogleSignInData(profile);

        // Prevent the default Google Sign-In callback
        googleUser.disconnect();
    }

    // Function to send Google Sign-In data to the server
    function sendGoogleSignInData(profile) {
        var googleSignInData = {
            googleId: profile.getId(),
            name: profile.getName(),
            imageUrl: profile.getImageUrl(),
            email: profile.getEmail()
        };

        fetch('/google/signup', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(googleSignInData),
        })
        .then(response => response.json())
        .then(data => {
            // Handle the response if needed
            console.log('Success:', data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }
</script>

</body>
</html>

the above is my signup page where i tried to integrate the google signup button

what I have tried : i have tried temperorily disabling cross origin opener and tried to acess in incognito tab too . I cant seem to resolve this error . can anyone help me solve this issue and I configured my id and secret code in my application correctly . i have replaced them with my id for safety purpose and also I have specified correct redirect urls and everything . still cant seem to avoid the error

Upvotes: 0

Views: 310

Answers (0)

Related Questions