fix(core): escape node labels (#1695)

* fix(core): escape node labels Signed-off-by: braks <[email protected]> * chore(changeset): add Signed-off-by: braks <[email protected]> --------- Signed-off-by: braks <[email protected]>
bcakmakoglu · Nov 13, 2024 · f7a2664 · f7a2664
1 parent 4b8139d
commit f7a2664
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/tame-cups-tan.md b/.changeset/tame-cups-tan.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Escape node labels and avoid rendering them as innerHTML
diff --git a/packages/core/src/components/Nodes/DefaultNode.ts b/packages/core/src/components/Nodes/DefaultNode.ts
@@ -1,5 +1,5 @@
 import type { Component, FunctionalComponent } from 'vue'
-import { h } from 'vue'
+import { Fragment, h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '../../types'
 import { Position } from '../../types'
@@ -17,7 +17,7 @@ const DefaultNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
 
   return [
     h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
-    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
+    typeof label !== 'string' && label ? h(label) : h(Fragment, [label]),
     h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
   ]
 }

diff --git a/packages/core/src/components/Nodes/InputNode.ts b/packages/core/src/components/Nodes/InputNode.ts
@@ -1,5 +1,5 @@
 import type { Component, FunctionalComponent } from 'vue'
-import { h } from 'vue'
+import { Fragment, h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '../../types'
 import { Position } from '../../types'
@@ -14,7 +14,7 @@ const InputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
   const label = data.label || _label
 
   return [
-    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
+    typeof label !== 'string' && label ? h(label) : h(Fragment, [label]),
     h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
   ]
 }

diff --git a/packages/core/src/components/Nodes/OutputNode.ts b/packages/core/src/components/Nodes/OutputNode.ts
@@ -1,5 +1,5 @@
 import type { Component, FunctionalComponent } from 'vue'
-import { h } from 'vue'
+import { Fragment, h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '../../types'
 import { Position } from '../../types'
@@ -15,7 +15,7 @@ const OutputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
 
   return [
     h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
-    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
+    typeof label !== 'string' && label ? h(label) : h(Fragment, [label]),
   ]
 }