allow only the new slot-element in dynamic render

Author: kchobantonov

packages/jsonforms-vuetify-renderers/src/components/DynamicElement.vue

@@ -24,13 +24,60 @@ const allowedTags = [
   'style',
 ] as const;
 
+const dangerousAttributes = new Set([
+  // HTML injection
+  'innerhtml',
+  'outerhtml',
+  'srcdoc',
+
+  // Form manipulation
+  'action',
+  'formaction',
+  'formenctype',
+  'formmethod',
+  'formtarget',
+
+  // CSS injection
+  'style',
+
+  // Import/module related
+  'import',
+  'importmap',
+
+  // Meta refresh
+  'http-equiv',
+
+  // Sandbox escaping
+  'sandbox',
+]);
+
 type AllowedTag = (typeof allowedTags)[number];
+
 function isAllowedTag(value: any): value is AllowedTag {
   return allowedTags.includes(
     (typeof value === 'string' ? value.toLowerCase() : value) as AllowedTag,
   );
 }
 
+function isSafeUrl(url: string): boolean {
+  const lower = url.toLowerCase().trim();
+
+  if (lower.startsWith('javascript:') || lower.startsWith('data:')) {
+    return false;
+  }
+
+  return (
+    lower.startsWith('/') ||
+    lower.startsWith('./') ||
+    lower.startsWith('../') ||
+    lower.startsWith('http://') ||
+    lower.startsWith('https://') ||
+    lower.startsWith('mailto:') ||
+    lower.startsWith('tel:') ||
+    lower.startsWith('#')
+  );
+}
+
 export default defineComponent({
   name: 'dynamic-element',
   inheritAttrs: false,
@@ -58,8 +105,33 @@ export default defineComponent({
       const safeAttrs: Record<string, unknown> = {};
       for (const [key, val] of Object.entries(attrs)) {
         const lowerKey = key.toLowerCase();
-        if (lowerKey === 'innerhtml') continue;
-        if (lowerKey.startsWith('on')) continue;
+        if (dangerousAttributes.has(lowerKey)) {
+          if (import.meta.env.DEV) {
+            console.warn(
+              `[DynamicElement] Dangerous attribute "${key}" was blocked.`,
+            );
+          }
+          continue;
+        }
+        if (lowerKey.startsWith('on')) {
+          if (import.meta.env.DEV) {
+            console.warn(
+              `[DynamicElement] Event handler "${key}" was blocked.`,
+            );
+          }
+          continue;
+        }
+        if (
+          (lowerKey === 'href' || lowerKey === 'src') &&
+          typeof val === 'string'
+        ) {
+          if (!isSafeUrl(val)) {
+            if (import.meta.env.DEV) {
+              console.warn(`[DynamicElement] Unsafe URL blocked: ${val}`);
+            }
+            continue;
+          }
+        }
         safeAttrs[key] = val;
       }
 

packages/jsonforms-vuetify-renderers/src/components/SlotElement.vue

@@ -0,0 +1,59 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue';
+
+const allowedSlotAttributes = new Set([
+  'name', // Primary slot attribute
+  'slot', // For slot assignment
+  'id', // For targeting
+  'class', // For styling
+  'style', // Safe for slots since they're just placeholders
+  'title', // For accessibility
+  'aria-label',
+  'aria-describedby',
+  'role',
+]);
+
+export default defineComponent({
+  name: 'slot-element',
+  inheritAttrs: false,
+  setup(props, { attrs, slots }) {
+    return () => {
+      const safeAttrs: Record<string, unknown> = {};
+
+      for (const [key, val] of Object.entries(attrs)) {
+        const lowerKey = key.toLowerCase();
+
+        // Block event handlers
+        if (lowerKey.startsWith('on')) {
+          if (import.meta.env.DEV) {
+            console.warn(`[SlotElement] Event handler "${key}" was blocked.`);
+          }
+          continue;
+        }
+
+        // Only allow slot-relevant attributes
+        if (!allowedSlotAttributes.has(lowerKey)) {
+          if (import.meta.env.DEV) {
+            console.warn(
+              `[SlotElement] Irrelevant attribute "${key}" was blocked.`,
+            );
+          }
+          continue;
+        }
+
+        safeAttrs[key] = val;
+      }
+
+      return h(
+        'slot',
+        safeAttrs,
+        Object.keys(slots).length
+          ? Object.fromEntries(
+              Object.entries(slots).map(([name, slotFn]) => [name, slotFn]),
+            )
+          : undefined,
+      );
+    };
+  },
+});
+</script>

packages/jsonforms-vuetify-renderers/src/components/index.ts

@@ -1,5 +1,6 @@
 export { default as ResolvedJsonForms } from './ResolvedJsonForms.vue';
 export { default as DynamicElement } from './DynamicElement.vue';
+export { default as SlotElement } from './SlotElement.vue';
 export { default as TemplateCompiler } from './TemplateCompiler.vue';
 export const VMonacoEditor = () =>
   import('./VMonacoEditor').then((m) => m.VMonacoEditor);

packages/jsonforms-vuetify-renderers/src/renderers/TemplateLayoutRenderer.vue

@@ -67,7 +67,7 @@ import { useFormContext } from '../util';
 
 import { VDefaultsProvider } from 'vuetify/components/VDefaultsProvider';
 import * as defaultDirectives from 'vuetify/directives';
-import DynamicElement from '../components/DynamicElement.vue';
+import SlotElement from '../components/SlotElement.vue';
 import VPane from '../components/VPane.vue';
 import VSplitpanes from '../components/VSplitpanes.vue';
 
@@ -206,7 +206,7 @@ const controlRenderer = defineComponent({
         ...this.defaultComponents,
         VMonacoEditor,
         ValidationIcon,
-        DynamicElement,
+        SlotElement,
         VSplitpanes,
         VPane,
         ...(override ? override : {}),

packages/jsonforms-vuetify-webcomponent/src/web-components/VuetifyJsonForms.ce.vue

@@ -10,7 +10,7 @@
         {{ vuetifyThemeCss }}
       </dynamic-element>
 
-      <dynamic-element tag="slot" name="styles"> </dynamic-element>
+      <slot-element name="styles"></slot-element>
 
       <dynamic-element tag="style" type="text/css" :nonce="stylesheetNonce">
         {{ customStyleToUse }}
@@ -33,9 +33,9 @@
               </v-container>
 
               <template v-else>
-                <dynamic-element tag="slot" name="form-header">
+                <slot-element name="form-header">
                   <!-- Place custom content inside <div slot="form-header"></div> within <vuetify-json-forms> to fill this slot -->
-                </dynamic-element>
+                </slot-element>
 
                 <resolved-json-forms
                   part="json-forms"
@@ -44,9 +44,9 @@
                   @change="onChange"
                 ></resolved-json-forms>
 
-                <dynamic-element tag="slot" name="form-footer">
+                <slot-element name="form-footer">
                   <!-- Place custom content inside <div slot="form-footer"></div> within <vuetify-json-forms> to fill this slot -->
-                </dynamic-element>
+                </slot-element>
               </template>
             </v-sheet>
           </v-defaults-provider>
@@ -63,6 +63,7 @@ import { useAppStore } from '@/store';
 import {
   createTranslator,
   DynamicElement,
+  SlotElement,
   extraVuetifyRenderers,
   type FormContext,
   FormContextKey,
@@ -160,6 +161,7 @@ export default defineComponent({
     VCol,
     VSheet,
     DynamicElement,
+    SlotElement,
   },
   emits: ['change', 'handle-action'],
   props: {