From 354ff265e7efacad17d0c3be1fbcb8cd1e95ecb9 Mon Sep 17 00:00:00 2001
From: msroffcial <msr.official01@gmail.com>
Date: Thu, 25 Jun 2026 09:05:42 +0600
Subject: [PATCH 1/3] fix: add onBeforeUnmount cleanup for toast timers in
 DirectoryHub and SkillsHub

- DirectoryHub.vue: Added onBeforeUnmount to clear toastTimer and composioSearchTimer on unmount
- SkillsHub.vue: Added onBeforeUnmount to clear toastTimer on unmount

Prevents timer leaks when components are unmounted before timers fire.
---
 src/components/content/DirectoryHub.vue | 6 +++++-
 src/components/content/SkillsHub.vue    | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/content/DirectoryHub.vue b/src/components/content/DirectoryHub.vue
index beff5537a..c0850bfb1 100644
--- a/src/components/content/DirectoryHub.vue
+++ b/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])
diff --git a/src/components/content/SkillsHub.vue b/src/components/content/SkillsHub.vue
index addcb6395..52a28209f 100644
--- a/src/components/content/SkillsHub.vue
+++ b/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()

From 582cdf61a8e9a722a03ded75b252dfaac12334e1 Mon Sep 17 00:00:00 2001
From: msroffcial <msr.official01@gmail.com>
Date: Thu, 25 Jun 2026 09:11:35 +0600
Subject: [PATCH 2/3] fix: add HTML sanitization layer for v-html safety
 (defense in depth)

- Create src/utils/sanitizeHtml.ts: lightweight native DOMParser-based HTML sanitizer
  that strips script, iframe, object elements and event-handler attributes
- Create src/components/SafeHtml.vue: reusable wrapper component
- ThreadConversation.vue: add sanitizeHtml() to renderMarkdownBlocksAsHtml(),
  renderListItemContentAsHtml(), and renderCachedHighlightedCodeAsHtml()
- SkillDetailModal.vue: add sanitizeHtml() to renderedReadme computed
---
 src/components/SafeHtml.vue                   | 25 +++++++
 src/components/content/SkillDetailModal.vue   |  3 +-
 src/components/content/ThreadConversation.vue | 10 ++-
 src/utils/sanitizeHtml.ts                     | 71 +++++++++++++++++++
 4 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 src/components/SafeHtml.vue
 create mode 100644 src/utils/sanitizeHtml.ts

diff --git a/src/components/SafeHtml.vue b/src/components/SafeHtml.vue
new file mode 100644
index 000000000..0f922c4af
--- /dev/null
+++ b/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>
diff --git a/src/components/content/SkillDetailModal.vue b/src/components/content/SkillDetailModal.vue
index c58e86154..778a40740 100644
--- a/src/components/content/SkillDetailModal.vue
+++ b/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 {
diff --git a/src/components/content/ThreadConversation.vue b/src/components/content/ThreadConversation.vue
index 865601771..2d19a17db 100644
--- a/src/components/content/ThreadConversation.vue
+++ b/src/components/content/ThreadConversation.vue
@@ -5,6 +5,7 @@
     <p
       v-else-if="messages.length === 0 && pendingRequests.length === 0 && !liveOverlay"
       class="conversation-empty"
+import { sanitizeHtml } from '../../utils/sanitizeHtml'
     >
       No messages in this thread yet.
     </p>
@@ -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,
diff --git a/src/utils/sanitizeHtml.ts b/src/utils/sanitizeHtml.ts
new file mode 100644
index 000000000..cddaac5f5
--- /dev/null
+++ b/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
+}

From f505a6400bee2912a8a17d6c56e290b6ed7fdfe4 Mon Sep 17 00:00:00 2001
From: msroffcial <msr.official01@gmail.com>
Date: Thu, 25 Jun 2026 09:13:47 +0600
Subject: [PATCH 3/3] fix: move sanitizeHtml import to correct location (was in
 template, now in script section)

---
 src/components/content/ThreadConversation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/content/ThreadConversation.vue b/src/components/content/ThreadConversation.vue
index 2d19a17db..50da9cc41 100644
--- a/src/components/content/ThreadConversation.vue
+++ b/src/components/content/ThreadConversation.vue
@@ -5,7 +5,6 @@
     <p
       v-else-if="messages.length === 0 && pendingRequests.length === 0 && !liveOverlay"
       class="conversation-empty"
-import { sanitizeHtml } from '../../utils/sanitizeHtml'
     >
       No messages in this thread yet.
     </p>
@@ -924,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'