使用Firebase Google Auth npm遇跨域等错误，求排查指导

问题背景 #

我正在学习Firebase，编写了Google弹窗登录的实现代码，虽然能正常获取用户凭证，但控制台出现了一系列异常信息，想排查问题所在。

实现代码 #

Firebase配置代码

import { initializeApp } from "firebase/app";

import {
  getAuth,
  signInWithRedirect,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";

const firebaseConfig = {
  apiKey: "API KEY",
  authDomain: "crwn-clothing-db-4d333.firebaseapp.com",
  projectId: "crwn-clothing-db-4d333",
  storageBucket: "crwn-clothing-db-4d333.appspot.com",
  messagingSenderId: "SENDER ID",
  appId: "API ID",
  measurementId: "G-6MLB6CSGZR",
};

const app = initializeApp(firebaseConfig);

const provider = new GoogleAuthProvider();
provider.setCustomParameters({
  prompt: "select_account",
});

export const auth = getAuth();
export const signInWithGooglePopup = () => signInWithPopup(auth, provider);

登录组件代码

import React from "react";
import { signInWithGooglePopup } from "../../../utils/firebase/firebase.utils";

function SignIn() {
  const logGoogleUser = async () => {
    try {
      const response = await signInWithGooglePopup();
      console.log(response);
    } catch (error) {
      // Handle specific error: auth/popup-closed-by-user
      if (error.code === "auth/popup-closed-by-user") {
        console.log("Google sign-in popup was closed by the user.");
        // Handle this case as needed (e.g., show a message to the user)
      } else {
        console.error("Error during Google sign-in:", error);
      }
    }
  };

  return (
    <div>
      <h1>Sign In Page</h1>
      <button onClick={logGoogleUser}>Sign In With Google Popup</button>
    </div>
  );
}

export default SignIn;

控制台异常信息 #

Error handling response: Error: Failed to read a named property 'href' from 'Location': Blocked a frame with origin "https://crwn-clothing-db-4d333.firebaseapp.com" from accessing a cross-origin frame.
at tryShowingMateBar (eval at success (chrome-extension://ihmgiclibbndffejedjimfjmfoabpcke/src/kernel/kernel.js:233:37), :5428:57)

at eval (eval at success (chrome-extension://ihmgiclibbndffejedjimfjmfoabpcke/src/kernel/kernel.js:233:37), \<anonymous\>:153:17)

at eval (eval at success (chrome-extension://ihmgiclibbndffejedjimfjmfoabpcke/src/kernel/kernel.js:233:37), \<anonymous\>:108:27)

popup.ts:289 Cross-Origin-Opener-Policy policy would block the window.closed call.
poll @ popup.ts:289（重复4次）
signin.component.jsx:8 UserCredentialImpl {user: UserImpl, providerId: 'google.com', _tokenResponse: {…}, operationType: 'signIn'}
sign-in:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
webpackHotDevClient.js:76 The development server has disconnected. Refresh the page if necessary.

问题分析与解决 #

1. 跨域帧访问错误：
   错误栈里的chrome-extension://ihmgiclibbndffejedjimfjmfoabpcke指向一款名为Mate的浏览器扩展，是该扩展尝试访问Firebase登录弹窗的跨域帧导致的错误，和你的代码无关。直接禁用这个扩展就能消除该错误。

2. Cross-Origin-Opener-Policy警告：
   这是Firebase弹窗登录的跨域策略特性，属于正常的浏览器安全机制提示，不会影响登录功能的正常运行，开发环境下无需额外处理，生产环境中Firebase会自动适配相关策略。

3. 消息通道关闭与开发服务器断开错误：
   这类错误多发生在开发环境的热重载场景下，或者受浏览器扩展干扰导致。生产环境部署后，这类异常会自动消失，开发时可以忽略，或者重启开发服务器、禁用无关扩展来缓解。

总结 #

你的Firebase Google弹窗登录代码逻辑是正确的，能获取用户凭证就说明核心功能正常。控制台的异常都是由浏览器扩展或开发环境特性导致的，不需要修改代码，按上述方法处理即可。

内容的提问来源于stack exchange，提问作者Afrasiab Nadeem