From b593ebcf604ec44c1d53d1e695b2a659c6276330 Mon Sep 17 00:00:00 2001
From: "Zhen-Lun (Kevin) Hong" <zhenlun.hong01@gmail.com>
Date: Mon, 30 Jun 2025 21:09:42 +0800
Subject: [PATCH] fix: enable iframe script execution (#52257)

* fix: enable iframe script execution

* fix: include vite env variables when transpiling typescripts

* fix: add explanations to sandbox settings

* fix: remove csp change

(cherry picked from commit 4c7d43c4f30f6e09b4afd90e7c0a240cc32ea09b)
---
 airflow-core/src/airflow/ui/src/pages/Security.tsx | 13 +++++++------
 scripts/ci/pre_commit/ts_compile_lint_ui.py        |  2 ++
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/pages/Security.tsx b/airflow-core/src/airflow/ui/src/pages/Security.tsx
index 3a6061478ebad..9de11fc8771c0 100644
--- a/airflow-core/src/airflow/ui/src/pages/Security.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Security.tsx
@@ -43,14 +43,15 @@ export const Security = () => {
     return <ErrorPage />;
   }
 
+  // The following iframe sandbox setting is intentionally less restrictive.
+  // This is considered safe because the framed content originates from the Auth manager,
+  // which is part of the deployment of Airflow and trusted as per our security policy.
+  // https://airflow.apache.org/docs/apache-airflow/stable/security/security_model.html
+  const sandbox = "allow-scripts allow-same-origin allow-forms";
+
   return (
     <Box flexGrow={1} m={-3}>
-      <iframe
-        sandbox="allow-same-origin allow-forms"
-        src={link.href}
-        style={{ height: "100%", width: "100%" }}
-        title={link.text}
-      />
+      <iframe sandbox={sandbox} src={link.href} style={{ height: "100%", width: "100%" }} title={link.text} />
     </Box>
   );
 };
diff --git a/scripts/ci/pre_commit/ts_compile_lint_ui.py b/scripts/ci/pre_commit/ts_compile_lint_ui.py
index 3e817285e2230..93fdcd149b75b 100755
--- a/scripts/ci/pre_commit/ts_compile_lint_ui.py
+++ b/scripts/ci/pre_commit/ts_compile_lint_ui.py
@@ -47,6 +47,8 @@
     all_non_yaml_files = [file for file in files if not file.endswith(".yaml")]
     print("All non-YAML files:", all_non_yaml_files)
     all_ts_files = [file for file in files if file.endswith(".ts") or file.endswith(".tsx")]
+    if all_ts_files:
+        all_ts_files.append("src/vite-env.d.ts")
     print("All TypeScript files:", all_ts_files)
 
     run_command(["pnpm", "config", "set", "store-dir", ".pnpm-store"], cwd=dir)