Error Occured: Google+ Sign-In - Security Issue Unresolved

While working on implementing Google+ Sign-In's hybrid / one-time auth code flow, I encountered an error in Chrome's JS console. The error occurs after the sign-in prompts and granting permission to the app, specifically when Google's code attempts 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 issue does not seem to arise in Safari or IE. It also occasionally happens in Firefox but is more frequently reproducible in Chrome. Refreshing the frame with the sign-in button (after following Google-side prompts) often results in the refreshed button acknowledging that the sign-in was successful and calls the success handler. Ideally, it should work without needing a refresh, yet it consistently requires one.

Any insights? The sign-in can be accessed at . It only requests the email scope if you'd like to investigate further!

javascriptdjangoauthenticationgoogle-plusgoogle-oauth

Answer №1

To resolve the error message, I successfully eliminated it by including https://accounts.google.com in the AUTHORIZED JAVASCRIPT ORIGINS section of your OAuth client configurations within Cloud Developers Console under API & auth -> Credentials.

Latest Update

However, even after making this adjustment, the issue resurfaced when I transitioned from using gapi.login.render to gapi.auth.signIn. The root cause, as highlighted in the feedback within this post, was due to the serialization of the g-oauth-window attribute of the authResult when transmitting it to your backend. Removing or only sending the necessary attributes resolved the problem for me.

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

I trust this information proves to be beneficial for you.

Answer №2

If you encounter the same issue and Adam's previous solution did not resolve it (it didn't work for me either), consider trying the following method.

To solve the problem, I disabled any chrome extensions that were installed and capable of altering the rendered HTML, changing page headers, or injecting JavaScript into the page.

One problematic extension causing a 

Blocked a frame with origin "https://apis.google.com" from accessing a frame with origin "https://example.com
error was Ripple Emulator (Beta) 0.9.15—a tool for html5 mobile app development and testing that can "Read and change all your data on the websites you visit," as indicated in its permission details.

Another extension I disabled was ModHeader 1.2.4 Modify the Request Headers, which also has the capability to "Read and change all your data on the websites you visit."

Check your Chrome extensions and remove any that may be altering web pages.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a user-friendly form with validation in a Vue application using Vuetify.js

I am in the process of incorporating a contact form with basic validation on a Vue.js website using an example from Vuetify.js. Being new to this, I'm unsure about how to implement it within a Vue component. My goal is to have simple client-side form ...

javascriptformsvue.jsvuetify.js

Despite setting the date format in the Html Helper, the MVC still presents a validation error

When creating a razor view form to display the date field, I am using the following code: @Html.TextBoxFor(m => m.LectureDate, "{0:dd/MM/yyyy}") The desired date format is 21/04/2017, which is set by JQuery DatePicker. However, after setting the date ...

javascriptjqueryasp.net-mvcasp.net-mvc-4razor

Is there a way to change the font color of a link when adding an active class to its parent list item?

I'm currently working on a navigation bar that consists of three buttons, and I want to make it so that when one of the buttons is active, the "active" class is applied, changing the border and font color. However, I've encountered an issue where ...

javascriptjqueryhtmlcss

Understanding the significance of "this" within node.js modules and functions

Upon using the require method, a JavaScript file is loaded. The code snippet demonstrates an interesting scenario where this behaves differently within different parts of the script. // loaded by require() var a = this; // "this" here refers to an empty ...

javascriptnode.js

Error message for form validation

I am encountering an issue when trying to validate the username field: Unable to access an error message corresponding to your field name. While the is_unique rule works fine for the email field, it throws the above error for the username field. I am u ...

phpvalidationcodeigniterauthentication

React - output from forEach() function is not defined

I am facing a challenge in rendering prop values from a nested object. There are two issues that I'm encountering: 1. The JSX code line (with variables) is not showing up in the browser 2. When I console log the variables with .forEach() methods, th ...

javascriptreactjs

How to use mousedown event in Three.js to create line drawings

I've tried multiple approaches to achieve this effect. I'm looking to draw a line on mouse down event, and despite researching various resources, I haven't been able to come up with a solution. Currently, I'm utilizing the RayCaster met ...

javascriptthree.jsclick

streaming audio data from a MongoDB database to an HTML audio element

As part of my current project, I am delving into the realm of creating an audio player. The concept of database storage for files is relatively new to me, as my previous experience has mainly involved storing strings. Up to this point, here's what I ...

javascriptnode.jsmongodbhtml5-audiogridfs

Completing a submission on a bootstrap form, using innerHTML and displaying an alert

I am currently having an issue with navigating to the home page after submitting a form in Bootstrap. Although I have successfully implemented an alert message upon submission, the page does not redirect to the home page as expected. Instead, it redirects ...

javascripthtml

"Exploring the Intersection of Meteor, NPM Packages, and Fiber Callbacks

I am currently utilizing request and cheerio to extract specific content, particularly a quote, from a website. Here is the code snippet ( server.js ) : q = new Mongo.Collection('quotelist'); postList = new Mongo.Collection('quotes&apos ...

javascriptnode.jsmongodbmeteornpm

What is the best way to showcase the contents of an associative array using Vue.js?

I have a variable that contains an array: https://i.sstatic.net/OQfB9.png My goal is to create a foreach loop and display all the key's and script_content's in the view. This is my Vue component's mounted method: mounted() { this ...

javascriptvue.jsforeachvuejs2vue-component

Exploring the filter method in arrays to selectively print specific values of an object

const array = [ { value: "Value one", label: "Value at one" }, { value: "Value 2", label: "Value at 2" }, { value: "" , label: "Value at 3" } ...

javascriptarraysreactjstypescriptobject

Unlocking the power of localhost on your mobile device

Currently, I am working on a web application that utilizes Laravel for APIs and React for the frontend. My goal is to test this application on a mobile device. While testing React in isolation works fine, I am encountering issues with backend data such a ...

javascriptphpreactjslaravelbackend

Quasar Troubles with Touch Swipe Gestures

I'm facing two issues, the first being that the directives are not functioning as expected. For example, I've implemented a swipe only to the right: <div class="q-pa-md row justify-center"> <q-card v-touch-swipe. ...

javascriptvue.jsquasar

Tips for structuring commands in Discord.js

I'm in the process of restructuring my bot's commands. I currently have a folder called commands with all my commands inside, but I want to make it more organized by categorizing them into moderators, fun, and global like this: commands > mo ...

javascriptnode.jsdiscord.js

Interactive form found on a webpage

Hey there! I'm currently working on a task where I want a form to be displayed when the edit button is clicked. Once the save button in the form is pressed, I want to update my database with the new information. It's crucial that this process hap ...

javascriptjqueryajaxforms

React Bootstrap hover animation technique

UPDATE: I decided to give react-bootstrap a try for tooltips, hoping it would finally work as expected. Unfortunately, even after implementing the code, I am still facing issues with getting the tooltip effect to show up when hovering over the button. Th ...

javascriptcssreactjsbootstrap-4react-bootstrap

Updating the sitemap.xml file with information retrieved from the Firebase database

My coding includes connection to a Firebase database. var express = require('express') var app = express() app.listen(3000) app.engine('html', require('ejs').renderFile) app.use(express.static('public')) var bodyP ...

javascriptnode.jsmongodbexpressfirebase

Ways to direct to dashboard if a user is logged in using AngularJS

As a newcomer to AngularJS, I am facing an issue with redirecting my page to the dashboard once the user has logged in. I receive an access token after login, which I save in cookies. Despite trying solutions from Stack Overflow, I have not been able to re ...

javascriptangularjs

AngularJS does not clear the array after a POST request is made

ISSUE Greetings! I am encountering an odd behavior with my backend. When I submit data, everything works flawlessly. However, if I press ENTER and submit an empty field, it reposts the previous value. Initially, I cannot submit an empty field, but after e ...

javascriptangularjspost