What am I missing while trying to embed a dashboard?

[chrisjung-dev]

So. I found the embedded SDK. Understood the part about the token. Found out that the doc told nothing about /api/v1/ prefix 🙈

Tried to find the bug by posting via insomnia. This is the result (using the standard dataset).

What I don't get is this:

> The agent making the POST request must be authenticated with the can_grant_guest_token permission. (found it)

Tried to hunt down in the repo but this seems to be only in the route definition, not even can use this role in admin backend.

* Preparing request to http://localhost:8088/api/v1/security/guest_token
* Current time is 2022-02-18T13:32:59.151Z
* Using libcurl/7.73.0 OpenSSL/1.1.1i zlib/1.2.11 brotli/1.0.7 zstd/1.4.9 libidn2/2.0.4 libssh2/1.9.0 nghttp2/1.42.0
* Using default HTTP version
* Disable timeout
* Enable automatic URL encoding
* Disable SSL validation
* Enable cookie sending with jar of 0 cookies
* Connection 16 seems to be dead!
* Closing connection 16
* Hostname localhost was found in DNS cache
*   Trying 127.0.0.1:8088...
* Connected to localhost (127.0.0.1) port 8088 (#17)

> POST /api/v1/security/guest_token HTTP/1.1
> Host: localhost:8088
> User-Agent: insomnia/2021.7.2
> Content-Type: application/json
> Accept: */*
> Content-Length: 151

| {
| 	"user": {
| 		"username": "admin",
| 		"first_name": "Stan",
| 		"last_name": "Lee"
| 	},
| 	"resources": [
| 		{
| 			"type": "dashboard",
| 			"id": "10"
| 		}
| 	]
| }

* upload completely sent off: 151 out of 151 bytes
* Mark bundle as not supporting multiuse

< HTTP/1.1 308 PERMANENT REDIRECT
< Server: gunicorn
< Date: Fri, 18 Feb 2022 13:32:59 GMT
< Connection: keep-alive
< Content-Type: text/html; charset=utf-8
< Content-Length: 307
< Location: http://localhost:8088/api/v1/security/guest_token/


* Ignoring the response-body
* Received 307 B chunk
* Connection #17 to host localhost left intact
* Issue another request to this URL: 'http://localhost:8088/api/v1/security/guest_token/'
* Found bundle for host localhost: 0x294e8ee49510 [serially]
* Can not multiplex, even if we wanted to!
* Re-using existing connection! (#17) with host localhost
* Connected to localhost (127.0.0.1) port 8088 (#17)

> POST /api/v1/security/guest_token/ HTTP/1.1
> Host: localhost:8088
> User-Agent: insomnia/2021.7.2
> Content-Type: application/json
> Accept: */*
> Content-Length: 151

| {
| 	"user": {
| 		"username": "admin",
| 		"first_name": "Stan",
| 		"last_name": "Lee"
| 	},
| 	"resources": [
| 		{
| 			"type": "dashboard",
| 			"id": "10"
| 		}
| 	]
| }

* upload completely sent off: 151 out of 151 bytes
* Mark bundle as not supporting multiuse

< HTTP/1.1 401 UNAUTHORIZED
< Server: gunicorn
< Date: Fri, 18 Feb 2022 13:32:59 GMT
< Connection: keep-alive
< Content-Type: application/json
< Content-Length: 39


* Received 39 B chunk
* Connection #17 to host localhost left intact

[chrisjung-dev]

Okay folks,

the guest token things are now solved.

Still there's an issue about using the embedded url.

tried domain only, with /superset prefix, with /api/v1 prefix, nothing works.

[chrisjung-dev]

To be sure that there are no issues with cross-domain-js stuff, I built a small Caddy Server File

{
    debug
    http_port 2016
}
:2016
root * client # here lies an index.html with embedded-sdk
file_server
tls internal

# my token generator which logins to superset to get a jwt and uses this to get a guest token, 
reverse_proxy /api/token http://localhost:3000 
 
# proxy all the superset path (at least the few i have seen)
reverse_proxy /api/v1/* http://localhost:8088
reverse_proxy /superset/* http://localhost:8088
reverse_proxy /dashboard/* http://localhost:8088

# all suppath of /embed/ will be redirected to proxy without the /embed/ prefix
handle_path /embed/* {
        rewrite * {path}
        reverse_proxy localhost:8088
}

Still it does this:

(highlighted the embed reverseproxy to show the redirection is done correct)

[chrisjung-dev]

Not sure whats wrong and I'm almost giving up.

Got this backend route to get the guest token. All this token stuff is working correct:

First Request gets Admin users JWT, second gets guest token containing the body plus some extra infos.

  @Get('token/local')
  async getTokenLocal(): Promise<Record<any, any>> {
    const { data: token } = await axios.post(
      'http://superset:8088/api/v1/security/login',
      {
        username: 'admin',
        password: 'admin',
        provider: 'db',
        refresh: false,
      },
    );

    console.log('###');
    console.log(token.access_token);

    // return token;

    try {
      const { data } = await axios.post(
        'http://superset:8088/api/v1/security/guest_token',
        {
          user: {
            username: 'guest',
            first_name: 'Peter',
            last_name: 'Leser',
          },
          rls: [],
          resources: [
            {
              type: 'dashboard',
              id: '22d40c6d-eca6-42cb-bd1a-f3f748718add',
            },
          ],
        },
        {
          headers: {
            // 'Content-Type': 'application/json',
            Authorization: `Bearer ${token.access_token}`, // das ist ist das Token aus dem ersten Request
          },
        },
      );
      // console.log(data);
      return data;
    } catch (e) {
      // console.error(e.message);
      // console.error(e);
      return e;
    }
  }

but still:

The correct dashboard gets identified and still throws 403 errors. I even added all users to the access list in Superset UI.

[RashmiApine]

@apole
Maybe a problem with your payload, what payload did you use while generating the guest token?
It's not compulsory to use the ReactJS app, it should work with a static .html file.
also share static .html file for reference.

[apole]

@RashmiApine ,

This is my payload for guest token,

{
"user": {"username": "MyAppUser", "first_name": "MyAppUser",
"last_name": "MyAppUser"}, 
"resources":[{"type": "dashboard", "id": "ac17c54f-11dd-4a2c-9525-cd5e8ab62580"}],
"rls":[ ]
}

My static html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" id="mymeta">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Superset</title>
  <script src="https://unpkg.com/@superset-ui/embedded-sdk"> </script>
  <style>
    iframe {
      width: 100%;
      height: 50%;
      border: none;
    }
      pretext {
        margin-right: 10%;
        margin-left: 10%;
        font-family: Tahoma;
      }
  </style>
  </head>
<body>


  <div class="pretext">
    <h1>Hello World Superset embedded Token!</h1> 
    <p id="my-superset-container"></p> 
<script>
  supersetEmbeddedSdk.embedDashboard(
    { 
      id: "ac17c54f-11dd-4a2c-9525-cd5e8ab62580", // given by the Superset embedding UI 
      supersetDomain: "http://<>/",  
      mountPoint: document.getElementById("my-superset-container"),
      fetchGuestToken: () =>  "<guest token from postman>", 
      dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional)
        hideTitle: true,
        hideChartControls: true,
        hideTab: true,
            filters: {
            expanded: false,
        }
      },
    }
   );
  </script>
</div>
</body>
</html>

[RashmiApine]

@apole I cross-checked the guest token payload and static HTML file. both seem to be correct.
Please try to add the below permission to the "public" role. Not sure it might be helpful or nor.

[apole]

It worked for me after accessing it from http://localhost:8080 and updating this link in origins.

[abdfahmia]

i use static html too but, but cannot load, this my bug, can u help me

[blue-lm]

I'm currently struggling to implement this functionality myself. Which is why I haven't responded so far, but if you get this to work I would be very interested to know!

When I look at your GET request, the URL used ends with "dashboard/10". However, based on my (limited) understanding I thought this should be something like "http://[superseturl]/embedded/22d40c6d-eca6-42cb-bd1a-f3f748718add".

In the frontend embed dashboard section, what do you use as dashboard id? Do you use 10, or 22d40c6d-eca6-42cb-bd1a-f3f748718add? My understanding is that is should be 22d40c6d-eca6-42cb-bd1a-f3f748718add.

embedDashboard({
  id: "abc123", // given by the Superset embedding UI
  supersetDomain: "https://superset.example.com",
  mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
  fetchGuestToken: () => fetchGuestTokenFromBackend(),
  dashboardUiConfig: { hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
});_

I'm also getting the same "Buffer" error as you, and when I import Buffer I get a different error. I've been struggling for many days on this. My problem is that I seem to get the connections working, but I just get an empty iFrame (after briefly showing the Superset logo) instead of the embedded dashboard.

I hope that you don't have to give up and can get this working soon!

[blue-lm]

This is what I'm currently getting - lots of javascript being loaded, but no contents in the iFrame:

The request is as follows:
Request URL: http://[supersetURL]/embedded/716c55fa-1c52-42e8-b0b0-e82b08993e66
Request Method: GET
Status Code: 200 OK
Remote Address: [supersetURL]
Referrer Policy: strict-origin-when-cross-origin

[elhardoum]

The dashboard id is actually translated to its numerical form by the JS sdk (you may check your superset dashboard URL, it must have /10 in it), and for the Buffer problem, make sure your fetchGuestTokenFromBackend function returns a promise, which resolves with a string, i.e the access token, not an object or undefined.

Edit - there's more to it to actually fix that buffer issue (it popped up again), as superset expects the Buffer global to be available, that isn't the case in a browser deployment. So you could do the following in your react app:

1. Install buffer package:

npm install buffer --save

2. Register the window variable, typically done in your app's index.js file (i.e before other superset sdk is called)

import { Buffer } from 'buffer'
// ...

window.Buffer = window.Buffer || Buffer

[Dantunex]

I had a similar problem involving the buffer.
I was getting the error "Buffer is not defined".

I replaced the Buffer function with atob, inside the getGuestTokenRefreshTiming function in the SDK and it stopped giving this error. It might solve your problem too.

// const parsedJwt = JSON.parse(Buffer.from(currentGuestToken.split('.')[1], 'base64').toString());

const parsedJwt = JSON.parse(atob(currentGuestToken.split('.')[1]).toString());

[blue-lm]

Thank you @elhardoum for your feedback, these tips are very useful - everything is working for me now! And also thanks for your feedback @Dantunex, I haven't tried your solution though as it was already working for me.

[blue-lm]

Maybe this is not the right forum to ask, but are there perhaps any freelance developers who would be interested in helping me implement this functionality? Or any suggestions where to find them? I've already spent too much time trying to implement this and it looks like I'm stuck. Ideally I would like to find someone who has some experience with this functionality, so that he/she (hopefully) doesn't stumble into the same roadblocks that I am.

@campino2k : whatever progress I can make (if any) I'm happy to share any insights so that you can hopefully resolve the problems you're facing too.

[NoorAhmd]

@blue-lm Did you managed to solve the problem. I have actually followed every thing you tried and I am getting the same errors. I have installed in a domain with https. but in local, it works.

[blue-lm]

Hi @NoorAhmd - I was in the end able to solve the problem, however I'm not a fulltime developer myself so I hired a developer to implement a solution for me. So unfortunately I'm not very familiar with the code. I think some of the steps suggested on this forum though may help to resolve some key issues:

• As elhardoum suggests look closely at the fetchGuestTokenFromBackend code which should return a Promise with a string, the access token. You can check the whether the contents of the access token look OK with a site like https://jwt.io/ . He also suggests a solution to the Buffer error.
• The config options described by vigodeltoro are very important, just assign Admin-level access to test if it works. It's not good enough to assign access that only allows you to read the dashboard as you also need permissions to generate the token.
• Also - just to be sure, did you leave the "Allowed Domains" field blank when you click on Embed Dashboard in the SuperSet UI?

Given that you have it working locally but not remotely I guess you should be close to resolving the issue. Have you checked that your superset config is fully the same between your local and remote install?

Sorry I probably won't be able to give more detailed guidance. I like to develop on the side but this problem had too many factors for me to consider, which is why in the end I reached out for support from a developer. Not sure if this is an option for you - either way I truly hope you can solve this! (I know it can be frustrating).

[anied]

One critical piece that was missing for me and that was not clearly spelled out in the Docs-- you need to enable embedding in the Superset Flask instance by setting an EMBEDDED_SUPERSET flag to True in the config-- at a glance looks like it's config.py if you're running it directly on your machine and docker/pythonpath_dev/superset_config.py if you're running it using docker. After that, you'll find a new option added to your dashboard menu: "Embed Dashboard". This will allow you to enable embedding for that particular dashboard and limit the domains into which it can be embedded. It will also provide an id for the dashboard that was different than the uuid I found on my dashboard record. That was the missing piece for me to get this working, anyways. That and, as mentioned above, polyfilling Buffer in the browser environment. For what it is worth this tutorial/walkthrough article on setting up embedding is where I got a lot of this info.

[MMendozaEscalona]

Hello, my error was in allowed_domains. I remove my allowed domain and all fine

[rizacavus]

"superset.example.com" was working. After ugrading to latest version i have to set it to "https://superset.example.com"

[NoorAhmd]

Really? Are you working from local or installed superset to another server and domain.

[rizacavus]

Not local, running on a server in domain.

[pintux]

[SOLVED, see comment below]

Hi, in my backend app I'm trying to to get a guest token to embed a dashboard, but I'm always getting a 308 status, redirect...

The flow I've followed is as in this interesting article, users in Superset are set and all is working using Postman or cURL.

My app is written in node.js, I use needle in the backend to perform HTTP requests. step 1) I'm able to correctly get an access_token calling the /api/v1/security/login API endpoint but, doing the POST to /api/v1/security/guest_token using the Authorization: Bearer <access_token_from_step1> header and sending the expected JSON body I'm always getting a 308 with body: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">\n' + '<title>Redirecting...</title>\n' + '<h1>Redirecting...</h1>\n' + '<p>You should be redirected automatically to target URL: <a href="http://localhost:8088/api/v1/security/guest_token/">http://localhost:8088/api/v1/security/guest_token/</a>. If not click the link.

In the embedded sdk documentation I can read: The agent making the POST request must be authenticated with the can_grant_guest_token permission., I can't understand that...

Any idea about what I'm missing?
Thank you!

[pintux]

Thank you @sanjayssk. Done. But, now I'm getting the 403 errors that @campino2k mentioned in his post. :(

[NoorAhmd]

Any update @pintux ?

[pintux]

Hi,
I've set:

PUBLIC_ROLE_LIKE_GAMMA = True
GUEST_ROLE_NAME = "Gamma"

in my .../superset/docker/pythonpath_dev/superset_config_docker.py file

[temuujinmo4]

how to resolved this error ? @pintux

[Liiion911]

@pintux @temuujinmo4 just change /api/v1/security/guest_token to /api/v1/security/guest_token/

Its redirect for right url with ending /

[sker65]

After I generally managed to setup embedding using a guest token: created an extra role "Guest" and assigned the required roles for the dashboards to embed, I still don't like the concept of "GUEST_ROLE_NAME".

While everything else is bound to users and their roles, for embedding I'm fixed to just one role no matter "who" is requesting the embedded dashboard.

I know that I can restrict the access further by using RLS, but what is the username in the guest token request good for, when it is not impersonated and gets all the roles that user has?? Instead a GUEST_ROLE is used.

Do I miss something or is this simply a bug? I'm using superset based on helm chart 0.6.6

[pedrosteinheiser]

Did you get any result? Because I have the same problem as you. Using Guest Token, my access is only given to the public user, no matter if I bind the user and roles, in the end it get ignored

[sker65]

You always given the permissions for "guest role". You can configure which role will be pickec (default is public), but it will be always the same. The most reasonable approach to me was to create a role "GUEST" explicitly in superset and assign all necessary permissions to it, but this still suffers from the fact that it is just that one role that will be used for all guests in the embedding use case.
If you think of an authenticated app that wants to "embed on behalf of ..." there is no way to map the "app user" to the "embed user".

[kuhnhu]

lots of javascript being loaded, a small iframe being created, keep showing superset loading icon. May I know if relate to dashboard size settings?

[sundar68]

This is my superset_config.py.
What else I have to add. @aehanno

# Flask-WTF flag for CSRF
WTF_CSRF_ENABLED = False
# Add endpoints that need to be exempt from CSRF protection
WTF_CSRF_EXEMPT_LIST = []
# A CSRF token that expires in 1 year
WTF_CSRF_TIME_LIMIT = 60 * 60 * 24 * 365
# Set this API key to enable Mapbox visualizations
MAPBOX_API_KEY = ''

FEATURE_FLAGS = {'DASHBOARD_CROSS_FILTERS' : True, "EMBEDDABLE_CHARTS": True, "EMBEDDED_SUPERSET": True}

SESSION_COOKIE_SAMESITE = None
PUBLIC_ROLE_LIKE_GAMMA = True
ENABLE_PROXY_FIX = True
OVERRIDE_HTTP_HEADERS = {'X-Frame-Options': 'ALLOWALL'}
ALLOW_ORIGINS = ['http://localhost:3010']

# Cross Origin Config
ENABLE_CORS = True
CORS_OPTIONS = {
    'supports_credentials': True,
    'allow_headers': ['*'],
    'resources':['*'],
    'origins': ALLOW_ORIGINS
}

[sundar68]

I added this tested , not solved
GUEST_ROLE_NAME = "Gamma"

[aehanno]

Can you try with GUEST_ROLE_NAME="Admin"
Or adding the rights to the public role to access your database

[sundar68]

Tried GUEST_ROLE_NAME="Admin" and gave all permissions to public. Not resolved.

For getting access_token I am using Admin account and for token I am using public and gamma user.

Please see my config file and help me @aehanno

[sundar68]

This is my react code @aehanno

useEffect(() => {
        const embed = async () => {
          await embedDashboard({
            id: "xyz", // given by the Superset embedding UI
            supersetDomain: "http://xyz:8088",
            mountPoint: document.getElementById("dashboard"), // html element in which iframe render
            fetchGuestToken: () => getToken()
          })
        }
        if (document.getElementById("dashboard")) {
          embed()
        }
      }, [])
      
      
     < >
           <div id="dashboard"></div>
     </>

[wulfuric]

Hello all, I've had my own fight with getting the embedding functionality to work and want to weigh in.

Ultimately I got it "working" using the buffer fix provided in comments above, I mostly used this - https://github.com/AVEDIAN/Avedian-BI-Embed/blob/master/frontend/src/components/IFrameLoader.tsx but had to put the resolve in the post function, and have it actually resolve the token.

I also had to disable GLOBAL_ASYNC_QUERIES feature flag, we are using web sockets and that is currently broken with the iframe, although I need to do more digging not sure that's a superset issue. In the iframe the fallback to HTTP polling for Global Async also doesn't work, not sure if that is anything embed specific but I think that's a different issue captured here - #19940

Global Async Web Polling Breaks in embeds

I have an embedded dashboard that works fine with global async disabled, but if I enable it with
GLOBAL_ASYNC_QUERIES_TRANSPORT = "polling" The panels all give the Unexpected Error - See More, with the only thing I can tell is failing API calls that I believe are supposed to scrape for global async.

:method: POST
:scheme: https
:path: /api/v1/chart/data?form_data=%7B%22slice_id%22%3A6%7D&dashboard_id=9&force

With one API call per chart.

The original GET api calls for charts work fine, in fact if you click Refresh Dashboard that forces the queries to be executed on the FAB pods, not celery, and that works. It seems like the communication with backend polling global async is broken due to the auth.

This is also accompanied by the message This session has encountered an interruption, and some controls may not work as intended. If you are the developer of this app, please check that the guest token is being generated correctly.. The guest token definitely seems to be working though as with GLOBAL ASYNC disabled this message doesn't render and everything works, it may be triggered when an API call fails not sure.

[aehanno]

Hi @wulfuric, I have the same problem
I wanted to know if you managed to find a way to use both or if you just disabled async queries ?

[gaborlegrady]

For those who run into the "buffer" issue and not using a full node.js framework here is a very ugly but working javascript-only approach:

<script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>
<script>var module = {};
var exports = {};
function require(what) { return exports };
</script>
<script src="https://unpkg.com/base-64"></script>
<script src="https://unpkg.com/base64-js"></script>
<script src="https://unpkg.com/ieee754"></script>
<script src="https://unpkg.com/buffer"></script>
</head>

[cwegener]

This issue? #21641

[artginzburg]

+1 on most of the problems listed in this issue. Gonna post an update here after figuring it out.

[cwegener]

Feel free to tag me with any questions or issues you run in to and I'll try to provide insights and assistance.

[asksonu]

Hi @cwegener , I was getting "Buffer not defined" error and I tried the solution provided by @gaborlegrady. Now I don't see that error but I am seeing this new error "SupersetApiError: Forbidden".
Generated access token using admin user and got guest token for some user. Can you help me resolving this issue. Attaching the screenshot from the browser.

If I manual curl the request with latest guest token provided in header - http://localhost:8088/api/v1/dashboard/1 it says "Signature verification failed".

[EDIT:] I also see this error in superset logs.

Please help.

[shubham19may]

@asksonu where did you use GUEST_ROLE_NAME = "Admin" ?

[cwegener]

GUEST_ROLE_NAME="Admin" is a superset config option that you can set when you configure the other superset config options. (e.g. as described in the Superset documentation - https://superset.apache.org/docs/installation/configuring-superset/)

Using the built-in "Admin" role is not the best way to configure the permissions for the embedded use case.

The recommended way is to use a dedicated role which you create that only has the necessary permissions. E.g. the list of permissions further up in this discussion will usually work well:

#18814 (reply in thread)

[asksonu]

Yes, as mentioned by @cwegener, I have added in superset config file while is passed to superset docker.
I am yet to define the dedicated role with necessary permissions to work.

[RoBYCoNTe]

If you need to configure another role (I suggest that) you can follow this guide I've written (for me too for next projects with superset):
https://blog.robertoconterosito.it/posts/publish-superset-dashboard-on-react-nextjs-apps/

[zeerobug]

For anyone still interested, as specified in the API doc (https://superset.apache.org/docs/api), the exact endpoint is /api/v1/security/guest_token/ with a slash, without the slash the superset server gives a redirect (304) which might cause problems with your CORS Policy.

[aehanno]

Hey,
When I use display my embedded dashboard in a chrome's private window, I have this error for display filter bar
DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.

There is someone who know how I can fix that ?

[apole]

Trying to write the React app using "@superset-ui/embedded-sdk": "^0.1.0-alpha.8". Get this error during compilation. Thanks in advance.

You may need an appropriate loader to handle this file type.

|                       var iframe = document.createElement('iframe');
|                       var dashboardConfig = dashboardUiConfig ? "?uiConfig=".concat(calculateConfig()) : "";
>                       var filterConfig = dashboardUiConfig?.filters || {};
|                       var filterConfigKeys = Object.keys(filterConfig);
|                       var filterConfigUrlParams = filterConfigKeys.length > 0 ? "&" + filterConfigKeys.map(function (key) {

[putrijuli7]

I also have same error. I have tried to change that line by removing ? and it works. But I think this is not the right way, I'm still looking for a solution for this

[hzdx943]

I have the same problem, I modified the code to
[ const filterConfig = dashboardUiConfig.filters ? dashboardUiConfig.filters : null || {};]
And then compiled successfully.

[apole]

Giving up on embedded-sdk, I started with simple standalone dashboard in iframe.

<iframe id="iframe1" height="100%" width="100%" frameborder="0" scrolling="auto" src="http:///superset/dashboard/world_health?standalone=true" style="height:600px;width:100%;border:none;overflow:hidden;"></iframe>

It shows world health chart loading and then redirects back to login screen.

Logs

Any pointers appreciated. Thanks

[falgunifb]

@cwegener @aehanno Do you have any idea how we can pass native filter value through URL Parameter?
Can you please comment on this.

[da201501245]

@falgunifb have you find solution on this how to pass native filters ?

[dosubot[bot]]

Hey @da201501245, I'm here to help you out with any issues you're facing while waiting for a human maintainer. Let's tackle this together!

To pass native filters in your project, you can use the nativeFilters object to define the filters and the dataMaskWith2Filters object to pass the filter values. Here is an example:

1. Define the Native Filters:

   export const nativeFilters: NativeFiltersState = {
     filters: {
       'NATIVE_FILTER-e7Q8zKixx': {
         id: 'NATIVE_FILTER-e7Q8zKixx',
         name: 'region',
         filterType: 'filter_select',
         targets: [
           {
             datasetId: 2,
             column: {
               name: 'region',
             },
           },
         ],
         defaultDataMask: {
           filterState: {
             value: null,
           },
         },
         cascadeParentIds: [],
         scope: {
           rootPath: ['ROOT_ID'],
           excluded: [],
         },
         controlValues: {
           multiSelect: false,
           enableEmptyFilter: false,
           inverseSelection: false,
         },
         type: NativeFilterType.NativeFilter,
         description: '',
         chartsInScope: [18],
       },
       'NATIVE_FILTER-x9QPw0so1': {
         id: 'NATIVE_FILTER-x9QPw0so1',
         name: 'country_code',
         filterType: 'filter_select',
         targets: [
           {
             datasetId: 2,
             column: {
               name: 'country_code',
             },
           },
         ],
         defaultDataMask: {
           filterState: {
             value: null,
           },
         },
         cascadeParentIds: [],
         scope: {
           rootPath: ['ROOT_ID'],
           excluded: [],
         },
         controlValues: {
           multiSelect: false,
           enableEmptyFilter: false,
           inverseSelection: false,
         },
         type: NativeFilterType.NativeFilter,
         description: '2 letter code',
         chartsInScope: [18],
       },
     },
   };

2. Pass the Filter Values:

   export const dataMaskWith2Filters: DataMaskStateWithId = {
     'NATIVE_FILTER-e7Q8zKixx': {
       id: 'NATIVE_FILTER-e7Q8zKixx',
       ownState: {},
       extraFormData: {
         filters: [
           {
             col: 'region',
             op: 'IN',
             val: ['East Asia & Pacific'],
           },
         ],
       },
       filterState: {
         value: ['East Asia & Pacific'],
       },
     },
     'NATIVE_FILTER-x9QPw0so1': {
       id: 'NATIVE_FILTER-x9QPw0so1',
       ownState: {},
       extraFormData: {},
       filterState: {},
     },
   };

Additionally, you can use utility functions to manage and apply native filters programmatically. For more details, refer to the superset-frontend/spec/fixtures/mockNativeFilters.ts and superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts files ^[1][2].

To continue talking to Dosu, mention @dosu.

[apole]

Get this error in SuperSet logs, embedding not working. I get the reponse back for \roles , but charts do not load

10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.41"
98.42.177.91 - - [25/Mar/2023:23:18:22 +0000] "GET /static/appbuilder/css/flags/flags16.css HTTP/1.1" 200 1639 "http:////embedded/ab09a2fc-66af-4f99-aa6a-b69d4d239f27?uiConfig=11&expand_fil
ters=false" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.41"
File "/usr/local/lib/python3.8/socket.py", line 482, in sendfile
return self._sendfile_use_sendfile(file, offset, count)
File "/usr/local/lib/python3.8/socket.py", line 346, in _sendfile_use_sendfile
self._check_sendfile_params(file, offset, count)
File "/usr/local/lib/python3.8/socket.py", line 460, in _check_sendfile_params
raise ValueError(
ValueError: count must be a positive integer (got 0)

[apole]

98.42.177.91 - - [29/Mar/2023:22:47:52 +0000] "GET /api/v1/dashboard/fda3a078-7001-4366-a383-fa2201269b2b HTTP/1.1" 404 24 "http://superset server addres:443/swagger/v1" "Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.41"

MyAppUser or even Admin is not able to get the dashboard thru Swagger. I get 404 error.

what am I missing? My dashboard doesn't embed so I am trying to find out which API could be failing.

[apole]

When I enable debug on embedded SDK this's all I see, \roles is the last call.

In Superset Action Logs

[apole]

My Superset is still on HTTP, could that be the reason ? Does it have to be HTTPS for embedding to work?

[BaluCse2000]

@apole any luck on this issue? I am also stuck in the same issue. Mine is on https but still embedding doesn't work. All 200 ok in network tab and it loads bunch of Js files but nothing happens at the end. No error in web server log

[hardikchopra242]

Removing / from the end of supersetDomain worked for me

[vddenis]

@BaluCse2000 Any updates?

[imranjoget]

Hi Folks,
I am using the embed sdk to show the dashboard in my java application. following is the sequence of the api calls.

1. http://localhost:8088/api/v1/security/login
2. http://localhost:8088/api/v1/security/csrf_token
3. http://localhost:8088/api/v1/security/guest_token

I am passing all the required payloads and token (headers etc) and it is working perfect when I use the postman. But the same request with the same payload and token (guest_token) giving me 308 (redirect) instead of the guest token.

INFO 20 May 2023 03:44:01 org.joget.marketplace.EmbedApacheSuperset - <!doctype html>_<html lang=en>_<title>Redirecting...</title>_<h1>Redirecting...</h1>_<p>You should be redirected automatically to the target URL: <a href="http://localhost:8088/api/v1/security/guest_token/">http://localhost:8088/api/v1/security/guest_token/</a>. If not, click the link._

I have tried / checked all possibilities but still can't get pass this one.

can anyone please help me and point me in the right direction.

Thanks

[kode-magic]

Add a / at the end of the api urls for csrf_token and guest_token like below:
http://localhost:8088/api/v1/security/csrf_token/
http://localhost:8088/api/v1/security/guest_token/

[imranjoget]

@kode-magic Thank you. It worked like charm.

[BaluCse2000]

I managed to resolve it. I could embed superset dashboards using Iframe in my angular application. Deployed superset in the same sub domain of angular front end to avoid cors issue and same site cookie issue. That did the trick for me

…

On Thu, 27 Jul 2023 at 10:58 PM, Denis Veretelnikov < ***@***.***> wrote: @BaluCse2000 <https://github.com/BaluCse2000> Any updates? — Reply to this email directly, view it on GitHub <#18814 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJ4KG4TLGN3YBIS2MMJ2VMTXSKQKVANCNFSM5OX6DFQQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[BaluCse2000]

Don’t know why this happens even after following what is said in superset documentation to set the right CORS config in superset config file but I managed to resolve this by having a backend api to get security token from super api and then calling the backend api from angular Ui front end. This works for me

…

On Sat, 20 May 2023 at 1:25 AM, imranjoget ***@***.***> wrote: Hi Folks, I am using the embed sdk to show the dashboard in my java application. following is the sequence of the api calls. 1. http://localhost:8088/api/v1/security/login 2. http://localhost:8088/api/v1/security/csrf_token 3. http://localhost:8088/api/v1/security/guest_token I am passing all the required payloads and token (headers etc) and it is working perfect when I use the postman. But the same request with the same payload and token (guest_token) giving me 308 (redirect) instead of the guest token. INFO 20 May 2023 03:44:01 org.joget.marketplace.EmbedApacheSuperset - <!doctype html>_<html lang=en>_<title>Redirecting...</title>_<h1>Redirecting...</h1>_<p>You should be redirected automatically to the target URL: <a href=" http://localhost:8088/api/v1/security/guest_token/"> http://localhost:8088/api/v1/security/guest_token/</a>. If not, click the link._ I have tried / checked all possibilities but still can't get pass this one. can anyone please help me and point me in the right direction. Thanks — Reply to this email directly, view it on GitHub <#18814 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJ4KG4VZFPEOHBCHDXE3ZY3XG7FZTANCNFSM5OX6DFQQ> . You are receiving this because you commented.Message ID: ***@***.***>

[lehug]

for me, the log like this

superset_app          | 172.20.0.1 - - [02/Aug/2023:12:26:16 +0000] "OPTIONS /api/v1/chart/14/data HTTP/1.1" 308 279 "http://localhost:8080/" "Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1" 

this reason is the url I visit, do not match the server provided.
/api/v1/chart/14/data -> /api/v1/chart/14/data/ works.

It seems like Flask think /a/b and /a/b are different. a lit not smart.

[sundaram-dubey]

facing similar issues, where iframe is loading empty, while http://localhost:8088/embedded/51128cff-c846-4e2d-9870-c54e77095383?uiConfig=3 response is coming 200, and dashboard_id: 3 also coming correctly in logs,

here is the code for embedding -

const embed = async () => {
                           await   embedDashboard({
                    id: "51128cff-c846-4e2d-9870-c54e77095383",
                    supersetDomain: "http://localhost:8088",
                    dashboardUiConfig: {
                        hideTab: true,
                        hideTitle: true,
                        hideChartControls: true,
                        filters: {
                            expanded: false,
                            visible: false
                        }},
                    mountPoint: document.getElementById("xyz"),
                    fetchGuestToken: () => Promise.resolve("my-token-from-postman"),
                    debug: true

                })
                }
                       if (document.getElementById("xyz")) {
                           embed();
                       }
                   }

can someone please help here, tried debugging but couldn't find the root cause.

[lifexmetric]

I feel all your pains 🤣 🤣 Wrote a guide on it, hopefully it helps someone 😄 Choose your prefered media 😝

https://huamichaelchen.substack.com/p/end-to-end-example-of-setting-up

https://medium.com/@huamichaelchen/end-to-end-example-of-setting-up-superset-embedded-dashboard-f72fc985559

[jackgray]

Would be nice if you didn't make a paywall to read it

[shanazainab]

I've successfully loaded an embedded dashboard into my React web app, but there's an unusual behavior: whenever I load the embedded dashboard, it seems to log me out from the main Superset dashboard.

[falgunifb]

Using iframe i am using superset dashboard and bypass the login for same but in network section if user open that url in same browser it will open the dashboard without login.
Using samesite cookies=“None”
I don’t want user to open dashboard without login…
Please help me out

[quocviet3110]

My cookie in web is not working when call api /api/v1/me/roles/ .I use cookie in web superset is working . I use "@superset-ui/embedded-sdk

[jackgray]

I want to share this gist as I have recently hurdled many of these issues. It includes all the configuration code for enabling embedded dashboards and CSV exports. It's rough around the edges but the code works, and there is no paywall, unlike the other comment.

https://gist.github.com/jackgray/138c780a0a9e3a59ab51af98da322119