fix: safer query param parsing

Fixes #350

Author: harlan-zw

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

@@ -63,8 +63,28 @@ export async function resolveContext(e: H3Event): Promise<H3Error | OgImageRende
       statusMessage: `[Nuxt OG Image] Unknown OG Image type ${extension}.`,
     })
   }
-  let queryParams = { ...getQuery(e) }
-  queryParams.props = JSON.parse(queryParams.props || '{}')
+
+  const query = getQuery(e)
+  let queryParams: Record<string, any> = {}
+  for (const k in query) {
+    const v = String(query[k])
+    if (!v)
+      continue
+    if (v.startsWith('{')) {
+      // we need to parse the JSON string
+      try {
+        queryParams[k] = JSON.parse(v)
+      }
+      catch (error) {
+        if (import.meta.dev) {
+          logger.error(`[Nuxt OG Image] Invalid JSON in ${k} parameter: ${error.message}`)
+        }
+      }
+    }
+    else {
+      queryParams[k] = v
+    }
+  }
   queryParams = separateProps(queryParams)
   let basePath = withoutTrailingSlash(path
     .replace(`/__og-image__/image`, '')

test/integration/partial-json-query.test.ts

@@ -0,0 +1,24 @@
+import { createResolver } from '@nuxt/kit'
+import { $fetch, setup } from '@nuxt/test-utils'
+import { describe, expect, it } from 'vitest'
+
+const { resolve } = createResolver(import.meta.url)
+
+await setup({
+  rootDir: resolve('../fixtures/basic'),
+  dev: true,
+})
+
+describe('partial JSON query parameter handling', async () => {
+  it('handles malformed JSON in query parameters gracefully', async () => {
+    // This is the problematic URL from the issue
+    const response = await $fetch('/__og-image__/image/satori/og.png?_query=%7B%22utm_source%22').catch(() => false)
+    expect(response).not.toBe(false)
+  })
+
+  it('still processes valid JSON queries correctly', async () => {
+    // Test with valid JSON query
+    const response = await $fetch('/__og-image__/image/satori/og.png?_query=%7B%22utm_source%22%3A%22facebook%22%7D').catch(() => false)
+    expect(response).not.toBe(false)
+  })
+})