fix: whitelist component props to prevent cache key DoS (#544)

Author: harlan-zw

src/build/props.ts

@@ -0,0 +1,47 @@
+/**
+ * Extract prop names from a Vue SFC's `defineProps` declaration.
+ *
+ * Uses `@vue/compiler-sfc` (already a dependency) to reliably parse all
+ * three defineProps syntaxes: TS generics, runtime objects, and arrays.
+ * The `compileScript` API resolves bindings, so we just filter for "props".
+ */
+import type { SFCDescriptor } from '@vue/compiler-sfc'
+
+let _parse: typeof import('@vue/compiler-sfc').parse | undefined
+let _compileScript: typeof import('@vue/compiler-sfc').compileScript | undefined
+
+export async function loadSfcCompiler() {
+  if (!_parse) {
+    const sfc = await import('@vue/compiler-sfc')
+    _parse = sfc.parse
+    _compileScript = sfc.compileScript
+  }
+}
+
+export function extractPropNamesFromVue(code: string): string[] {
+  if (!_parse || !_compileScript)
+    return []
+
+  let descriptor: SFCDescriptor
+  try {
+    descriptor = _parse(code).descriptor
+  }
+  catch {
+    return []
+  }
+
+  if (!descriptor.scriptSetup)
+    return []
+
+  try {
+    const compiled = _compileScript(descriptor, { id: 'prop-extract' })
+    if (!compiled.bindings)
+      return []
+    return Object.entries(compiled.bindings)
+      .filter(([, type]) => type === 'props')
+      .map(([name]) => name)
+  }
+  catch {
+    return []
+  }
+}

src/module.ts

@@ -35,6 +35,7 @@ import {
 } from './build/fonts'
 import { setupGenerateHandler } from './build/generate'
 import { setupPrerenderHandler } from './build/prerender'
+import { extractPropNamesFromVue, loadSfcCompiler } 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'
@@ -1005,6 +1006,10 @@ export default defineNuxtModule<ModuleOptions>({
       }
     }
 
+    // Pre-load the SFC compiler so extractPropNamesFromVue works synchronously
+    // inside the components:extend hook (which is itself synchronous)
+    await loadSfcCompiler()
+
     nuxt.hook('components:extend', (components) => {
       allNuxtComponents = components
       ogImageComponentCtx.components = []
@@ -1046,6 +1051,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,
@@ -1054,6 +1060,7 @@ export default defineNuxtModule<ModuleOptions>({
             category,
             credits,
             renderer,
+            propNames,
           })
         }
       })
@@ -1085,13 +1092,17 @@ export default defineNuxtModule<ModuleOptions>({
               })) {
                 return
               }
+              const propNames = fs.statSync(filePath).isFile()
+                ? extractPropNamesFromVue(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,
               })
             })
         }

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'
@@ -25,17 +26,19 @@ import { getBrowserRenderer, getSatoriRenderer, getTakumiRenderer } from './inst
 
 const RE_HASH_MODE = /^o_([a-z0-9]+)$/i
 
-export function resolvePathCacheKey(e: H3Event, path: string, includeQuery = false) {
+export function resolvePathCacheKey(e: H3Event, path: string, resolvedOptions?: Record<string, any>) {
   const siteConfig = getSiteConfig(e, {
     resolveRefs: true,
   })
   const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path)))
-  const hashParts = [
+  const hashParts: any[] = [
     basePath,
     import.meta.prerender ? '' : siteConfig.url,
   ]
-  if (includeQuery)
-    hashParts.push(hash(getQuery(e)))
+  // Hash resolved options (not raw query string) so unknown/extra query params
+  // cannot produce unique cache keys and bypass the cache.
+  if (resolvedOptions)
+    hashParts.push(hash(resolvedOptions))
   return [
     (!basePath || basePath === '/') ? 'index' : basePath,
     hash(hashParts),
@@ -168,6 +171,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 })
@@ -177,7 +197,7 @@ export async function resolveContext(e: H3Event): Promise<H3Error | OgImageRende
   // so use the options hash directly as cache key to avoid all hash-mode images sharing one cache entry.
   // Component hash is appended so template changes invalidate the runtime cache.
   const baseCacheKey = normalised.options.cacheKey
-    || (hashMatch ? `hash:${hashMatch[1]}` : resolvePathCacheKey(e, basePathWithQuery, runtimeConfig.cacheQueryParams))
+    || (hashMatch ? `hash:${hashMatch[1]}` : resolvePathCacheKey(e, basePathWithQuery, normalised.options))
   const key = componentHash ? `${baseCacheKey}:${componentHash}` : baseCacheKey
 
   let renderer: ((typeof SatoriRenderer | typeof BrowserRenderer | typeof TakumiRenderer) & { __mock__?: true }) | undefined

src/runtime/types.ts

@@ -96,6 +96,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,131 @@
+import { beforeAll, describe, expect, it } from 'vitest'
+import { extractPropNamesFromVue, loadSfcCompiler } from '../../src/build/props'
+
+describe('extractPropNamesFromVue', () => {
+  beforeAll(async () => {
+    await loadSfcCompiler()
+  })
+
+  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('returns empty for invalid withDefaults + runtime object (Vue compiler rejects this)', () => {
+    const code = `
+<script setup>
+withDefaults(defineProps({
+  title: String,
+  color: String,
+}), {
+  title: 'Default',
+  color: 'blue',
+})
+</script>
+<template><div /></template>`
+    // withDefaults only works with type-based defineProps; compiler throws
+    expect(extractPropNamesFromVue(code)).toEqual([])
+  })
+})