Skip to content

refactor: remove DOMPurify dependency and replace MessageBlockThink v-html with vue-markdown-renderer #931

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yyhhyyyyyy merged 2 commits into from
Sep 24, 2025
Merged

refactor: remove DOMPurify dependency and replace MessageBlockThink v-html with vue-markdown-renderer #931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8f7586
refactor: remove DOMPurify dependency and replace MessageBlockThink `…
Simon-He95 Sep 24, 2025
4912172
chore: update
Simon-He95 Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion electron.vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default defineConfig({
main: {
plugins: [
externalizeDepsPlugin({
exclude: ['mermaid', 'dompurify']
exclude: ['mermaid']
}),
],
resolve: {
Expand Down
5 changes: 2 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@
"autoprefixer": "^10.4.21",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"dompurify": "^3.2.6",
"electron": "^37.3.0",
"electron-builder": "26.0.12",
"electron-vite": "^4.0.0",
Expand Down Expand Up @@ -158,10 +157,10 @@
"vitest": "^3.2.4",
"vue": "^3.5.21",
"vue-i18n": "^11.1.11",
"vue-renderer-markdown": "0.0.54-beta.3",
"vue-renderer-markdown": "0.0.54-beta.4",
"vue-router": "4",
"vue-tsc": "^2.2.12",
"vue-use-monaco": "^0.0.29",
"vue-use-monaco": "^0.0.31",
"vue-virtual-scroller": "^2.0.0-beta.8",
Comment on lines +160 to 164
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

🧩 Analysis chain

Bumped renderer markdown + monaco deps: verify compatibility and residual DOMPurify usage

The version bump aligns with the switch to NodeRenderer. Please confirm the new version exposes a default export compatible with your import pattern and that no residual DOMPurify/v-html usage remains.

Run this script to verify:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Check for lingering DOMPurify usage:"
rg -n -C2 -P "(?i)dompurify|sanitizeHtml" -g '!**/dist/**'

echo
echo "Check for lingering v-html in renderer:"
rg -n -C1 -g 'src/renderer/**' -P '\bv-html\b' --type-add 'vue:*.vue'

echo
echo "Check for legacy helpers now replaced by NodeRenderer:"
rg -n -C2 -P '\b(renderMarkdown|getCommonMarkdown)\b'

echo
echo "Confirm NodeRenderer import/usage:"
rg -n -C2 -P "from 'vue-renderer-markdown'|import\\(['\"]vue-renderer-markdown['\"]\\)"

Length of output: 185

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Repo root listing (top-level):"
ls -la || true

echo
echo "Show package.json (first 300 lines) to confirm dependency lines:"
sed -n '1,300p' package.json || true

echo
echo "Search for DOMPurify or sanitizeHtml (case-insensitive). Include hidden/ignored files, but exclude node_modules/dist/build:"
rg -n -C2 -P "(?i)dompurify|sanitizeHtml" -uu --hidden -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' || true

echo
echo "Search for v-html across the repo (include hidden/ignored files):"
rg -n -C1 '\bv-html\b' -uu --hidden -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' || true

echo
echo "Search for legacy helpers now replaced by NodeRenderer (renderMarkdown|getCommonMarkdown):"
rg -n -C2 -P '\b(renderMarkdown|getCommonMarkdown)\b' -uu --hidden -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' || true

echo
echo "Search for imports/usage of vue-renderer-markdown and vue-use-monaco:"
rg -n -C2 -P "vue-renderer-markdown|vue-use-monaco" -uu --hidden -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**' || true

Length of output: 12353

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "rg version and cwd:"
rg --version || true
pwd

echo
echo "Show package.json lines for related deps:"
rg -n --line-number '"vue-renderer-markdown"|"vue-use-monaco"' package.json || true
sed -n '1,320p' package.json | sed -n '1,220p' || true

echo
echo "Search (rg) for DOMPurify / sanitizeHtml (explicit positive glob + exclude common build dirs):"
rg -n -C2 -P "(?i)dompurify|sanitizeHtml" -uu -g '**/*' -g '!.git/**' -g '!node_modules/**' -g '!dist/**' -g '!build/**' || true

echo
echo "Search (rg) for v-html usage under src (explicit positive glob):"
rg -n -C1 '\bv-html\b' -uu -g 'src/**' -g '!.git/**' -g '!node_modules/**' -g '!dist/**' -g '!build/**' || true

echo
echo "Search (rg) for legacy helpers renderMarkdown|getCommonMarkdown:"
rg -n -C2 -P '\b(renderMarkdown|getCommonMarkdown)\b' -uu -g '**/*' -g '!.git/**' -g '!node_modules/**' -g '!dist/**' -g '!build/**' || true

echo
echo "Search (rg) for imports/usages of vue-renderer-markdown / NodeRenderer / vue-use-monaco:"
rg -n -C2 -P "vue-renderer-markdown|NodeRenderer|vue-use-monaco" -uu -g '**/*' -g '!.git/**' -g '!node_modules/**' -g '!dist/**' -g '!build/**' || true

echo
echo "Fallback: grep (case-insensitive) if rg returned nothing (exclude node_modules/dist/build):"
grep -RIn --binary-files=without-match --exclude-dir=node_modules --exclude-dir=dist --exclude-dir=build -e "dompurify" -e "sanitizeHtml" -e "v-html" -e "renderMarkdown" -e "getCommonMarkdown" -e "vue-renderer-markdown" -e "vue-use-monaco" -e "NodeRenderer" . || true

Length of output: 21792

Bumped renderer markdown + monaco deps: confirm NodeRenderer default export & remove legacy helpers/v-html

Found mixed usage: NodeRenderer default imports exist, but legacy helpers and several v-html usages remain; no DOMPurify/sanitizeHtml references found.

  • Confirm NodeRenderer default export is compatible with imports in: src/renderer/src/components/markdown/MarkdownRenderer.vue, src/renderer/src/components/message/MessageBlockThink.vue
  • Replace/remove legacy helpers (renderMarkdown, getCommonMarkdown) used in: src/renderer/src/components/ui/UpdateDialog.vue, src/renderer/src/components/settings/AboutUsSettings.vue
  • Audit and sanitize/remove v-html usages in: src/renderer/src/components/settings/AboutUsSettings.vue (disclaimerContent), src/renderer/src/components/ui/UpdateDialog.vue (releaseNotes), src/renderer/src/components/artifacts/SvgArtifact.vue (sanitizedContent), src/renderer/src/components/MessageNavigationSidebar.vue (highlightSearchQuery)

"vuedraggable": "^4.1.0",
"yaml": "^2.8.1",
Expand Down
12 changes: 0 additions & 12 deletions src/renderer/src/components/artifacts/HTMLArtifact.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,6 @@

<script setup lang="ts">
import { ref, onMounted, computed, watch, onUnmounted } from 'vue'
// import DOMPurify from 'dompurify'

const props = defineProps<{
block: {
Expand Down Expand Up @@ -527,17 +526,6 @@ const handleCornerDragMove = (e: MouseEvent) => {
})
}

// const sanitizedContent = computed(() => {
// if (!props.block.content) return ''
// return DOMPurify.sanitize(props.block.content, {
// WHOLE_DOCUMENT: true,
// ADD_TAGS: ['script', 'style'],
// ADD_ATTR: ['src', 'style', 'onclick'],
// ALLOWED_URI_REGEXP:
// /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|xxx):|[^a-z]|[a-z+.]+(?:[^a-z+.:]|$))/i
// })
// })

const setupIframe = () => {
if (props.isPreview && iframeRef.value) {
const iframe = iframeRef.value
Expand Down
27 changes: 13 additions & 14 deletions src/renderer/src/components/message/MessageBlockThink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,15 @@
}}</span>
</span>
</div>
<div v-show="!collapse" ref="messageBlock" class="w-full relative">
<div
class="prose prose-sm dark:prose-invert w-full max-w-full leading-7 break-all"
v-html="renderedContent"
></div>
<div
v-show="!collapse"
ref="messageBlock"
class="w-full relative prose prose-sm dark:prose-invert max-w-full leading-7 break-all"
>
<NodeRenderer
:renderCodeBlocksAsPre="true"
:content="props.block.content || ''"
></NodeRenderer>
</div>

<Icon
Expand All @@ -34,13 +38,13 @@
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { Icon } from '@iconify/vue'
import { Button } from '@/components/ui/button'
import { computed, onMounted, ref, watch } from 'vue'
import { usePresenter } from '@/composables/usePresenter'
import { renderMarkdown, getCommonMarkdown } from 'vue-renderer-markdown'
import { Icon } from '@iconify/vue'
import { AssistantMessageBlock } from '@shared/chat'
import { computed, onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import NodeRenderer from 'vue-renderer-markdown'
const props = defineProps<{
block: AssistantMessageBlock
usage: {
Expand All @@ -66,11 +70,6 @@ const reasoningDuration = computed(() => {
return parseFloat(duration.toFixed(2))
})

const md = getCommonMarkdown()
const renderedContent = computed(() => {
return renderMarkdown(md, props.block.content || '')
})

watch(
() => collapse.value,
() => {
Expand Down