Отказался отображать во фрейме, потому что он установил 'X-Frame-Options' в 'то же происхождение' в React & oAuth

Когда я авторизуюсь внутри фрейма с помощью приложения, которое использует oAuth2 для авторизации, оно выдает следующую ошибку:

Отказался отображать ... в кадре, потому что он установил для параметра X-Frame-Options значение одинаковое происхождение.

Мы используем oAuth v2 с Reactjs. Дело в том, что у нас есть продукт SAAS для веб-маркетинга, а также приложение для интеграции, которое работает в iframe. И эта проблема возникает только с приложением интеграции на основе iframe. Есть ли способ побороть это и как-то заставить работать в iframe?


reactjs javascript x-frame-options oauth-2.0 oauth
person Community    schedule 28.08.2020    source источник

Ответы (3)


arrow_upward
0
arrow_downward

У нас была аналогичная проблема с интеграцией 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)
        }
      },

Предположим, у вас уже есть служба аутентификации для вашей интеграции, поэтому не будем углубляться в создание полной службы. Но что вы можете сделать на основе приведенного выше примера:

  • Вы можете иметь authorizeRedirect(options) для авторизации на вашей основной платформе на той же странице, что и обычно.
  • Используйте отдельный authorizeNewWindow(options) для открытия страницы авторизации на новой пустой странице. Его можно использовать для iframe.
  • Последний authorize({ type, ...options }) вы можете использовать в желаемом компоненте или на странице.

Конечно, это не дает хорошего пользовательского опыта, но, поскольку нет другого способа преодолеть это, это лучше, чем сбой пользовательского интерфейса.

person Community    schedule 31.03.2021
comment
Большое спасибо. Такой подход решил нашу проблему. - person ; 03.04.2021

arrow_upward
1
arrow_downward

Сайт намеренно блокирует это из соображений безопасности.

Если бы существовал обходной путь, это означало бы, что вы обнаружили серьезную ошибку безопасности. Конечная точка oauth2 не хочет, чтобы вы вставляли это в iframe, поэтому либо:

  1. Измените сервер oauth2, чтобы разрешить это
  2. Примите тот факт, что вы не можете это изменить, и попытайтесь решить эту проблему, не используя фреймы.
person Evert    schedule 28.08.2020

arrow_upward
1
arrow_downward

Почти все серверы авторизации будут делать это, чтобы защитить себя от атак типа «кликджекинг». Если вы являетесь владельцем сервера, вы можете переопределить его для определенных надежных источников.

Но это может быть полностью не исправлено, поскольку большинство веб-страниц не позволяют запускать себя в окнах iframe.

Один из вариантов, который может сработать, - это войти в систему через всплывающее окно, но с точки зрения удобства использования это выглядит плохо.

На сегодняшний день лучшим решением является отказ от запуска вашего веб-приложения в iframe. Они являются большим источником проблем. Не могли бы вы объяснить, зачем вам это нужно?

person Gary Archer    schedule 28.08.2020
comment
Когда я открываю его в пустом окне, он работает, но не знаю, как вернуться в предыдущее окно. - person ; 28.08.2020