feat: santinize url input

packages/components/package.json

@@ -118,6 +118,7 @@
     "@types/lodash.throttle": "^4.1.9",
     "atomico": "^1.75.1",
     "clsx": "^2.0.0",
+    "dompurify": "^3.2.5",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "nanoid": "^5.0.9",

packages/components/src/__internal__/components/icon.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import DOMPurify from 'dompurify'
 import { h } from 'vue'
 
 h
@@ -16,7 +17,7 @@ export function Icon({ icon, class: className, onClick }: IconProps) {
       onPointerdown={onClick}
       ref={(el) => {
         if (el && icon) {
-          ;(el as HTMLElement).innerHTML = icon.trim()
+          ;(el as HTMLElement).innerHTML = DOMPurify.sanitize(icon.trim())
         }
       }}
     />

packages/components/src/code-block/view/components/preview-panel.tsx

@@ -9,6 +9,7 @@ import {
 } from 'vue'
 import type { CodeBlockProps } from './code-block'
 import clsx from 'clsx'
+import DOMPurify from 'dompurify'
 
 h
 Fragment
@@ -58,10 +59,11 @@ export const PreviewPanel = defineComponent<PreviewPanelProps>({
 
       const previewContent = preview.value
 
-      if (typeof previewContent === 'string') {
-        previewContainer.innerHTML = previewContent
-      } else if (previewContent instanceof HTMLElement) {
-        previewContainer.appendChild(previewContent)
+      if (
+        typeof previewContent === 'string' ||
+        previewContent instanceof Element
+      ) {
+        previewContainer.innerHTML = DOMPurify.sanitize(previewContent)
       }
     })
 

packages/components/src/image-block/view/index.ts

@@ -6,6 +6,7 @@ import { imageBlockConfig } from '../config'
 import { withMeta } from '../../__internal__/meta'
 import { createApp, ref, watchEffect } from 'vue'
 import { MilkdownImageBlock } from './components/image-block'
+import DOMPurify from 'dompurify'
 
 export const imageBlockView = $view(
   imageBlockSchema.node,
@@ -19,7 +20,13 @@ export const imageBlockView = $view(
       const setAttr = (attr: string, value: unknown) => {
         const pos = getPos()
         if (pos == null) return
-        view.dispatch(view.state.tr.setNodeAttribute(pos, attr, value))
+        view.dispatch(
+          view.state.tr.setNodeAttribute(
+            pos,
+            attr,
+            attr === 'src' ? DOMPurify.sanitize(value as string) : value
+          )
+        )
       }
       const config = ctx.get(imageBlockConfig.key)
       const app = createApp(MilkdownImageBlock, {

packages/components/src/image-inline/view.ts

@@ -2,9 +2,11 @@ import { $view } from '@milkdown/utils'
 import type { NodeViewConstructor } from '@milkdown/prose/view'
 import { imageSchema } from '@milkdown/preset-commonmark'
 import type { Node } from '@milkdown/prose/model'
+import { createApp, ref, watchEffect } from 'vue'
+import DOMPurify from 'dompurify'
+
 import { withMeta } from '../__internal__/meta'
 import { inlineImageConfig } from './config'
-import { createApp, ref, watchEffect } from 'vue'
 import { MilkdownImageInline } from './components/image-inline'
 
 export const inlineImageView = $view(
@@ -19,8 +21,15 @@ export const inlineImageView = $view(
       const setAttr = (attr: string, value: unknown) => {
         const pos = getPos()
         if (pos == null) return
-        view.dispatch(view.state.tr.setNodeAttribute(pos, attr, value))
+        view.dispatch(
+          view.state.tr.setNodeAttribute(
+            pos,
+            attr,
+            attr === 'src' ? DOMPurify.sanitize(value as string) : value
+          )
+        )
       }
+
       const config = ctx.get(inlineImageConfig.key)
       const app = createApp(MilkdownImageInline, {
         src,

packages/components/src/link-tooltip/edit/edit-view.ts

@@ -14,6 +14,7 @@ import {
 } from '../slices'
 import { createApp, ref, type App, type Ref } from 'vue'
 import { EditLink } from './component'
+import DOMPurify from 'dompurify'
 
 interface Data {
   from: number
@@ -80,15 +81,16 @@ export class LinkEditTooltip implements PluginView {
     const view = this.ctx.get(editorViewCtx)
     const { from, to, mark } = this.#data
     const type = linkSchema.type(this.ctx)
-    if (mark && mark.attrs.href === href) {
+    const link = DOMPurify.sanitize(href)
+    if (mark && mark.attrs.href === link) {
       this.#reset()
       return
     }
 
     const tr = view.state.tr
     if (mark) tr.removeMark(from, to, mark)
 
-    tr.addMark(from, to, type.create({ href }))
+    tr.addMark(from, to, type.create({ href: link }))
     view.dispatch(tr)
 
     this.#reset()