拒绝在框架中显示...因为它在 React 和 oAuth 中将 'X-Frame-Options' 设置为 'same origin'

Question

当我在框架内使用使用 oAuth2 进行授权的应用程序进行授权时，它会抛出以下错误：

拒绝在框架中显示...，因为它将 'X-Frame-Options' 设置为“同源”。

我们正在使用带有 Reactjs 的 oAuth v2。问题是我们有一个基于 Web 的营销 SAAS 产品以及一个在 iframe 中运行的集成应用程序。而且这个问题只发生在基于 iframe 的集成应用程序中。有没有办法克服它并以某种方式使其在 iframe 中工作？

Answer 1

出于安全原因，该站点故意阻止此操作。

如果有解决方法，则意味着您发现了一个主要的安全漏洞。 oauth2 端点不希望您将其嵌入到 iframe 中，因此：

更改 oauth2 服务器以允许此操作
接受你无法改变这一点，并尝试通过而不是使用框架来解决这个问题。

Answer 2

几乎所有授权服务器都会这样做，以防止点击劫持攻击。如果您拥有该服务器，您可以针对特定的可信来源覆盖它。

但它可能完全无法修复，因为大多数网页不允许自己在 iframes运行中

一个可能有效的选项是通过 pop-up window 登录，但从可用性的角度来看这看起来很差

目前最好的解决方案是首先避免运行在 iframe 中安装您的 Web 应用程序。它们是问题的一大来源。你能解释一下你为什么需要这样做吗？

Answer 3

我们在 Slack 集成方面遇到了类似的问题。不幸的是，没有很好的解决方案来克服这个问题。您唯一可以做的就是在 oAuth 处理期间打开新的空白页面。这就是我的意思。

...

     authorizeRedirect(options) {
        window.location = this.getAuthorizeUrl(options)
      },
    
      async authorizeNewWindow(options) {
        const authorizeUrl = this.getAuthorizeUrl(options)
    
        window.open(authorizeUrl, '_blank')
      },
    
      authorize({ type, ...options }) {
        if (type === 'newWindow') {
          return this.authorizeNewWindow(options)
        } else {
          this.authorizeRedirect(options)
        }
      },

假设您已经拥有用于集成的 Auth 服务，因此将不再进一步介绍如何创建完整的服务。但是您可以根据以上示例执行以下操作：

您可以在您的主平台中像往常一样在同一页面中进行authorizeRedirect(options)授权。
使用单独的authorizeNewWindow(options)在新的空白页面打开授权页面。这个可以用于iframe。
您可以在所需的组件或页面中使用的最后一个 authorize({ type, ...options })。

当然，它不会提供良好的用户体验，但既然没有其他方法可以克服它，那么它总比崩溃好UI。

拒绝在框架中显示...因为它在 React 和 oAuth 中将 'X-Frame-Options' 设置为 'same origin'

Refused to display...in a frame because it set 'X-Frame-Options' to 'same origin' in React & oAuth

javascript

oauth

x-frame-options

oauth-2.0

reactjs