scripts in HTML are now added to the DOM, instead of being executed in eval

README.md

@@ -231,6 +231,7 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
 ## Changelog
 ### **WORK IN PROGRESS**
 * (foxriver76) fixed issues with the BulkEditor
+* (foxriver76) scripts in HTML are now added to the DOM, instead of being executed in eval
 * (foxriver76) fixed issues with Bulb widget if min/max was once filled
 
 ### 2.9.5 (2023-12-10)

src/src/Vis/Widgets/Basic/BasicHtml.jsx

@@ -88,7 +88,7 @@ class BasicHtml extends VisRxWidget {
     renderWidgetBody(props) {
         super.renderWidgetBody(props);
 
-        return <DangerousHtmlWithScript className="vis-widget-body" html={this.state.rxData.html} isDiv />;
+        return <DangerousHtmlWithScript className="vis-widget-body" html={this.state.rxData.html} isDiv wid={this.props.id} />;
     }
 }
 

src/src/Vis/Widgets/Utils/DangerousHtmlWithScript.tsx

@@ -7,19 +7,36 @@ interface DangerousHtmlWithScriptProps {
     isDiv?: boolean;
     /** Any other props passed to the div or span element */
     [other: string]: any;
+    /** The parent widget id */
+    wid: string;
 }
 
 class DangerousHtmlWithScript extends React.Component<DangerousHtmlWithScriptProps> {
     /**
      * Called once if the component is mounted
+     * We add our scripts to the body here
      */
     componentDidMount(): void {
         const doc = new DOMParser().parseFromString(this.props.html, 'text/html');
         const scriptElements = doc.getElementsByTagName('script');
+        let i = 0;
+
+        const existingScripts = Array.from(document.querySelectorAll("script[type='text/javascript']"));
 
         for (const scriptElement of Array.from(scriptElements)) {
-            // eslint-disable-next-line no-eval
-            eval(scriptElement.innerHTML);
+            const id = `${this.props.wid}-${i++}`;
+            const scriptExists = existingScripts.find(script => script.id === id);
+
+            if (scriptExists) {
+                return;
+            }
+
+            const script = document.createElement('script');
+            script.id = id;
+            script.type = 'text/javascript';
+            script.async = true;
+            script.innerHTML = scriptElement.innerHTML;
+            document.body.appendChild(script);
         }
     }