Cross-Origin-Opener-Policy 策略会阻止使用 Google 登录时出现 window.postMessage 调用错误

Question

我已经使用弹出 UX 模式为 Firebase 上托管的 React 网站实现了“使用 Google 登录”。我可以登录，但是，每次登录 localhost:3000 或网站的部署版本时，都会收到以下错误：

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

我已尝试按照此处详细说明设置跨源开启器策略。在设置过程中，我的 firebase.json 文件如下所示：

{
    "database": {
        "rules": "database.rules.json"
    },
    "functions": {
        "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"],
        "source": "functions"
    },
    "hosting": [
        {
            "target": "sandbox",
            "public": "build",
            "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
            "rewrites": [
                {
                    "source": "**",
                    "destination": "/index.html",
                    "headers": [
                        {
                            "key": "Cross-Origin-Opener-Policy",
                            "value": "same-origin-allow-popups"
                        }
                    ]
                }
            ],
            "headers": [
                {
                    "source": "**",
                    "headers": [
                        {
                            "key": "Cross-Origin-Opener-Policy",
                            "value": "same-origin-allow-popups"
                        }
                    ]
                }
            ]
        },
        {
            "target": "production",
            "public": "build",
            "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
            "rewrites": [
                {
                    "source": "**",
                    "destination": "/index.html",
                    "headers": [
                        {
                            "key": "Cross-Origin-Opener-Policy",
                            "value": "same-origin-allow-popups"
                        }
                    ]
                }
            ],
            "headers": [
                {
                    "source": "**",
                    "headers": [
                        {
                            "key": "Cross-Origin-Opener-Policy",
                            "value": "same-origin-allow-popups"
                        }
                    ]
                }
            ]
        }
    ],
    "storage": {
        "rules": "storage.rules"
    },
    "emulators": {
        "auth": {
            "port": 9099
        },
        "functions": {
            "port": 5001
        },
        "database": {
            "port": 9000
        },
        "hosting": {
            "port": 5000
        },
        "storage": {
            "port": 9199
        },
        "ui": {
            "enabled": true
        },
        "singleProjectMode": true
    }
}

在尝试进一步解决此问题时，我还将这一行添加到 header 元素中的 index.html 文件中：

<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups">

不幸的是，无论我是在 localhost:3000 还是部署到我的沙箱目标，登录时我都会继续遇到相同的错误。对我可能缺少的东西有什么建议吗？

Answer 1

我也遇到过这个问题，从我能够调试的情况来看，它源于尝试与父窗口通信的弹出 iframe。根据我的理解，如果它在服务器范围内实现“同源”COOP 标头（基于所做的其他请求），则不可能做到这一点。github上有相关主题开放在这里

我无法确定 OAuth iframe 试图发布的实际消息是什么，它也不会破坏我的登录流程。