fix: sanitize component props (#543)

harlan-zw · web-flow · commit 3dcf8c1566e3 · 2026-03-27T01:41:06.000+11:00
diff --git a/src/runtime/server/og-image/context.ts b/src/runtime/server/og-image/context.ts
@@ -16,7 +16,7 @@ import { useNitroApp } from 'nitropack/runtime'
 import { hash } from 'ohash'
 import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from 'ufo'
 import { normalizeKey } from 'unstorage'
-import { decodeOgImageParams, extractEncodedSegment, separateProps } from '../../shared'
+import { decodeOgImageParams, extractEncodedSegment, sanitizeProps, separateProps } from '../../shared'
 import { autoEjectCommunityTemplate } from '../util/auto-eject'
 import { createNitroRouteRuleMatcher } from '../util/kit'
 import { normaliseOptions } from '../util/options'
@@ -131,6 +131,10 @@ export async function resolveContext(e: H3Event): Promise<H3Error | OgImageRende
   const ogImageRouteRules = separateProps(routeRules.ogImage as RouteRulesOgImage)
   const options = defu(queryParams, urlOptions, ogImageRouteRules, runtimeConfig.defaults) as OgImageOptionsInternal
 
+  // Strip HTML event handlers and dangerous attributes from props (GHSA-mg36-wvcr-m75h)
+  if (options.props && typeof options.props === 'object')
+    options.props = sanitizeProps(options.props as Record<string, any>)
+
   if (!options) {
     return createError({
       statusCode: 404,
diff --git a/src/runtime/shared.ts b/src/runtime/shared.ts
@@ -100,6 +100,22 @@ export function separateProps(options: OgImageOptions | undefined, ignoreKeys: s
   return result as OgImageOptions
 }
 
+const DANGEROUS_ATTRS = new Set(['autofocus', 'contenteditable', 'tabindex', 'accesskey'])
+
+/**
+ * Strip HTML event handlers and dangerous attributes from props to prevent
+ * reflected XSS via Vue fallthrough attributes (GHSA-mg36-wvcr-m75h).
+ */
+export function sanitizeProps(props: Record<string, any>): Record<string, any> {
+  const clean: Record<string, any> = {}
+  for (const key of Object.keys(props)) {
+    if (key.startsWith('on') || DANGEROUS_ATTRS.has(key.toLowerCase()))
+      continue
+    clean[key] = props[key]
+  }
+  return clean
+}
+
 export function withoutQuery(path: string) {
   return path.split('?')[0]
 }
diff --git a/test/unit/security.test.ts b/test/unit/security.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { sanitizeProps } from '../../src/runtime/shared'
+
+describe('sanitizeProps (GHSA-mg36-wvcr-m75h)', () => {
+  it('strips on* event handlers', () => {
+    const result = sanitizeProps({ title: 'Hello', onmouseover: 'alert(1)', onclick: 'steal()' })
+    expect(result).toEqual({ title: 'Hello' })
+  })
+
+  it('strips dangerous HTML attributes', () => {
+    const result = sanitizeProps({ title: 'Hi', autofocus: '', contenteditable: 'true', tabindex: '1', accesskey: 'x' })
+    expect(result).toEqual({ title: 'Hi' })
+  })
+
+  it('preserves legitimate props', () => {
+    const result = sanitizeProps({ title: 'Test', description: 'A page', colorMode: 'dark', theme: '#fff' })
+    expect(result).toEqual({ title: 'Test', description: 'A page', colorMode: 'dark', theme: '#fff' })
+  })
+
+  it('handles empty props', () => {
+    expect(sanitizeProps({})).toEqual({})
+  })
+})
