SSO не работает, когда ссылка на таблицу вставлена ​​в iframe в угловой 4

Question

Я создал приложение в angular 4 и пытаюсь встроить табличные панели в приложение.

Встроенная панель инструментов таблицы запрашивает вход.

<iframe src="https://tableauserver/view/dashboard/12345" sandbox="allow-top-navigation allow-same-origin allow-scripts allow-forms allow-popups"></iframe>

Но на самом деле, когда мы открываем ту же ссылку в новой вкладке, она аутентифицируется с помощью sso и открывает панель мониторинга. ссылка в адресной строке

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

может кто-нибудь подсказать, как выполнить эту аутентификацию sso с помощью iframe

Answer 1

Это известная функция безопасности, предотвращающая проблемы с безопасностью CORS (Cross-Origin Resource Sharing) и CSRF (Cross-Site Request Forger). Это определенный вектор атаки в браузерах, использующих iframes и SSO (не ограничиваясь только Tableau), поэтому большинство браузеров не разрешают его.

У вас есть три варианта, в зависимости от настроек вашего сайта и уровня риска, на который вы готовы пойти.

Вариант 1 (лучший вариант): не используйте iframe. Вместо этого используйте тег <embed>, предоставленный Tableau, когда вы нажимаете кнопку «Вставить» в вашем браузере. Смотри https://onlinehelp.tableau.com/current/pro/desktop/en-us/shareworkbooks.htm#shareworkbooks.html.

Вариант 2 (не рекомендуется): отключите защиту CSRF на вашем веб-сервере. Используйте это на свой страх и риск. По сути, не делай этого. Я перечислю это здесь в образовательных целях.

Вариант 3 (безопасно, но требует больше работы): используйте API Tableau Javascript с Trusted Authentication для встраивания визуализаций в вашу веб-страницу. Занимает много работы; тег <embed> намного проще.

Мы выбрали вариант 1, и с тех пор проблем не было.