feat: custom values to sandbox iframe (#29590)

superset-embedded-sdk/README.md

@@ -54,6 +54,8 @@ embedDashboard({
           // ...
       }
   },
+    // optional additional iframe sandbox attributes
+  iframeSandboxExtras: ['allow-top-navigation', 'allow-popups-to-escape-sandbox']
 });
 ```
 
@@ -85,8 +87,8 @@ Guest tokens can have Row Level Security rules which filter data for the user ca
 The agent making the `POST` request must be authenticated with the `can_grant_guest_token` permission.
 
 Within your app, using the Guest Token will then allow authentication to your Superset instance via creating an Anonymous user object.  This guest anonymous user will default to the public role as per this setting `GUEST_ROLE_NAME = "Public"`.
-+
+
-+The user parameters in the example below are optional and are provided as a means of passing user attributes that may be accessed in jinja templates inside your charts.
+The user parameters in the example below are optional and are provided as a means of passing user attributes that may be accessed in jinja templates inside your charts.
 
 Example `POST /security/guest_token` payload:
 
@@ -106,3 +108,12 @@ Example `POST /security/guest_token` payload:
   ]
 }
 ```
+### Sandbox iframe
+
+The Embedded SDK creates an iframe with [sandbox](https://developer.mozilla.org/es/docs/Web/HTML/Element/iframe#sandbox) mode by default
+which applies certain restrictions to the iframe's content.
+To pass additional sandbox attributes you can use `iframeSandboxExtras`:
+```js
+  // optional additional iframe sandbox attributes
+  iframeSandboxExtras: ['allow-top-navigation', 'allow-popups-to-escape-sandbox']
+```

superset-embedded-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superset-ui/embedded-sdk",
-  "version": "0.1.0-alpha.11",
+  "version": "0.1.0-alpha.12",
   "description": "SDK for embedding resources from Superset into your own application",
   "access": "public",
   "keywords": [

superset-embedded-sdk/src/index.ts

@@ -62,6 +62,8 @@ export type EmbedDashboardParams = {
   debug?: boolean
   /** The iframe title attribute */
   iframeTitle?: string
+  /** additional iframe sandbox attributes ex (allow-top-navigation, allow-popups-to-escape-sandbox) **/
+  iframeSandboxExtras?: string[]
 }
 
 export type Size = {
@@ -86,6 +88,7 @@ export async function embedDashboard({
   dashboardUiConfig,
   debug = false,
   iframeTitle = "Embedded Dashboard",
+  iframeSandboxExtras = []
 }: EmbedDashboardParams): Promise<EmbeddedDashboard> {
   function log(...info: unknown[]) {
     if (debug) {
@@ -135,8 +138,10 @@ export async function embedDashboard({
       iframe.sandbox.add("allow-downloads"); // for downloading charts as image
       iframe.sandbox.add("allow-forms"); // for forms to submit
       iframe.sandbox.add("allow-popups"); // for exporting charts as csv
-      // add these if it turns out we need them:
+      // additional sandbox props
-      // iframe.sandbox.add("allow-top-navigation");
+      iframeSandboxExtras.forEach((key: string) => {
+        iframe.sandbox.add(key);
+      });
 
       // add the event listener before setting src, to be 100% sure that we capture the load event
       iframe.addEventListener('load', () => {