Embedding an Apache Superset prohibited X-Frame-Options

Question

I want to embed Apache Superset to my React app.

App.js:

import { useEffect } from "react"
import { embedDashboard } from "@superset-ui/embedded-sdk"
import "./App.css"

function App() {
  const getToken = async () => {
            return "token_value"
        }
  useEffect(() => {
    const embed = async () => {
      await embedDashboard({
        id: "dashboard_id", // given by the Superset embedding UI
        supersetDomain: "http://localhost:8088",
        mountPoint: document.getElementById("dashboard"), // html element in which iframe render
        fetchGuestToken: () => getToken(),
        dashboardUiConfig: {
          hideTitle: true,
          hideChartControls: true,
          hideTab: true,
        },
      })
    }
    if (document.getElementById("dashboard")) {
      embed()
    }
  }, [])

  return (
    <div className="App">
      <h1>How to Embed Superset Dashboard into React</h1>
      <div id="dashboard" />
    </div>
  )
}

export default App

npm start fails with:

Loading "http://localhost:8088/embedded/dashboard_id ?uiConfig=11 first, the "X-Frame-Options" directive installed in "sameorigin" is loaded.

And

Failed to execute "postMessage" over "DOMWindow": specified target source ("http://localhost:8088 ") does not match the source of the recipient window ("null").

And when I click "Open website in new window" it appears:

This page is intended to be embedded in an iframe, but it looks like that is not the case.

How fix bug and embedded Apache Superset?

Answer 1

Adding to superset_config.py solved the problem

TALISMAN_ENABLED = False
ENABLE_CORS = True
HTTP_HEADERS={"X-Frame-Options":"ALLOWALL"} 

Answer 2

Add these configs to superset_config.py

OVERRIDE_HTTP_HEADERS = {'X-Frame-Options': 'ALLOWALL'}
TALISMAN_ENABLED = False
ENABLE_CORS = True
HTTP_HEADERS={"X-Frame-Options":"ALLOWALL"}