Search code examples
reactjsapache-superset

Can not load Dashboard, while embedding Superset Dashboard?

I am able to get GuestToken already via http://localhost:8088/api/v1/security/guest_token/ API. After calling API login and generate CSRF-Token

Here is my extra config at superset_config.py

SESSION_COOKIE_SAMESITE = None
ENABLE_PROXY_FIX = True
PUBLIC_ROLE_LIKE_GAMMA = True

# Dashboard embedding
GUEST_ROLE_NAME = "Gamma"
GUEST_TOKEN_JWT_SECRET = "test-guest-secret-change-me"
GUEST_TOKEN_JWT_ALGO = "HS256"
GUEST_TOKEN_HEADER_NAME = "X-GuestToken"
GUEST_TOKEN_JWT_EXP_SECONDS = 999999  # 
CORS_OPTIONS = {
  'supports_credentials': True,
  'allow_headers': ['*'],
  'resources':['*'],
  'origins': ['http://localhost:8088', 'http://localhost:8888', 'http://localhost:3000']
}
SECRET_KEY = 'JfjCBOaGVWQoJOY4_H_KYUw8AmlJz95Bb58NPh0oyd4='
HTTP_HEADERS={'X-Frame-Options':'SAMEORIGIN'}
ENABLE_CORS = True

Here is my FE code:

const fetchGuestTokenFromBackend = () => {
    return "eyJ0eXAiOiJKV1QiL...qBN9WHK8g"
}

const Dashboard = () => {
  useEffect(() => {
    embedDashboard({
      id: "0e26908b-e69c-454a-a1e9-11d343da1eb2", // given by the Superset embedding UI
      supersetDomain: "http://localhost:8088",
      mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
      fetchGuestToken: () => fetchGuestTokenFromBackend(),
      dashboardUiConfig: {
        // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional)
        hideTitle: true,
        filters: {
          expanded: true
        }
      }
    });
  }, []);
  return (
    <div>
      <p>This is dashboard</p>

      <div
        id="my-superset-container"
        style={{ width: "100vw", height: "100vh" }}
      ></div>
    </div>
  );
};

export default Dashboard;

However, I keep getting the error of localhost refused to connect

enter image description here

Also I saw this in the console.log

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

  • I was also running into this same issue. If you fix the first error about X-Frame-Options set to sameorigin then the following error message will resolve. The culprit is the Talisman library setting sameorigin as the default header response for the iframe.

    You can see my solution to a similar question here: https://stackoverflow.com/a/76757204/13893979