#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, поэтому либо:
- Измените сервер oauth2, чтобы разрешить это
- Примите, что вы не можете это изменить, и попытайтесь решить это, не используя фреймы.
Ответ №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. Большое спасибо. Этот подход решил нашу проблему.