Problem with superset dashboard embedding in web app

Question

plz help !!!

I'm following this tutorial https://www.tetranyde.com/blog/embedding-superset trying to embed superset dashboard in react Js app.

I think my code is fine but the dashboard is not rendered in the front..
Here is the error :Front

I'm also joining my server code : server.js


import express from "express"
import fetch from "node-fetch"
import cors from "cors"

const PORT = 3001
const app = express()
 // Enable CORS
app.use(cors())
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})

async function fetchAccessToken() {
  try {
    const body = {
      username: "admin",
      password: "admin",
      provider: "db",
      refresh: true,
    }

    const response = await fetch(
      "http://localhost:8088/api/v1/security/login",
      {
        method: "POST",
        body: JSON.stringify(body),
        headers: {
          "Content-Type": "application/json",
        },
      }
    )

    const jsonResponse = await response.json()
    return jsonResponse?.access_token
  } catch (e) {
    console.error(error)
  }
}

async function fetchGuestToken() {
  const accessToken = await fetchAccessToken()
  try {
    const body = {
      resources: [
        {
          type: "dashboard",
          id: "2962c53b-3364-4ad9-b4bd-35f0ff69e909",
        },
      ],
      rls: [],
      user: {
        username: "guest",
        first_name: "Guest",
        last_name: "User",
      },
    }
    const response = await fetch(
      "http://localhost:8088/api/v1/security/guest_token",
      {
        method: "POST",
        body: JSON.stringify(body),
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${accessToken}`,
        },
      }
    )
    const jsonResponse = await response.json()
    return jsonResponse?.token
  } catch (error) {
    console.error(error)
  }
}

app.get("/guest-token", async (req, res) => {
  const token = await fetchGuestToken()
  res.json(token)
})

and my react Home component code :

import React from 'react'

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


function Home() {
  const getToken = async () => {
    const response = await fetch("/guest-token")
    const token = await response.json()
    return token
  }

  useEffect(() => {
    const embed = async () => {
      await embedDashboard({
        id: "2962c53b-3364-4ad9-b4bd-35f0ff69e909", // 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 </h1>
      <div id="dashboard" style={{width:'100%',height:'800px'}}/>
    </div>
  )
}

export default Home

I think that there is a problem with the server but I can't figure it out

score 1 · Answer 1 · answered Jul 24 '23 at 18:37

Pasting the error text here for readability:

Refused to display 'http://localhost/8088' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

This is happening because the response from the server is setting the iframe security to force same origin. Theoretically you should be able to edit the superset_config.py file with

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

but that wasn't working for me. Instead, the culprit is the Talisman library the Superset server is using which defaults the same origin setting for iframes.

To get around that, you have to either modify the default Talisman settings or turn off Talisman via config by

TALISMAN_ENABLED = False

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:8088') does not match the recipient window's origin (null).

This is happening because of the error before, since the iframe doesn't load the iframe origin is null and thus the exception.

Problem with superset dashboard embedding in web app

1 Answers1

Linked