feat(plugin-git): sanitize commit messages

plugins/development/plugin-git/package.json

@@ -40,6 +40,10 @@
     "@vuepress/helper": "workspace:*",
     "@vueuse/core": "catalog:",
     "execa": "^9.5.2",
+    "rehype-parse": "^9.0.1",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "unified": "^11.0.5",
     "vue": "catalog:"
   },
   "peerDependencies": {

plugins/development/plugin-git/src/client/components/GitChangelog.ts

@@ -88,7 +88,7 @@ export const GitChangelog = defineComponent({
           [h('code', item.hash.slice(0, 5))],
         ),
         h('span', { class: 'vp-changelog-divider' }, '-'),
-        h('span', { class: 'vp-changelog-message' }, item.message),
+        h('span', { class: 'vp-changelog-message', innerHTML: item.message }),
         h('span', { 'class': 'vp-changelog-date', 'data-allow-mismatch': '' }, [
           locale.value.timeOn || 'on',
           ' ',

plugins/development/plugin-git/src/node/resolveChangelog.ts

@@ -5,6 +5,7 @@ import type { MergedRawCommit } from './typings.js'
 import {
   getContributorInfo,
   getUserNameWithNoreplyEmail,
+  sanitizeHTML,
 } from './utils/index.js'
 
 const RE_CLEAN_REFS = /[()]/g
@@ -44,7 +45,7 @@ export const resolveChangelog = (
       time,
       email: contributor?.email || email,
       author: contributor?.name ?? contributor?.username ?? author,
-      message: app.markdown.renderInline(message),
+      message: sanitizeHTML(app.markdown.renderInline(message)),
     }
 
     if (coAuthors.length) resolved.coAuthors = coAuthors

plugins/development/plugin-git/src/node/utils/index.ts

@@ -6,3 +6,4 @@ export * from './getUserNameWithNoreplyEmail.js'
 export * from './inferGitProvider.js'
 export * from './injectGitOptions.js'
 export * from './checkGithubUsername.js'
+export * from './sanitizeHTML.js'

plugins/development/plugin-git/src/node/utils/sanitizeHTML.ts

@@ -0,0 +1,27 @@
+import rehypeParse from 'rehype-parse'
+import rehypeSanitize from 'rehype-sanitize'
+import rehypeStringify from 'rehype-stringify'
+import type { Processor } from 'unified'
+import { unified } from 'unified'
+
+let rehypeInstance: Processor | null = null
+
+/**
+ * Sanitize HTML
+ * @see https://github.com/rehypejs/rehype-sanitize
+ */
+export const sanitizeHTML = (html: string): string => {
+  rehypeInstance ??= unified()
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeSanitize, {
+      tagNames: ['a', 'em', 'strong', 'code'],
+      attributes: {
+        a: [['href', /^https?:\/\//], 'target', 'rel'],
+      },
+      strip: ['script', 'style'],
+    })
+    .use(rehypeStringify)
+    .freeze() as unknown as Processor
+
+  return String(rehypeInstance.processSync(html))
+}

plugins/development/plugin-git/tests/node/sanitizeHTML.spec.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+import { sanitizeHTML } from '../../src/node/utils/sanitizeHTML.js'
+
+describe('utils/sanitizeHTML', () => {
+  it('should work for safe HTML', () => {
+    ;[
+      '<a href="https://vuejs.org" target="_blank" rel="noopener noreferrer">Vue.js</a>',
+      '<a href="http://vuejs.org" target="_blank" rel="noopener noreferrer">Vue.js</a>',
+      '<em>emphasized</em>',
+      '<strong>strong</strong>',
+      '<code>code</code>',
+      '<code>code</code> <em>emphasized</em> <strong>strong</strong>',
+      ':emoji: 🚀', // emoji
+      'docs: update guide <code>code</code> <a href="https://github.com/vuejs/ecosystem/issue/123">#123</a>',
+    ].forEach((html) => {
+      expect(sanitizeHTML(html)).toBe(html)
+    })
+  })
+
+  it('should sanitize disallowed tags', () => {
+    ;[
+      ['<script>alert(1)</script>', ''],
+      ['<style>:root {}</style>', ''],
+      ['<p>foo</p><script>alert(1)</script>', 'foo'],
+      ['<span>foo</span><img src="foo.jpg>', 'foo'],
+      [
+        '<form><label for="foo">foo</label><input id="foo" type="text"><button type="submit">button</button></form>',
+        'foobutton',
+      ],
+      ['<iframe src="https://example.com"></iframe>', ''],
+      ['<img src="https://example.com">', ''],
+    ].forEach(([html, expected]) => {
+      expect(sanitizeHTML(html)).toBe(expected)
+    })
+  })
+
+  it('should sanitize anchor href', () => {
+    ;[
+      ['<a href="/foo/">foo</a>', '<a>foo</a>'],
+      ['<a href="javascript:alert(1)">alert</a>', '<a>alert</a>'],
+      ['<a href="mailto:xxx">email</a>', '<a>email</a>'],
+      ['<a href="tel:xxx">phone</a>', '<a>phone</a>'],
+    ].forEach(([html, expected]) => {
+      expect(sanitizeHTML(html)).toBe(expected)
+    })
+  })
+
+  it('should sanitize disallowed attributes', () => {
+    ;[
+      [
+        '<a class="foo" href="https://vuejs.org">Vue.js</a>',
+        '<a href="https://vuejs.org">Vue.js</a>',
+      ],
+      ['<code class="foo" style="margin:0">code</code>', '<code>code</code>'],
+      [
+        '<code class="foo" style="margin:0">code</code> <em class="foo" style="margin:0">emphasized</em> <strong class="foo" style="margin:0">strong</strong>',
+        '<code>code</code> <em>emphasized</em> <strong>strong</strong>',
+      ],
+      [
+        '<code onclick="alert(1)" style="margin:0">code</code>',
+        '<code>code</code>',
+      ],
+    ].forEach(([html, expected]) => {
+      expect(sanitizeHTML(html)).toBe(expected)
+    })
+  })
+})