fix(runtime): parse queries from event paths

Author: harlan-zw

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

@@ -8,7 +8,7 @@ import type BrowserRenderer from './browser/renderer'
 import type SatoriRenderer from './satori/renderer'
 import type TakumiRenderer from './takumi/renderer'
 import { defu } from 'defu'
-import { createError, getQuery } from 'h3'
+import { createError } from 'h3'
 import { useNitroApp } from 'nitropack/runtime'
 import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from 'ufo'
 import { normalizeKey } from 'unstorage'
@@ -21,6 +21,7 @@ import { hashKey } from '../../shared/hash'
 import { autoEjectCommunityTemplate } from '../util/auto-eject'
 import { createNitroRouteRuleMatcher } from '../util/kit'
 import { normaliseOptions } from '../util/options'
+import { getEventQuery } from '../util/query'
 import { createTimings, TIMING_CTX_KEY } from '../util/timings'
 import { withTimeout } from '../util/withTimeout'
 import { useOgImageRuntimeConfig } from '../utils'
@@ -140,7 +141,7 @@ export async function resolveContext(e: H3Event): Promise<H3Error | OgImageRende
   // In production they're ignored since all options are encoded in the URL path.
   let queryParams: Record<string, any> = {}
   if (import.meta.dev || import.meta.prerender) {
-    const query = getQuery(e)
+    const query = getEventQuery(e)
     for (const k in query) {
       const v = String(query[k])
       if (!v)

src/runtime/server/routes/resolve.ts

@@ -1,8 +1,9 @@
 import type { H3Event } from 'h3'
-import { createError, defineEventHandler, getQuery, getRequestHost, sendRedirect } from 'h3'
+import { createError, defineEventHandler, getRequestHost, sendRedirect } from 'h3'
 import { parseURL, withLeadingSlash, withQuery } from 'ufo'
 import { getSiteConfig } from '#site-config/server/composables/getSiteConfig'
 import { isInternalRoute } from '../../shared'
+import { getEventQuery } from '../util/query'
 import { useOgImageRuntimeConfig } from '../utils'
 
 // Matches a single <meta> tag and captures property/name and content attributes
@@ -133,7 +134,7 @@ export default defineEventHandler(async (event) => {
     })
   }
 
-  const query = getQuery(event)
+  const query = getEventQuery(event)
   // Pull out resolver-controlled params (prefixed `_og_`) before forwarding the
   // rest to the page fetch, so they don't leak into the rendered page's query.
   // `_og_key` selects which meta tag to redirect to; accepted case-insensitively

src/runtime/server/util/cache.ts

@@ -1,11 +1,12 @@
 import type { H3Error } from 'h3'
 import type { OgImageRenderEventContext } from '../../types'
 import { fnv1a64Base36 } from 'fnv1a-64'
-import { createError, getQuery, handleCacheHeaders, setHeader, setHeaders } from 'h3'
+import { createError, handleCacheHeaders, setHeader, setHeaders } from 'h3'
 import { useStorage } from 'nitropack/runtime'
 import { withTrailingSlash } from 'ufo'
 import { prefixStorage } from 'unstorage'
 import { logger } from '../../logger'
+import { getEventQuery } from './query'
 
 /**
  * Constant-time string comparison to prevent timing attacks on secret values.
@@ -76,7 +77,7 @@ export async function useOgImageBufferCache(ctx: OgImageRenderEventContext, opti
       : null
     if (entry) {
       const { value, expiresAt, headers } = entry
-      const purgeValue = getQuery(ctx.e).purge
+      const purgeValue = getEventQuery(ctx.e).purge
       if (typeof purgeValue !== 'undefined') {
         // When URL signing is enabled, require the secret as the purge value
         if (options.secret && !safeCompare(String(purgeValue), options.secret)) {

src/runtime/server/util/query.ts

@@ -0,0 +1,11 @@
+import type { H3Event } from 'h3'
+import { getQuery } from 'ufo'
+
+/**
+ * Parse query parameters from the event path without relying on the H3 event
+ * implementation. Nitro adapters can pass an H3 v1 event to bundled H3 v2
+ * utilities, where getQuery(event) treats the relative req.url as absolute.
+ */
+export function getEventQuery(event: H3Event) {
+  return getQuery(event.path)
+}

test/e2e/resolve-endpoint.test.ts

@@ -34,6 +34,19 @@ describe('/_og/r resolver endpoint', () => {
     expect(res.headers.get('location')).toBeTruthy()
   }, 60000)
 
+  it('forwards query parameters to the resolved page', async () => {
+    const pagePath = '/satori/query-param?title=Resolver%20Query'
+    const pageHtml = await $fetch(pagePath) as string
+    const expected = extractOgImageUrl(pageHtml)
+
+    const res = await fetch(`/_og/r${pagePath}`, { redirect: 'manual' })
+    expect(res.status).toBe(302)
+    const location = res.headers.get('location')
+    expect(location).toBeTruthy()
+    expect(new URL(location!, 'https://nuxtseo.com').pathname)
+      .toBe(new URL(expected!, 'https://nuxtseo.com').pathname)
+  }, 60000)
+
   // The core user-facing scenario from issue #571: a blog/listing page needs
   // stable URLs pointing at the og:image of other pages so it can render
   // image cards without knowing each page's encoded image URL.

test/unit/event-query.test.ts

@@ -0,0 +1,18 @@
+import type { H3Event } from 'h3'
+import { describe, expect, it } from 'vitest'
+import { getEventQuery } from '../../src/runtime/server/util/query'
+
+describe('getEventQuery', () => {
+  it('parses query parameters from a relative H3 event path', () => {
+    const relativeUrl = '/_og/r/profile.png?title=Hello%20Nuxt&tag=one&tag=two'
+    const event = {
+      path: relativeUrl,
+      req: { url: relativeUrl },
+    } as unknown as H3Event
+
+    expect(getEventQuery(event)).toEqual({
+      title: 'Hello Nuxt',
+      tag: ['one', 'two'],
+    })
+  })
+})