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

Question

When I authorize inside the frame with the app which uses oAuth2 for authorization it throws the following error:

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

We are using oAuth v2 with Reactjs. The thing is that we have a Web-based Marketing SAAS product as well as an integration app that is working in the iframe. And this issue is happening only with the iframe-based integration app. Is there any way to overcome it and somehow make it work in the iframe?

Answer 1

We had similar issue with Slack integration. Unfortunately there is no good solution to overcome this. The only thing you can do is opening new blank page during the oAuth processing. Here is what I mean.

...

     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)
        }
      },

Let's assume you already have Auth service for your integration, so will not go further how to create the full service. But what you can do based on above sample is the following:

• You can have authorizeRedirect(options) for authorizing in your main platform in the same page as usual.
• Use separate authorizeNewWindow(options) for opening authorization page in the new blank page. This one can be used for iframe.
• The last authorize({ type, ...options }) you can use in your desired component or page.

Of course it does not give good user experience, but since there is no other way to overcome it then it's better than having crashed UI.