fix: strip more html from package description (#460)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: iiio2

app/components/MarkdownText.vue

@@ -3,11 +3,45 @@ const props = defineProps<{
   text: string
   /** When true, renders link text without the anchor tag (useful when inside another link) */
   plain?: boolean
+  /** Package name to strip from the beginning of the description (if present) */
+  packageName?: string
 }>()
 
-// Escape HTML to prevent XSS
-function escapeHtml(text: string): string {
-  return text
+// Strip markdown image badges from text
+function stripMarkdownImages(text: string): string {
+  // Remove linked images: [![alt](image-url)](link-url) - handles incomplete URLs too
+  // Using {0,500} instead of * to prevent ReDoS on pathological inputs
+  text = text.replace(/\[!\[[^\]]{0,500}\]\([^)]{0,2000}\)\]\([^)]{0,2000}\)?/g, '')
+  // Remove standalone images: ![alt](url)
+  text = text.replace(/!\[[^\]]{0,500}\]\([^)]{0,2000}\)/g, '')
+  // Remove any leftover empty links or broken markdown link syntax
+  text = text.replace(/\[\]\([^)]{0,2000}\)?/g, '')
+  return text.trim()
+}
+
+// Strip HTML tags and escape remaining HTML to prevent XSS
+function stripAndEscapeHtml(text: string): string {
+  // First strip markdown image badges
+  let stripped = stripMarkdownImages(text)
+
+  // Then strip actual HTML tags (keep their text content)
+  // Only match tags that start with a letter or / (to avoid matching things like "a < b > c")
+  stripped = stripped.replace(/<\/?[a-z][^>]*>/gi, '')
+
+  if (props.packageName) {
+    // Trim first to handle leading/trailing whitespace from stripped HTML
+    stripped = stripped.trim()
+    // Collapse multiple whitespace into single space
+    stripped = stripped.replace(/\s+/g, ' ')
+    // Escape special regex characters in package name
+    const escapedName = props.packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    // Match package name at the start, optionally followed by: space, dash, colon, hyphen, or just space
+    const namePattern = new RegExp(`^${escapedName}\\s*[-:—]?\\s*`, 'i')
+    stripped = stripped.replace(namePattern, '').trim()
+  }
+
+  // Then escape any remaining HTML entities
+  return stripped
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
@@ -19,8 +53,8 @@ function escapeHtml(text: string): string {
 function parseMarkdown(text: string): string {
   if (!text) return ''
 
-  // First escape HTML
-  let html = escapeHtml(text)
+  // First strip HTML tags and escape remaining HTML
+  let html = stripAndEscapeHtml(text)
 
   // Bold: **text** or __text__
   html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')

app/pages/[...package].vue

@@ -493,7 +493,7 @@ function handleClick(event: MouseEvent) {
           <!-- Description container with min-height to prevent CLS -->
           <div class="max-w-2xl min-h-[4.5rem]">
             <p v-if="pkg.description" class="text-fg-muted text-base m-0">
-              <MarkdownText :text="pkg.description" />
+              <MarkdownText :text="pkg.description" :package-name="pkg.name" />
             </p>
             <p v-else class="text-fg-subtle text-base m-0 italic">
               {{ $t('package.no_description') }}

test/nuxt/components/MarkdownText.spec.ts

@@ -20,12 +20,14 @@ describe('MarkdownText', () => {
   })
 
   describe('HTML escaping', () => {
-    it('escapes HTML tags to prevent XSS', async () => {
+    it('strips HTML tags to prevent XSS', async () => {
       const component = await mountSuspended(MarkdownText, {
         props: { text: '<script>alert("xss")</script>' },
       })
+      // HTML tags should be stripped (not rendered)
       expect(component.html()).not.toContain('<script>')
-      expect(component.text()).toContain('<script>')
+      // Only the text content remains
+      expect(component.text()).toBe('alert("xss")')
     })
 
     it('escapes special characters', async () => {
@@ -202,4 +204,215 @@ describe('MarkdownText', () => {
       expect(component.find('code').exists()).toBe(true)
     })
   })
+
+  describe('markdown image stripping', () => {
+    it('strips standalone markdown images', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: '![badge](https://img.shields.io/badge.svg) A library' },
+      })
+      expect(component.text()).toBe('A library')
+    })
+
+    it('strips linked markdown images (badges)', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: '[![Build Status](https://travis-ci.org/user/repo.svg)](https://travis-ci.org/user/repo) A library',
+        },
+      })
+      expect(component.text()).toBe('A library')
+    })
+
+    it('strips multiple badges', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: '[![npm](https://badge.svg)](https://npm.com) [![build](https://ci.svg)](https://ci.com) A library',
+        },
+      })
+      expect(component.text()).toBe('A library')
+    })
+
+    it('preserves malformed image syntax without closing paren', async () => {
+      // Incomplete/malformed markdown images are left as-is for safety
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: '![badge](https://example.svg A library' },
+      })
+      // The image syntax is not stripped because it's malformed (no closing paren)
+      expect(component.text()).toBe('![badge](https://example.svg A library')
+    })
+
+    it('strips empty link syntax', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: '[](https://example.com) A library' },
+      })
+      expect(component.text()).toBe('A library')
+    })
+
+    it('preserves regular markdown links', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: '[documentation](https://docs.example.com) is here' },
+      })
+      const link = component.find('a')
+      expect(link.exists()).toBe(true)
+      expect(link.text()).toBe('documentation')
+      expect(component.text()).toBe('documentation is here')
+    })
+  })
+
+  describe('packageName prop', () => {
+    it('strips package name from the beginning of plain text', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: 'my-package - A great library',
+          packageName: 'my-package',
+        },
+      })
+      expect(component.text()).toBe('A great library')
+    })
+
+    it('strips package name with colon separator', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: 'my-package: A great library',
+          packageName: 'my-package',
+        },
+      })
+      expect(component.text()).toBe('A great library')
+    })
+
+    it('strips package name with em dash separator', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: 'my-package — A great library',
+          packageName: 'my-package',
+        },
+      })
+      expect(component.text()).toBe('A great library')
+    })
+
+    it('strips package name without separator', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: 'my-package A great library',
+          packageName: 'my-package',
+        },
+      })
+      expect(component.text()).toBe('A great library')
+    })
+
+    it('is case-insensitive', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: 'MY-PACKAGE - A great library',
+          packageName: 'my-package',
+        },
+      })
+      expect(component.text()).toBe('A great library')
+    })
+
+    it('does not strip package name from middle of text', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: 'A great my-package library',
+          packageName: 'my-package',
+        },
+      })
+      expect(component.text()).toBe('A great my-package library')
+    })
+
+    it('handles scoped package names', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: '@org/my-package - A great library',
+          packageName: '@org/my-package',
+        },
+      })
+      expect(component.text()).toBe('A great library')
+    })
+
+    it('handles package names with special regex characters', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: 'pkg.name+test - A great library',
+          packageName: 'pkg.name+test',
+        },
+      })
+      expect(component.text()).toBe('A great library')
+    })
+
+    it('strips package name from HTML-containing descriptions', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: '<b>my-package</b> - A great library',
+          packageName: 'my-package',
+        },
+      })
+      expect(component.text()).toBe('A great library')
+    })
+
+    it('strips package name from descriptions with markdown images', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: '![badge](https://badge.svg) my-package - A great library',
+          packageName: 'my-package',
+        },
+      })
+      expect(component.text()).toBe('A great library')
+    })
+
+    it('does nothing when packageName is not provided', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: {
+          text: 'my-package - A great library',
+        },
+      })
+      expect(component.text()).toBe('my-package - A great library')
+    })
+  })
+
+  describe('HTML tag stripping', () => {
+    it('strips simple HTML tags but keeps content', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: '<b>bold text</b> here' },
+      })
+      expect(component.text()).toBe('bold text here')
+      expect(component.html()).not.toContain('<b>')
+    })
+
+    it('strips nested HTML tags', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: '<div><span>nested</span> content</div>' },
+      })
+      expect(component.text()).toBe('nested content')
+    })
+
+    it('strips self-closing tags', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: 'before<br/>after' },
+      })
+      expect(component.text()).toBe('beforeafter')
+    })
+
+    it('strips tags with attributes', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: '<a href="https://evil.com">click me</a>' },
+      })
+      expect(component.text()).toBe('click me')
+      expect(component.find('a').exists()).toBe(false)
+    })
+
+    it('preserves text that looks like comparison operators', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: 'x < y > z and a < b && c > d' },
+      })
+      expect(component.text()).toBe('x < y > z and a < b && c > d')
+    })
+
+    it('handles mixed HTML and markdown', async () => {
+      const component = await mountSuspended(MarkdownText, {
+        props: { text: '<b>bold</b> and **also bold**' },
+      })
+      expect(component.text()).toBe('bold and also bold')
+      expect(component.find('strong').exists()).toBe(true)
+    })
+  })
 })