SSO not working when tableau link embed in iframe in angular 4

Question

I Have created application in angular 4 and iam trying to embed tableau dashboards in the application.

embeded tableau dashboard is prompting for sign in.

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

But actully when we open same link in the new tab then its getting authenticated using sso and open the dashboard. tablue link in addressbar

when we open the tableau dashboards first in one tab and then in new tab we open the application then the dashboards are displaying.

can any one suggest how to do this sso authentication with in iframe

Answer 1

This is a known security feature to prevent CORS (Cross-Origin Resource Sharing) and CSRF (Cross-Site Request Forgery) security issues. It is a specific attack vector in browsers that use iframes and SSO (not limited to just Tableau) so most browsers will not allow it.

You have three options available, depending on your website setup and the level of risk you are willing to take.

Option 1 (the best option): Don't use an iframe. Instead, use the <embed> tag provided by Tableau when you click the Embed button on your viz in the browser. See https://onlinehelp.tableau.com/current/pro/desktop/en-us/shareworkbooks.htm#shareworkbooks.html.

Option 2 (not recommended): Turn off CSRF protection on your web server. Use this at your own risk and peril. Basically, don't do it. I list it here for education purposes.

Option 3 (safe but takes more work): Use the Tableau Javascript API with Trusted Authentication to embed the visualizations in your webpage. Takes a lot of work; the <embed> tag is a lot easier.

We opted for option 1 and have had no issues since then.