fix: prevent timer leaks and add HTML sanitization layer

src/components/SafeHtml.vue

@@ -0,0 +1,25 @@
+<template>
+  <component :is="tag" v-if="sanitizedHtml" v-html="sanitizedHtml" />
+  <slot v-else />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { sanitizeHtml } from '../utils/sanitizeHtml'
+
+const props = withDefaults(
+  defineProps<{
+    html?: string
+    tag?: string
+  }>(),
+  {
+    html: '',
+    tag: 'div',
+  },
+)
+
+const sanitizedHtml = computed(() => {
+  if (!props.html) return ''
+  return sanitizeHtml(props.html)
+})
+</script>

src/components/content/DirectoryHub.vue

@@ -658,7 +658,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
   getDirectoryComposioStatus,
@@ -876,6 +876,10 @@ const expandedMcpNames = ref<Set<string>>(new Set())
 const toast = ref<{ text: string; type: 'success' | 'error' } | null>(null)
 let toastTimer: ReturnType<typeof setTimeout> | null = null
 let composioSearchTimer: ReturnType<typeof setTimeout> | null = null
+onBeforeUnmount(() => {
+  if (toastTimer) clearTimeout(toastTimer)
+  if (composioSearchTimer) clearTimeout(composioSearchTimer)
+})
 let isComposioLoadQueued = false
 
 const activeCopy = computed(() => tabs.find((tab) => tab.id === activeTab.value) ?? tabs[0])

src/components/content/SkillDetailModal.vue

@@ -91,6 +91,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import { sanitizeHtml } from '../../utils/sanitizeHtml'
 import { useUiLanguage } from '../../composables/useUiLanguage'
 import IconTablerX from '../icons/IconTablerX.vue'
 
@@ -144,7 +145,7 @@ const renderedReadme = computed(() => {
   const raw = readmeContent.value
   if (!raw) return ''
   const withoutFrontmatter = raw.replace(/^---[\s\S]*?---\s*/, '')
-  return simpleMarkdown(withoutFrontmatter)
+  return sanitizeHtml(simpleMarkdown(withoutFrontmatter))
 })
 
 function simpleMarkdown(md: string): string {

src/components/content/SkillsHub.vue

@@ -145,7 +145,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import IconTablerChevronRight from '../icons/IconTablerChevronRight.vue'
 import SkillCard from './SkillCard.vue'
 import SkillDetailModal, { type HubSkill } from './SkillDetailModal.vue'
@@ -173,6 +173,9 @@ const actionSkillKey = ref('')
 const isInstallActionInFlight = ref(false)
 const isUninstallActionInFlight = ref(false)
 let toastTimer: ReturnType<typeof setTimeout> | null = null
+onBeforeUnmount(() => {
+  if (toastTimer) clearTimeout(toastTimer)
+})
 const { t } = useUiLanguage()
 const { buildFeedbackMailto, feedbackMailtoBase, recordVisibleFailure } = useFeedbackDiagnostics()
 const feedbackMailto = feedbackMailtoBase()

src/components/content/ThreadConversation.vue

@@ -923,6 +923,7 @@ import { updateThreadFileChanges } from '../../api/codexGateway'
 import { useFeedbackDiagnostics } from '../../composables/useFeedbackDiagnostics'
 import { useMobile } from '../../composables/useMobile'
 import { copyTextToClipboard, copyTextWithSelectionFallback } from '../../utils/clipboard'
+import { sanitizeHtml } from '../../utils/sanitizeHtml'
 
 import IconTablerArrowBackUp from '../icons/IconTablerArrowBackUp.vue'
 import IconTablerArrowUp from '../icons/IconTablerArrowUp.vue'
@@ -3626,6 +3627,10 @@ function renderHighlightedCodeAsHtmlUncached(language: string, value: string): s
 }
 
 function renderCachedHighlightedCodeAsHtml(language: string, value: string): string {
+  return sanitizeHtml(_renderCachedHighlightedCodeAsHtml(language, value))
+}
+
+function _renderCachedHighlightedCodeAsHtml(language: string, value: string): string {
   const cacheKey = `${highlightCacheVersion.value}\u0000${normalizeCodeLanguage(language)}\u0000${language}\u0000${value}`
   const cached = highlightHtmlCache.get(cacheKey)
   if (cached !== undefined) {
@@ -3676,7 +3681,7 @@ function renderListItemParagraphsAsHtml(item: ListItem): string {
 function renderListItemContentAsHtml(item: ListItem): string {
   const paragraphsHtml = renderListItemParagraphsAsHtml(item)
   const childrenHtml = item.children?.map((block) => renderMessageBlockAsHtml(block)).join('') ?? ''
-  return paragraphsHtml + childrenHtml
+  return sanitizeHtml(paragraphsHtml + childrenHtml)
 }
 
 function tableCellAlignmentStyle(alignment: TableAlignment): string {
@@ -3754,9 +3759,10 @@ function renderMarkdownBlocksAsHtml(text: string): string {
     markdownHtmlCache.set(cacheKey, cached)
     return cached.html
   }
-  const html = parseMessageBlocks(text)
+  const rawHtml = parseMessageBlocks(text)
     .map((block) => renderMessageBlockAsHtml(block))
     .join('')
+  const html = sanitizeHtml(rawHtml)
   return setBoundedCacheEntry(
     markdownHtmlCache,
     cacheKey,

src/utils/sanitizeHtml.ts

@@ -0,0 +1,71 @@
+/**
+ * Lightweight HTML sanitizer using native browser DOMParser.
+ * Removes dangerous elements (script, iframe, object, embed, style) and
+ * event-handler attributes (onclick, onerror, etc.) from HTML strings.
+ */
+
+const ALLOWED_TAGS = new Set([
+  'a', 'b', 'br', 'code', 'div', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'hr', 'i', 'img', 'li', 'mark', 'ol', 'p', 'pre', 's', 'small', 'span',
+  'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead',
+  'tr', 'ul', 'dl', 'dt', 'dd', 'blockquote', 'details', 'summary',
+])
+
+const DENIED_TAGS = new Set([
+  'script', 'style', 'iframe', 'frame', 'object', 'embed', 'param',
+  'applet', 'link', 'base', 'meta', 'noscript',
+])
+
+/**
+ * Sanitize an HTML string in the browser.
+ * Parses the HTML, strips forbidden tags and attributes, and returns clean HTML.
+ */
+export function sanitizeHtml(raw: string): string {
+  if (typeof DOMParser === 'undefined') return raw
+  if (!raw) return ''
+
+  const doc = new DOMParser().parseFromString(raw, 'text/html')
+
+  // Walk all elements and remove dangerous ones
+  const allElements = doc.body.querySelectorAll('*')
+  for (const el of allElements) {
+    const tag = el.tagName.toLowerCase()
+
+    if (DENIED_TAGS.has(tag)) {
+      el.remove()
+      continue
+    }
+
+    if (!ALLOWED_TAGS.has(tag)) {
+      // Remove unknown tags but keep their text content
+      const parent = el.parentNode
+      if (parent) {
+        while (el.firstChild) {
+          parent.insertBefore(el.firstChild, el)
+        }
+        el.remove()
+      }
+      continue
+    }
+
+    // Remove dangerous attributes (event handlers, javascript: URLs)
+    const attrs = el.attributes
+    for (let i = attrs.length - 1; i >= 0; i--) {
+      const attrName = attrs[i].name.toLowerCase()
+      const attrValue = attrs[i].value.toLowerCase()
+
+      if (attrName.startsWith('on')) {
+        el.removeAttribute(attrs[i].name)
+        continue
+      }
+
+      if (attrName === 'href' || attrName === 'src' || attrName === 'action') {
+        if (attrValue.startsWith('javascript:') || attrValue.startsWith('vbscript:') || attrValue.startsWith('data:')) {
+          el.removeAttribute(attrs[i].name)
+        }
+      }
+    }
+  }
+
+  return doc.body.innerHTML
+}