Firebase 身份验证因跨源隔离而中断（即使用跨源资源策略时）

Question

我正在尝试使网站跨源隔离，并在我的网站上启用以下标头：

https://web.dev/cross-origin-isolation-guide/

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Firebase 身份验证使用以下调用：

https:///__/auth/iframe?apiKey=&appName=[默认]

如果您导致身份验证失败，则会被阻止。

由于您的站点启用了跨源嵌入器策略 (COEP)，因此每个资源都必须指定合适的跨源资源策略 (CORP)。此行为可防止文档加载未明确授予加载权限的跨域资源。 要解决此问题，请将以下内容添加到资源的响应标头中： 跨源资源策略：同一站点（如果资源和您的站点由同一站点提供）。 跨源资源策略：如果资源是从您网站以外的其他位置提供的，则为跨源。 ⚠️如果设置了这个 header，任何网站都可以嵌入这个资源。

如何解决这个问题？看来根本问题是 firebase 需要在其一侧设置标头？

Answer 1

我遇到了完全相同的问题 - 相同的 CORS 标头，相同的 /auth/iframe CORS 错误（在 Safari 上）。

您可以在这里找到问题的解决方案：https://github.com/firebase/firebase-js-sdk/issues/4946

摘要：Firebase 急切加载其身份验证 iframe。除非您使用 Firebase 方法

signInWithPopup

或

signInWithRedirect

，否则甚至不需要此 iframe。

如果您不使用这些方法，只需将您可能调用

getAuth

的位置替换为

initializeAuth

并传入以下内容（还需要从 firebase/auth 导入持久性内容）：

const auth = initializeAuth(app, {
  persistence: [
    indexedDBLocalPersistence,
    browserLocalPersistence,
    browserSessionPersistence,
  ],
});

进行此更改后，您不应再在“网络”选项卡下的 Safari/移动设备中看到 iframe（很有用，因为至少对我来说，CORS 问题仅发生在较旧的 Safari 版本中，但无论如何，iframe 在网络中都是可见的），并且/auth/iframe CORS 问题应该随之消失。

如果您正在使用这些方法，我认为您仍然可以在上述链接中找到稍微不同的修复方法。