Отказано в display…in фрейм, потому что он установил ‘X-Frame-Options’ в ‘same origin’ в React

#javascript #reactjs #oauth-2.0 #oauth #x-frame-options

#javascript #reactjs #oauth-2.0 #oauth #x-frame-options

Вопрос:

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

Отказано в отображении… во фрейме, потому что он установил для ‘X-Frame-Options’ значение ‘того же источника.

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

Ответ №1:

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

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

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

Ответ №2:

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

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

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

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

Комментарии:

1. Когда я открываю его в пустом окне, он работает, но не уверен, как вернуться к предыдущему окну.

Ответ №3:

У нас была аналогичная проблема со слабой интеграцией. К сожалению, нет хорошего решения для преодоления этого. Единственное, что вы можете сделать, это открыть новую пустую страницу во время обработки 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 }) вы можете использовать в нужном вам компоненте или странице.

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

Комментарии:

1. Большое спасибо. Этот подход решил нашу проблему.