Problem with Superset dashboard embedding in web app

Quick Fix: Edit superset_config.py file with:

OVERRIDE_HTTP_HEADERS = {'X-Frame-Options': 'ALLOWALL'}

Or turn off Talisman via config with:

TALISMAN_ENABLED = False

The Solutions:

Solution: Overriding Default Security Settings

The issue stems from the server’s response setting an iframe security policy to enforce same-origin access. To resolve this, you have two options:

Option 1: Edit superset_config.py

Add the following line to the superset_config.py file:

OVERRIDE_HTTP_HEADERS = {'X-Frame-Options': 'ALLOWALL'}

This will override the default security setting for iframes.

Option 2: Disable Talisman

The Talisman library Superset uses sets the same-origin setting for iframes by default. To disable Talisman, add the following line to your configuration:

TALISMAN_ENABLED = False

Q&A

What is the error you are facing when embedding Superset dashboard in a React JS app?

—

The error is ‘Refused to display in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN”.

What is the reason behind the error?

—

The reason is the Talisman library in the Superset server defaults the same-origin setting for iframes.

What is the work around for the error?

—

The workaround is to turn off Talisman or modify the default Talisman settings in superset_config.py file.

Video Explanation:

The following video, titled "Embedding Dashboards with Superset - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

Taking a walk through a demo of Preset's dashboard embedding features, and fielding numerous questions about how these integrations can be ...

Problem with Superset dashboard embedding in web app – Embedding