fix: sanitize component props to prevent reflected XSS (GHSA-mg36-wvcr-m75h)

Query params not matching known OG image options were passed as component
props to the Nuxt island renderer. Vue's fallthrough attributes then
rendered them as HTML attributes on the root element, enabling injection
of event handlers like onmouseover.

Author: harlan-zw

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,

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]
 }

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({})
+  })
+})