diff --git a/.changeset/tame-cups-tan.md b/.changeset/tame-cups-tan.md new file mode 100644 index 00000000..8e10592e --- /dev/null +++ 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 index 839e7a7f..e8af0cbd 100644 --- 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> = 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 index c963faaf..bc892265 100644 --- 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> = 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 index 02fb7933..a0cffdc1 100644 --- 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> = 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]), ] }