使用 google auth 时，Cross-Origin-Opener-Policy 策略会阻止 window.close 调用错误

Question

我正在使用 firebase 及其 google auth 工具，一切正常，用户数据保存在数据库中，但每次出现弹出窗口时我都会收到错误（Cross-Origin-Opener-Policy 策略会阻止 window.close 调用）

我正在使用 next js 并帮助我解决错误，谢谢

Answer 1

此标头可帮助您远离恶意网站。它允许您控制从网站打开选项卡或窗口的方式，并限制与其他来源的交互。

请参阅这篇有关跨域开启策略的 Google 身份验证设置文章

https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#cross_origin_opener_policy

它建议在使用 google 登录按钮的页面上使用Same-origin-allow-popups标头，而不是使用 Cross-Origin-Opener-Policy 的相同来源。

Answer 2

此错误出现在firebaseuinpm 包中。

首先要了解的重要一点是，登录问题可能与显示的控制台错误无关：

登录流=“重定向”

检查代码是否正常运行且不出现错误的最简单方法是暂时从 切换signInFlow="popup"到signInFlow="redirect"，这是Firebase UI Auth 中的默认值。

如果身份验证不起作用

检查代码：

• 缺少 JS 上下文，例如，<AuthProvider/>在 React 中。

• 订阅firebase/auth事件并检查是否返回用户对象（React 示例）：

  import { getAuth, onAuthStateChanged } from 'firebase/auth';
  
  
  const StyledFirebaseAuth = () => {   
    useEffect(() => {
  
    const unregisterAuthObserver = onAuthStateChanged(
     getAuth(),
     async (user) => {
       console.log('user', user);
     },
   );
  
  // the rest of code
  }
  

• 检查 Firebase 登录方法设置以允许特定提供商

• 检查 Firebase 身份验证允许的域

• 检查 Web 应用程序的 Firebase 配置：

   const firebaseConfig = {
     apiKey: "ABCDEF...",
     authDomain: "your-project-domain",
     projectId: "you-project",
     appId: "1:abcdef..."
   };
  

尝试摆脱控制台错误

Chrome 博客建议 使用Cross-Origin-Opener-Policy: restrict-propertieswith Cross-Origin-Embedder-Policy: require-corp。遗憾的是，它不适用于 Firebase UI。

问题在于Cross-Origin-Embedder-Policy标头，默认情况下应将其设置为unsafe-none。

该标头应与 html 页面一起返回或省略（隐式默认值）。可以手动设置。

请注意，要正确测试它，应重新启动服务器并清除浏览器缓存或使用新的隐身窗口。

本地发展：

下面是 React 示例，但其他框架也同样适用。

• 并create-react-app修改craco为craco.config.js：

   module.exports = {
     devServer: {
       headers: {
         'Cross-Origin-Embedder-Policy': 'unsafe-none'
       }
     }
   }
  

• 对于 Next.js 修改next.config.js：

   module.exports = {
     async headers() {
       return [
         {
           source: "/login",
           headers: [
             {
               key: "Cross-Origin-Embedder-Policy",
               value: "unsafe-none",
             },
           ],
         },
       ];
     },
   };
  

Firebase 托管

Firebase 允许指定为托管文件传递的标头.html, .js，包括. 修改firebase.json文件，例如，针对单页应用程序 (SPA)：

{
  "hosting": [
    {
      "target": "web",
      "public": "web/build",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ],
      "headers": [
        {
          "source": "**/*",
          "headers": [
            {
              "key": "Cross-Origin-Embedder-Policy",
              "value": "unsafe-none"
            }
          ]
        }
      ]
    }
  ]
}

尽管在我尝试将,和更改为不同的值后Cross-Origin-Opener-Policy，错误日志仍然出现在 Chrome 浏览器中，但登录方法有效。Cross-Origin-Resource-PolicyCross-Origin-Embedder-Policy

有关更严格的安全设置和unsafe-none值，请参阅文档。

Answer 3

如果您查看控制台，您应该会看到一条错误，指出该域没有 google 登录的权限。您需要做的是转到 firebase 控制台 -> 身份验证 -> 设置，然后单击“授权域”并添加您的域名