From 3ade01f828059f07484db967ba717f7c3e18b64c Mon Sep 17 00:00:00 2001
From: Darwin Correa <dacopan@users.noreply.github.com>
Date: Wed, 17 Jul 2024 14:14:51 -0500
Subject: [PATCH] feat: custom values to sandbox iframe (#29590)

---
 superset-embedded-sdk/README.md    | 15 +++++++++++++--
 superset-embedded-sdk/package.json |  2 +-
 superset-embedded-sdk/src/index.ts |  9 +++++++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/superset-embedded-sdk/README.md b/superset-embedded-sdk/README.md
index f2f784f28..707523558 100644
--- a/superset-embedded-sdk/README.md
+++ b/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']
+```
diff --git a/superset-embedded-sdk/package.json b/superset-embedded-sdk/package.json
index 2e68f95c8..104aa7c3b 100644
--- a/superset-embedded-sdk/package.json
+++ b/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": [
diff --git a/superset-embedded-sdk/src/index.ts b/superset-embedded-sdk/src/index.ts
index 09814f760..063db77fb 100644
--- a/superset-embedded-sdk/src/index.ts
+++ b/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:
-      // iframe.sandbox.add("allow-top-navigation");
+      // additional sandbox props
+      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', () => {