feat(Blog): 🔒 Sanitizing Content before using in 'v-html'

package.json

@@ -22,6 +22,8 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
+    "dompurify": "^3.1.6",
+    "jsdom": "^25.0.0",
     "markdown-it-github-alerts": "^0.3.0",
     "nuxt-typed-router": "^3.6.5",
     "pinia": "^2.2.2",
@@ -38,6 +40,8 @@
     "@nuxtjs/sitemap": "6.0.1",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
     "@shikijs/markdown-it": "^1.18.0",
+    "@types/dompurify": "^3.0.5",
+    "@types/jsdom": "^21.1.7",
     "@types/markdown-it": "^14.1.2",
     "dayjs": "^1.11.13",
     "dayjs-nuxt": "^2.1.11",

pages/blog/[slug].vue

@@ -9,7 +9,7 @@
             class="prose prose-neutral dark:prose-invert prose-sm md:prose-base prose-h1:mb-5 prose-h2:my-4 prose-pre:text-sm dark:prose-pre:border dark:prose-pre:border-neutral-800 prose-li:my-1 max-w-none font-sans tracking-tight"
           >
             <div v-if="blogSlug && status == 'success'">
-              <article v-html="$markdownIt.render(blogSlug.content)" />
+              <article v-html="$sanitizeHTML(markdownContent)" />
             </div>
             <div v-else-if="status == 'pending'">
               <LazyUAlert class="not-prose" title="Loading" color="primary" description="กำลังโหลดเนื้อหา กรุณารอสักครู่" variant="subtle" />
@@ -63,6 +63,7 @@ const { status } = await useAsyncData(
     }
   }
 )
+const markdownContent = useMarkdownIt(blogSlug.value?.content as string)
 
 useSeoMeta({
   title: blogSlug.value?.title,

plugins/DOMPurify.ts

@@ -0,0 +1,18 @@
+import DOMPurify from 'dompurify'
+
+export default defineNuxtPlugin(async () => {
+  let sanitize
+
+  if (import.meta.server) {
+    const { JSDOM } = await import('jsdom')
+    sanitize = DOMPurify(new JSDOM('').window).sanitize
+  } else {
+    sanitize = DOMPurify.sanitize
+  }
+
+  return {
+    provide: {
+      sanitizeHTML: sanitize
+    }
+  }
+})