Блог

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

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

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

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

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

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

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

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

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

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

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

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