From df2d6027db9935f2028c0319b3324a78ea426e0b Mon Sep 17 00:00:00 2001
From: Tomas Dvorak <contact.dvorak@gmail.com>
Date: Sat, 19 Sep 2026 17:16:58 +0200
Subject: [PATCH] fix(frontend): execute scripts in custom HTML modules (#59)

dangerouslySetInnerHTML never executes embedded <script> tags, so admin-
supplied sidebar/login/footer modules silently dropped scripts. Re-create
each script as a fresh DOM node after injection so it executes normally.
Content remains admin-trusted only; the admin hint now says scripts run.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 frontend/public/locales/en-US/dashboard.json  |  2 +-
 frontend/public/locales/zh-CN/dashboard.json  |  2 +-
 .../component/Common/CustomHTMLContent.tsx    | 33 +++++++++++++++++++
 .../src/component/Frame/HeadlessFrame.tsx     |  5 +--
 .../src/component/Frame/NavBar/AppDrawer.tsx  |  3 +-
 5 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/component/Common/CustomHTMLContent.tsx

diff --git a/frontend/public/locales/en-US/dashboard.json b/frontend/public/locales/en-US/dashboard.json
index 9aa18552..2e9449f7 100644
--- a/frontend/public/locales/en-US/dashboard.json
+++ b/frontend/public/locales/en-US/dashboard.json
@@ -165,7 +165,7 @@
     "customHTML": "Custom HTML",
     "customHTMLDes": "Insert custom HTML content at the preset position of the site.",
     "sidebarBottom": "Sidebar bottom",
-    "sidebarBottomDes": "Custom HTML content displayed at the bottom of the sidebar.",
+    "sidebarBottomDes": "Custom HTML content displayed at the bottom of the sidebar. <script> tags are executed.",
     "addNavItem": "Add navigation item",
     "customNavItems": "Custom sidebar items",
     "customNavItemsDes": "You can add custom items to the sidebar, and users will be redirected to the corresponding link when clicked.",
diff --git a/frontend/public/locales/zh-CN/dashboard.json b/frontend/public/locales/zh-CN/dashboard.json
index 98e9982f..5dc37a97 100644
--- a/frontend/public/locales/zh-CN/dashboard.json
+++ b/frontend/public/locales/zh-CN/dashboard.json
@@ -165,7 +165,7 @@
     "customHTML": "自定义 HTML",
     "customHTMLDes": "在站点的预设位置插入展示自定义的 HTML 内容。",
     "sidebarBottom": "侧边栏底部",
-    "sidebarBottomDes": "在侧边栏底部展示的自定义 HTML 内容。",
+    "sidebarBottomDes": "在侧边栏底部展示的自定义 HTML 内容，支持执行 <script> 脚本。",
     "addNavItem": "添加导航条目",
     "customNavItems": "自定义侧边导航栏",
     "customNavItemsDes": "你可以在左侧导航栏中添加自定义的条目，用户点击后会跳转到对应的链接。",
diff --git a/frontend/src/component/Common/CustomHTMLContent.tsx b/frontend/src/component/Common/CustomHTMLContent.tsx
new file mode 100644
index 00000000..bd22cf5e
--- /dev/null
+++ b/frontend/src/component/Common/CustomHTMLContent.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+
+export interface CustomHTMLContentProps {
+  html: string;
+}
+
+// CustomHTMLContent renders administrator-supplied HTML. Scripts inside the
+// markup do not run when injected via innerHTML, so each <script> element is
+// re-created as a fresh node — dynamically inserted scripts execute normally.
+// The content is trusted by definition (only admins can configure it).
+const CustomHTMLContent = ({ html }: CustomHTMLContentProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) {
+      return;
+    }
+
+    container.querySelectorAll("script").forEach((oldScript) => {
+      const script = document.createElement("script");
+      Array.from(oldScript.attributes).forEach((attr) => {
+        script.setAttribute(attr.name, attr.value);
+      });
+      script.textContent = oldScript.textContent;
+      oldScript.replaceWith(script);
+    });
+  }, [html]);
+
+  return <div ref={ref} dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+export default CustomHTMLContent;
diff --git a/frontend/src/component/Frame/HeadlessFrame.tsx b/frontend/src/component/Frame/HeadlessFrame.tsx
index 56ffaf41..88fb7d15 100644
--- a/frontend/src/component/Frame/HeadlessFrame.tsx
+++ b/frontend/src/component/Frame/HeadlessFrame.tsx
@@ -3,6 +3,7 @@ import { Outlet, useNavigation } from "react-router-dom";
 import { useAppSelector } from "../../redux/hooks.ts";
 import AutoHeight from "../Common/AutoHeight.tsx";
 import CircularProgress from "../Common/CircularProgress.tsx";
+import CustomHTMLContent from "../Common/CustomHTMLContent.tsx";
 import LanguageSwitcher from "../Common/LanguageSwitcher.tsx";
 import PoweredBy from "./PoweredBy.tsx";
 import Logo from "../Common/Logo.tsx";
@@ -93,7 +94,7 @@ const HeadlessFrame = () => {
                     <Outlet />
                     {headless_bottom && (
                       <Box sx={{ width: "100%" }}>
-                        <div dangerouslySetInnerHTML={{ __html: headless_bottom }} />
+                        <CustomHTMLContent html={headless_bottom} />
                       </Box>
                     )}
                   </Box>
@@ -105,7 +106,7 @@ const HeadlessFrame = () => {
           <PoweredBy />
           {headless_footer && (
             <Box sx={{ width: "100%", mb: 2 }}>
-              <div dangerouslySetInnerHTML={{ __html: headless_footer }} />
+              <CustomHTMLContent html={headless_footer} />
             </Box>
           )}
         </Grid>
diff --git a/frontend/src/component/Frame/NavBar/AppDrawer.tsx b/frontend/src/component/Frame/NavBar/AppDrawer.tsx
index 2089923a..53d02e8e 100644
--- a/frontend/src/component/Frame/NavBar/AppDrawer.tsx
+++ b/frontend/src/component/Frame/NavBar/AppDrawer.tsx
@@ -2,6 +2,7 @@ import { Box, Drawer, Popover, PopoverProps, Stack, useMediaQuery, useTheme } fr
 import { useContext, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts";
 import SessionManager from "../../../session";
+import CustomHTMLContent from "../../Common/CustomHTMLContent.tsx";
 import TreeNavigation from "../../FileManager/TreeView/TreeNavigation.tsx";
 import { PageVariant, PageVariantContext } from "../NavBarFrame.tsx";
 import DrawerHeader from "./DrawerHeader.tsx";
@@ -41,7 +42,7 @@ const DrawerContent = () => {
         {isDashboard && <AdminPageNavigation />}
         {sidebar_bottom && (
           <Box sx={{ width: "100%" }}>
-            <div dangerouslySetInnerHTML={{ __html: sidebar_bottom }} />
+            <CustomHTMLContent html={sidebar_bottom} />
           </Box>
         )}
       </Stack>