fix: whitelist component props to prevent cache key DoS

Extract prop names from defineProps at build time and filter unknown props
at runtime. Prevents attackers from inflating cache entries by varying
arbitrary query params.

Author: harlan-zw

src/build/props.ts

@@ -0,0 +1,111 @@
+/**
+ * Extract prop names from a Vue SFC's `defineProps` declaration.
+ *
+ * Supports all three Vue syntaxes:
+ * 1. TypeScript generic: `defineProps<{ title: string, desc?: string }>()`
+ * 2. Runtime object:     `defineProps({ title: String, desc: { type: String } })`
+ * 3. Array shorthand:    `defineProps(['title', 'desc'])`
+ *
+ * Operates on raw source text (no AST parser needed).
+ */
+
+const RE_SCRIPT_SETUP = /<script\s[^>]*setup[^>]*>([\s\S]*?)<\/script>/
+
+// Match top-level keys in a TS interface/object type literal: `{ title: string, desc?: number }`
+const RE_TS_PROP_KEY = /(?:^|[;,\n}])\s*(\w+)\s*(?:\?\s*)?:/g
+
+// Match top-level keys in a runtime object: `{ title: String, desc: { type: Number } }`
+const RE_RUNTIME_PROP_KEY = /(?:^|[,\n}])\s*(\w+)\s*:/g
+
+// Match array items: `['title', 'desc']` or `["title", "desc"]`
+const RE_ARRAY_ITEM = /['"](\w+)['"]/g
+
+function findBalanced(source: string, openChar: string, closeChar: string, startIndex: number): string | null {
+  let depth = 0
+  let start = -1
+  for (let i = startIndex; i < source.length; i++) {
+    if (source[i] === openChar) {
+      if (depth === 0)
+        start = i + 1
+      depth++
+    }
+    else if (source[i] === closeChar) {
+      depth--
+      if (depth === 0 && start !== -1)
+        return source.slice(start, i)
+    }
+  }
+  return null
+}
+
+export function extractPropNamesFromVue(code: string): string[] {
+  const match = RE_SCRIPT_SETUP.exec(code)
+  if (!match)
+    return []
+
+  const src = match[1]
+
+  const dpIndex = src.indexOf('defineProps')
+  if (dpIndex === -1)
+    return []
+
+  // Check for TypeScript generic syntax: defineProps<...>()
+  const afterDp = src.slice(dpIndex + 'defineProps'.length).trimStart()
+  if (afterDp.startsWith('<')) {
+    const typeBody = findBalanced(src, '<', '>', dpIndex + 'defineProps'.length)
+    if (typeBody)
+      return extractTopLevelKeys(typeBody, RE_TS_PROP_KEY)
+  }
+
+  // Check for runtime object or array syntax: defineProps({...}) or defineProps([...])
+  const parenContent = findBalanced(src, '(', ')', dpIndex + 'defineProps'.length)
+  if (!parenContent)
+    return []
+
+  const trimmed = parenContent.trim()
+
+  // Array syntax: defineProps(['title', 'desc'])
+  if (trimmed.startsWith('[')) {
+    const names: string[] = []
+    let m: RegExpExecArray | null
+    // eslint-disable-next-line no-cond-assign
+    while (m = RE_ARRAY_ITEM.exec(trimmed))
+      names.push(m[1])
+    RE_ARRAY_ITEM.lastIndex = 0
+    return names
+  }
+
+  // Runtime object syntax: defineProps({ title: String })
+  if (trimmed.startsWith('{'))
+    return extractTopLevelKeys(trimmed, RE_RUNTIME_PROP_KEY)
+
+  return []
+}
+
+/**
+ * Extract top-level property keys from a braced block, skipping nested braces.
+ */
+function extractTopLevelKeys(body: string, re: RegExp): string[] {
+  const keys: string[] = []
+  let depth = 0
+  let flat = ''
+
+  for (const ch of body) {
+    if (ch === '{' || ch === '<' || ch === '(') {
+      depth++
+      if (depth > 1) { flat += ' '; continue }
+    }
+    else if (ch === '}' || ch === '>' || ch === ')') {
+      if (depth > 1) { flat += ' '; depth--; continue }
+      depth--
+    }
+    flat += depth <= 1 ? ch : ' '
+  }
+
+  let m: RegExpExecArray | null
+  // eslint-disable-next-line no-cond-assign
+  while (m = re.exec(flat))
+    keys.push(m[1])
+  re.lastIndex = 0
+  return keys
+}

src/module.ts

@@ -35,6 +35,7 @@ import {
 } from './build/fonts'
 import { setupGenerateHandler } from './build/generate'
 import { setupPrerenderHandler } from './build/prerender'
+import { extractPropNamesFromVue } from './build/props'
 import { TreeShakeComposablesPlugin } from './build/tree-shake-plugin'
 import { AssetTransformPlugin } from './build/vite-asset-transform'
 import { ComponentImportRewritePlugin } from './build/vite-component-import-rewrite'
@@ -1009,6 +1010,7 @@ export default defineNuxtModule<ModuleOptions>({
             ogImageComponentCtx.detectedRenderers.add(renderer)
           const componentFile = fs.readFileSync(component.filePath, 'utf-8')
           const credits = componentFile.split('\n').find(line => line.startsWith(' * @credits'))?.replace('* @credits', '').trim()
+          const propNames = extractPropNamesFromVue(componentFile)
           ogImageComponentCtx.components.push({
             hash: hash(componentFile).replaceAll('_', '-'),
             pascalName: component.pascalName,
@@ -1017,6 +1019,7 @@ export default defineNuxtModule<ModuleOptions>({
             category,
             credits,
             renderer,
+            propNames,
           })
         }
       })
@@ -1048,13 +1051,15 @@ export default defineNuxtModule<ModuleOptions>({
               })) {
                 return
               }
+              const communityFile = fs.readFileSync(filePath, 'utf-8')
               ogImageComponentCtx.components.push({
                 hash: '',
                 pascalName,
                 kebabName: pascalName.replace(RE_PASCAL_TO_KEBAB, '$1-$2').toLowerCase(),
                 path: filePath,
                 category: 'community',
                 renderer,
+                propNames: extractPropNamesFromVue(communityFile),
               })
             })
         }

src/runtime/server/og-image/context.ts

@@ -16,6 +16,7 @@ import { useNitroApp } from 'nitropack/runtime'
 import { hash } from 'ohash'
 import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from 'ufo'
 import { normalizeKey } from 'unstorage'
+import { logger } from '../../logger'
 import { decodeOgImageParams, extractEncodedSegment, sanitizeProps, separateProps } from '../../shared'
 import { autoEjectCommunityTemplate } from '../util/auto-eject'
 import { createNitroRouteRuleMatcher } from '../util/kit'
@@ -145,6 +146,23 @@ export async function resolveContext(e: H3Event): Promise<H3Error | OgImageRende
   // Normalise options and get renderer from component metadata
   const normalised = normaliseOptions(options)
 
+  // Whitelist props: only allow props declared in the component's defineProps.
+  // Components without defineProps accept no props. Prevents cache key inflation
+  // from arbitrary query params (DoS vector).
+  if (normalised.component && normalised.options.props && typeof normalised.options.props === 'object') {
+    const allowedProps = normalised.component.propNames || []
+    const allowedSet = new Set(allowedProps)
+    const raw = normalised.options.props as Record<string, any>
+    const filtered: Record<string, any> = {}
+    for (const key of Object.keys(raw)) {
+      if (allowedSet.has(key))
+        filtered[key] = raw[key]
+      else if (import.meta.dev)
+        logger.warn(`[Nuxt OG Image] Prop "${key}" is not declared by component "${normalised.component.pascalName}" and was dropped. Declared props: ${allowedProps.join(', ')}`)
+    }
+    normalised.options.props = filtered
+  }
+
   // Auto-eject community templates in dev mode (skip devtools requests)
   if (normalised.component?.category === 'community')
     autoEjectCommunityTemplate(normalised.component, runtimeConfig, { requestPath: e.path })

src/runtime/types.ts

@@ -88,6 +88,8 @@ export interface OgImageComponent {
   category: 'app' | 'community' | 'pro'
   credits?: string
   renderer: RendererType
+  /** Declared prop names extracted from defineProps at build time (used for prop whitelisting) */
+  propNames?: string[]
 }
 
 export interface ScreenshotOptions {

test/unit/props.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest'
+import { extractPropNamesFromVue } from '../../src/build/props'
+
+describe('extractPropNamesFromVue', () => {
+  it('extracts from TypeScript generic defineProps', () => {
+    const code = `
+<script setup lang="ts">
+withDefaults(defineProps<{
+  colorMode?: 'dark' | 'light'
+  title?: string
+  description?: string
+}>(), {
+  colorMode: 'light',
+  title: 'title',
+})
+</script>
+<template><div /></template>`
+    expect(extractPropNamesFromVue(code)).toEqual(['colorMode', 'title', 'description'])
+  })
+
+  it('extracts from TypeScript generic with assignment', () => {
+    const code = `
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  title?: string
+  isPro?: boolean
+  width?: number
+  height?: number
+}>(), {
+  title: 'title',
+  width: 1200,
+  height: 600,
+})
+</script>
+<template><div /></template>`
+    expect(extractPropNamesFromVue(code)).toEqual(['title', 'isPro', 'width', 'height'])
+  })
+
+  it('extracts from runtime object syntax', () => {
+    const code = `
+<script setup>
+defineProps({
+  title: String,
+  count: Number,
+  active: Boolean,
+})
+</script>
+<template><div /></template>`
+    expect(extractPropNamesFromVue(code)).toEqual(['title', 'count', 'active'])
+  })
+
+  it('extracts from runtime object with nested type config', () => {
+    const code = `
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: 'Hello',
+  },
+  count: {
+    type: Number,
+    required: true,
+  },
+})
+</script>
+<template><div /></template>`
+    expect(extractPropNamesFromVue(code)).toEqual(['title', 'count'])
+  })
+
+  it('extracts from array syntax', () => {
+    const code = `
+<script setup>
+defineProps(['title', 'description', 'theme'])
+</script>
+<template><div /></template>`
+    expect(extractPropNamesFromVue(code)).toEqual(['title', 'description', 'theme'])
+  })
+
+  it('handles nested generic types in TS props', () => {
+    const code = `
+<script setup lang="ts">
+defineProps<{
+  items?: Array<{ id: string, name: string }>
+  config?: Record<string, boolean>
+  title?: string
+}>()
+</script>
+<template><div /></template>`
+    expect(extractPropNamesFromVue(code)).toEqual(['items', 'config', 'title'])
+  })
+
+  it('returns empty for components without script setup', () => {
+    const code = `
+<script>
+export default {
+  props: { title: String }
+}
+</script>
+<template><div /></template>`
+    expect(extractPropNamesFromVue(code)).toEqual([])
+  })
+
+  it('returns empty for components without defineProps', () => {
+    const code = `
+<script setup lang="ts">
+const msg = 'hello'
+</script>
+<template><div /></template>`
+    expect(extractPropNamesFromVue(code)).toEqual([])
+  })
+
+  it('handles withDefaults wrapping runtime object', () => {
+    const code = `
+<script setup>
+withDefaults(defineProps({
+  title: String,
+  color: String,
+}), {
+  title: 'Default',
+  color: 'blue',
+})
+</script>
+<template><div /></template>`
+    expect(extractPropNamesFromVue(code)).toEqual(['title', 'color'])
+  })
+})