在iframe中嵌入Firebase社交登录

Question

我在iframe中嵌入了一个React应用。该应用使用firebase身份验证使用Google，Facebook或Twitter登录。虽然身份验证机制在iframe之外完美运行，但由于跨源问题，它在iframe中不起作用。任何想法如何解决这个问题？

以下是将React应用嵌入iframe的代码：

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

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

  

拒绝在一个框架中显示“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”，因为它将“X-Frame-Options”设置为“sameorigin”。

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

提前致谢！

Answer 1

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

你无能为力。但是，如果您使用Firebase Auth从iframe登录，则可以切换为使用signInWithPopup。