GitHub user dosubot[bot] added a comment to the discussion: Superset Embedded SDK
<!-- Answer --> The Superset Embedded SDK lets you securely embed Superset dashboards into your own web applications, typically using an iframe. It's designed for scenarios where you want users to view analytics inside your app without logging directly into Superset, and is the only officially supported method for embedding dashboards when using OAuth/SSO setups [source](https://github.com/apache/superset/discussions/35231). **How to use it:** 1. **Prerequisites:** - Enable the `EMBEDDED_SUPERSET` feature flag in Superset. - Set a strong password for `GUEST_TOKEN_JWT_SECRET` in your Superset config. - Make sure your dashboard is published and configured for embedding, and your embedding domain is allowed in Superset's settings [source](https://github.com/apache/superset/blob/master/superset-embedded-sdk/README.md). 2. **Install the SDK:** - With npm: `npm install --save @superset-ui/embedded-sdk` - Or load from CDN: `<script src="https://unpkg.com/@superset-ui/embedded-sdk";></script>` 3. **Backend setup:** - You need an API endpoint in your backend to generate a guest token (JWT), signed with the same secret as Superset. Superset does not generate these tokens for you. - Example (Node.js/Next.js): ```js import jwt from "jsonwebtoken"; export default function handler(req, res) { const payload = { user: { username: "viewer" }, resources: [{ type: "dashboard", id: "<dashboard_id>" }], rls: [], type: "guest", aud: "superset", }; const token = jwt.sign( payload, process.env.SUPERSET_SECRET, // Same as GUEST_TOKEN_JWT_SECRET { algorithm: "HS256", expiresIn: "10m" } ); res.status(200).send(token); } ``` - Your frontend fetches this token and passes it to the SDK [source](https://github.com/apache/superset/issues/36377). 4. **Embed the dashboard:** - Example usage: ```js import { embedDashboard } from "@superset-ui/embedded-sdk"; embedDashboard({ id: "abc123", // dashboard id supersetDomain: "https://superset.example.com";, mountPoint: document.getElementById("my-superset-container"), fetchGuestToken: () => fetch("/api/superset-token").then(res => res.text()), dashboardUiConfig: { hideTitle: true, filters: { expanded: true } }, iframeSandboxExtras: ['allow-top-navigation'], referrerPolicy: "same-origin" }); ``` - You can customize the embedded dashboard's UI (hide title, tabs, controls, filters), pass URL params, and configure iframe sandbox and referrer policy [source](https://github.com/apache/superset/blob/master/superset-embedded-sdk/README.md). 5. **Advanced features:** - The SDK provides an API for programmatic interaction (get active tabs, chart states, data masks, chart data payloads, set theme config/mode). - You can customize permalink URLs generated inside embedded dashboards using the `resolvePermalinkUrl` callback [source](https://github.com/apache/superset/pull/36924). **Troubleshooting:** - Make sure your guest token includes the correct dashboard id, is signed with the right secret/audience, and hasn't expired. - Configure CORS, X-Frame-Options, and allowed_domains properly in Superset. - If you see a 403 error, double-check all config steps and permissions [source](https://github.com/apache/superset/issues/33902). For full details and code samples, check the [official README](https://github.com/apache/superset/blob/master/superset-embedded-sdk/README.md). <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/1b324a19-a2ca-43ed-beb7-27d21d2e6de9?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/1b324a19-a2ca-43ed-beb7-27d21d2e6de9?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/1b324a19-a2ca-43ed-beb7-27d21d2e6de9?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/1b324a19-a2ca-43ed-beb7-27d21d2e6de9?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/1b324a19-a2ca-43ed-beb7-27d21d2e6de9?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/1b324a19-a2ca-43ed-beb7-27d21d2e6de9?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/1b324a19-a2ca-43ed-beb7-27d21d2e6de9?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=The%20Superset%20Embedded%20SDK%20lets%20you%20securely%20embed%20Superset%20dashboards%20into%20your%20own%20web%20applications%2C%20typically%20using%20an%20iframe.%20It%27s%20designed%20for%20scenarios%20where%20you%20want%20users%20to%20view%20analytics%20inside%20your%20app%20without%20logging%20directly%20into%20Superset%2C%20and%20is%20the%20only%20officially%20supported%20method%20for%20embedding%20dashboards%20when%20using%20OAuth/SSO%20setups%20%5Bsource%5D%28https%3A//github.com/apache/superset/discussions/35231%29.%0A%0A%2A%2AHow%20to%20use%20it%3A%2A%2A%0A%0A1.%20%2A%2APrerequisites%3A%2A%2A%20%20%0A%20%20%20-%20Enable%20the%20%60EMBEDDED_SUPERSET%60%20feature%20flag%20in%20Superset.%0A%20%20%20-%20Set%20a%20strong%20password%20for%20%60G UEST_TOKEN_JWT_SECRET%60%20in%20your%20Superset%20config.%0A%20%20%20-%20Make%20sure%20your%20dashboard%20is%20published%20and%20configured%20for%20embedding%2C%20and%20your%20embedding%20domain%20is%20allowed%20in%20Superset%27s%20settings%20%5Bsource%5D%28https%3A//github.com/apache/superset/blob/master/superset-embedded-sdk/README.md%29.%0A%0A2.%20%2A%2AInstall%20the%20SDK%3A%2A%2A%20%20%0A%20%20%20-%20With%20npm%3A%20%20%0A%20%20%20%20%20%60npm%20install%20--save%20%40superset-ui/embedded-sdk%60%20%20%0A%20%20%20-%20Or%20load%20from%20CDN%3A%20%20%0A%20%20%20%20%20%60%3Cscript%20src%3D%22https%3A//unpkg.com/%40superset-ui/embedded-sdk%22%3E%3C/script%3E%60%0A%0A3.%20%2A%2ABackend%20setup%3A%2A%2A%20%20%0A%20%20%20-%20You%20need%20an%20API%20endpoint%20in%20your%20backend%20to%20generate%20a%20guest%20token%20%28JWT%29%2C%20signed%20with%20the%20same%20secret%20as%20Superset.%20Superset%20does%20not%20generate%20these%20tokens%20for%20you.%20%20%0A%20%20%20-%20Example%20%28Node.j s/Next.js%29%3A%20%20%0A%20%20%20%20%20%60%60%60js%0A%20%20%20%20%20import%20jwt%20from%20%22jsonwebtoken%22%3B%0A%20%20%20%20%20export%20default%20function%20handler%28req%2C%20res%29%20%7B%0A%20%20%20%20%20%20%20const%20payload%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20user%3A%20%7B%20username%3A%20%22viewer%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20resources%3A%20%5B%7B%20type%3A%20%22dashboard%22%2C%20id%3A%20%22%3Cdashboard_id%3E%22%20%7D%5D%2C%0A%20%20%20%20%20%20%20%20%20rls%3A%20%5B%5D%2C%0A%20%20%20%20%20%20%20%20%20type%3A%20%22guest%22%2C%0A%20%20%20%20%20%20%20%20%20aud%3A%20%22superset%22%2C%0A%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20const%20token%20%3D%20jwt.sign%28%0A%20%20%20%20%20%20%20%20%20payload%2C%0A%20%20%20%20%20%20%20%20%20process.env.SUPERSET_SECRET%2C%20//%20Same%20as%20GUEST_TOKEN_JWT_SECRET%0A%20%20%20%20%20%20%20%20%20%7B%20algorithm%3A%20%22HS256%22%2C%20expiresIn%3A%20%2210m%22%20%7D%0A%20%20%20%20%20%20%20%29%3B%0A%20%20%20%20%20%20%20res.sta tus%28200%29.send%28token%29%3B%0A%20%20%20%20%20%7D%0A%20%20%20%20%20%60%60%60%0A%20%20%20-%20Your%20frontend%20fetches%20this%20token%20and%20passes%20it%20to%20the%20SDK%20%5Bsource%5D%28https%3A//github.com/apache/superset/issues/36377%29.%0A%0A4.%20%2A%2AEmbed%20the%20dashboard%3A%2A%2A%20%20%0A%20%20%20-%20Example%20usage%3A%0A%20%20%20%20%20%60%60%60js%0A%20%20%20%20%20import%20%7B%20embedDashboard%20%7D%20from%20%22%40superset-ui/embedded-sdk%22%3B%0A%20%20%20%20%20embedDashboard%28%7B%0A%20%20%20%20%20%20%20id%3A%20%22abc123%22%2C%20//%20dashboard%20id%0A%20%20%20%20%20%20%20supersetDomain%3A%20%22https%3A//superset.example.com%22%2C%0A%20%20%20%20%20%20%20mountPoint%3A%20document.getElementById%28%22my-superset-container%22%29%2C%0A%20%20%20%20%20%20%20fetchGuestToken%3A%20%28%29%20%3D%3E%20fetch%28%22/api/superset-token%22%29.then%28res%20%3D%3E%20res.text%28%29%29%2C%0A%20%20%20%20%20%20%20dashboardUiConfig%3A%20%7B%20hideTitle%3A%20true%2C%20filters%3A%20%7B%20expanded% 3A%20true%20%7D%20%7D%2C%0A%20%20%20%20%20%20%20iframeSandboxExtras%3A%20%5B%27allow-top-navigation%27%5D%2C%0A%20%20%20%20%20%20%20referrerPolicy%3A%20%22same-origin%22%0A%20%20%20%20%20%7D%29%3B%0A%20%20%20%20%20%60%60%60%0A%20%20%20-%20You%20can%20customize%20the%20embedded%20dashboard%27s%20UI%20%28hide%20title%2C%20tabs%2C%20controls%2C%20filters%29%2C%20pass%20URL%20params%2C%20and%20configure%20iframe%20sandbox%20and%20referrer%20policy%20%5Bsource%5D%28https%3A//github.com/apache/superset/blob/master/superset-embedded-sdk/README.md%29.%0A%0A5.%20%2A%2AAdvanced%20features%3A%2A%2A%20%20%0A%20%20%20-%20The%20SDK%20provides%20an%20API%20for%20programmatic%20interaction%20%28get%20active%20tabs%2C%20chart%20states%2C%20data%20masks%2C%20chart%20data%20payloads%2C%20set%20theme%20config/mode%29.%0A%20%20%20-%20You%20can%20customize%20permalink%20URLs%20generated%20inside%20embedded%20dashboards%20using%20the%20%60resolvePermalinkUrl%60%20callback%20%5Bsource%5D%28https%3A//github .com/apache/superset/pull/36924%29.%0A%0A%2A%2ATroubleshooting%3A%2A%2A%20%20%0A-%20Make%20sure%20your%20guest%20token%20includes%20the%20correct%20dashboard%20id%2C%20is%20signed%20with%20the%20right%20secret/audience%2C%20and%20hasn%27t%20expired.%0A-%20Configure%20CORS%2C%20X-Frame-Options%2C%20and%20allowed_domains%20properly%20in%20Superset.%0A-%20If%20you%20see%20a%20403%20error%2C%20double-check%20all%20config%20steps%20and%20permissions%20%5Bsource%5D%28https%3A//github.com/apache/superset/issues/33902%29.%0A%0AFor%20full%20details%20and%20code%20samples%2C%20check%20the%20%5Bofficial%20README%5D%28https%3A//github.com/apache/superset/blob/master/superset-embedded-sdk/README.md%29.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3 A//github.com/apache/superset/discussions/36975) GitHub link: https://github.com/apache/superset/discussions/36975#discussioncomment-15443100 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
