在 iframe 中嵌入 Firebase 社交登录

Question

我在 iframe 中嵌入了一个 React 应用程序。该应用程序使用 firebase-authentication 通过 Google、Facebook 或 Twitter 登录。虽然身份验证机制在 iframe 之外完美运行，但由于 cross-origin 问题，它在 iframe 中不起作用。有什么解决办法吗？

这是将 React 应用程序嵌入 iframe 的代码：

<iframe
    id="myframe"
    src="https://example.com/my-frame"
    scrolling="no"
></iframe>

当 React 应用程序重定向到社交登录时，我在 Chrome DevTools 中收到以下错误消息：

Refused to display 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=xyz&scope=https://www.googleapis.com/auth/userinfo.email+profile+openid&redirect_uri=https://example.firebaseapp.com/__/auth/handler&state=AH..oE' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

似乎 Google 登录正在发送 x-frame-options:SAMEORIGIN header，这会阻止浏览器打开该页面。有办法解决这个问题吗？

提前致谢！

Answer 1

像 accounts.google.com 这样的 OAuth 提供商拒绝在框架或 iframe 中呈现。这样做是出于安全原因。

您无法绕过它。但是，如果您使用 Firebase Auth 从 iframe 登录，则可以改用 signInWithPopup。

在 iframe 中嵌入 Firebase 社交登录

Embedding Firebase social login in an iframe

firebase-authentication

twitter-oauth

google-signin

facebook-authentication