fix: resolve Cloudflare runtime og image secret (#596)

Author: harlan-zw

src/runtime/app/utils.ts

@@ -3,7 +3,7 @@ import type { NuxtSSRContext } from 'nuxt/app'
 import type { OgImageOptions, OgImageOptionsInternal, OgImagePrebuilt, OgImageRuntimeConfig } from '../types'
 import { defu } from 'defu'
 import { stringify } from 'devalue'
-import { useHead, useRuntimeConfig } from 'nuxt/app'
+import { useHead, useRequestEvent, useRuntimeConfig } from 'nuxt/app'
 import { joinURL, withQuery } from 'ufo'
 import { isRef, toValue } from 'vue'
 import { componentNames } from '#build/nuxt-og-image/components.mjs'
@@ -310,9 +310,8 @@ export interface GetOgImagePathResult {
  * @deprecated Use the return value of `defineOgImage()` instead, which now returns an array of generated paths.
  */
 export function getOgImagePath(_pagePath: string, _options?: Partial<OgImageOptionsInternal>): GetOgImagePathResult {
-  const runtimeConfig = useRuntimeConfig()
-  const baseURL = runtimeConfig.app.baseURL
-  const { defaults, security } = useOgImageRuntimeConfig()
+  const { app, defaults, security } = useOgImageRuntimeConfig()
+  const baseURL = app.baseURL
   const extension = _options?.extension || defaults?.extension || 'png'
   // Force dynamic+signed URLs even during prerender when strict+secret are set.
   // Otherwise /_og/s/ URLs baked into HTML are unsigned and 403 at runtime for
@@ -337,13 +336,17 @@ export function getOgImagePath(_pagePath: string, _options?: Partial<OgImageOpti
 }
 
 export function useOgImageRuntimeConfig() {
-  const c = useRuntimeConfig()
+  const event = import.meta.server ? useRequestEvent() : undefined
+  const c = event ? useRuntimeConfig(event) : useRuntimeConfig()
   // Server-side: full runtime config at the root key.
   // Client-side: the root key is stripped (server-only); only the non-sensitive subset
   // published under `public['nuxt-og-image']` is available. The secret never crosses.
   const serverCfg = (c['nuxt-og-image'] as Record<string, any> | undefined) || {}
   const publicCfg = (c.public?.['nuxt-og-image'] as Record<string, any> | undefined) || {}
   const merged: Record<string, any> = { defaults: {}, ...publicCfg, ...serverCfg }
+  const overrideSecret = (c as Record<string, any>).ogImage?.secret as string | undefined
+  if (overrideSecret)
+    merged.security = { ...(merged.security || {}), secret: overrideSecret }
   merged.app = { baseURL: c.app.baseURL }
   return merged as any as OgImageRuntimeConfig
 }

src/runtime/server/utils.ts

@@ -37,12 +37,16 @@ export function getOgImagePath(_pagePath: string, _options?: Partial<OgImageOpti
 export function useOgImageRuntimeConfig(e?: H3Event) {
   const c = useRuntimeConfig(e)
   const moduleCfg = (c['nuxt-og-image'] as Record<string, any> | undefined) || {}
+  const cloudflareEnv = e?.context.cloudflare?.env || (e?.context as any)?._platform?.cloudflare?.env
   // Top-level `ogImage.secret` is populated by Nuxt's standard env override
   // (`NUXT_OG_IMAGE_SECRET`) and takes precedence over the build-time
   // `security.secret` so deployments can rotate the secret without rebuilding.
   // Passing the event matters on platforms like Cloudflare Workers where env
   // bindings are only resolved when an event is available.
-  const overrideSecret = (c as Record<string, any>).ogImage?.secret as string | undefined
+  const overrideSecret = (
+    (c as Record<string, any>).ogImage?.secret
+    || cloudflareEnv?.NUXT_OG_IMAGE_SECRET
+  ) as string | undefined
   const security = overrideSecret
     ? { ...(moduleCfg.security || {}), secret: overrideSecret }
     : moduleCfg.security

test/e2e-not-nuxt/cloudflare-runtime-config.test.ts

@@ -0,0 +1,58 @@
+import { pathToFileURL } from 'node:url'
+import { createResolver } from '@nuxt/kit'
+import { exec } from 'tinyexec'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { ensureLocalModuleStub, extractOgImageUrl } from '../utils'
+
+const { resolve } = createResolver(import.meta.url)
+const fixtureDir = resolve('../fixtures/cloudflare-runtime-config')
+
+async function buildFixture() {
+  await ensureLocalModuleStub()
+  await exec('nuxt', ['build'], {
+    nodeOptions: {
+      cwd: fixtureDir,
+      env: { ...process.env, NUXT_OG_IMAGE_SKIP_ONBOARDING: '1' },
+    },
+  })
+}
+
+async function fetchWorker(path: string, env: Record<string, unknown>) {
+  const workerPath = pathToFileURL(resolve(fixtureDir, '.output/server/index.mjs')).href
+  const worker = await import(`${workerPath}?t=${Date.now()}`)
+  return await worker.default.fetch(
+    new Request(`https://example.com${path}`),
+    env,
+    {
+      waitUntil() {},
+      passThroughOnException() {},
+    },
+  )
+}
+
+describe('cloudflare runtime config', () => {
+  beforeAll(async () => {
+    await buildFixture()
+  }, 120000)
+
+  it('maps NUXT_OG_IMAGE_SECRET env bindings into event runtime config', async () => {
+    const response = await fetchWorker('/api/runtime-config', {
+      NUXT_OG_IMAGE_SECRET: 'cf-secret',
+    })
+    const body = await response.json()
+
+    expect(body.eventRuntimeConfig.ogImage.secret).toBe('cf-secret')
+    expect(body.sharedRuntimeConfig.ogImage.secret).toBe('')
+    expect(body.cloudflareEnv.NUXT_OG_IMAGE_SECRET).toBe('cf-secret')
+  })
+
+  it('uses the Cloudflare runtime secret when rendering SSR og:image URLs', async () => {
+    const response = await fetchWorker('/', {
+      NUXT_OG_IMAGE_SECRET: 'cf-secret',
+    })
+    const html = await response.text()
+    const ogImageUrl = extractOgImageUrl(html)
+
+    expect(ogImageUrl).toContain(',s_')
+  })
+})

test/fixtures/cloudflare-runtime-config/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

test/fixtures/cloudflare-runtime-config/nuxt.config.ts

@@ -0,0 +1,20 @@
+import NuxtOgImage from '../../../src/module'
+
+export default defineNuxtConfig({
+  modules: [
+    NuxtOgImage,
+  ],
+
+  ogImage: {
+    defaults: {
+      renderer: 'satori',
+    },
+  },
+
+  nitro: {
+    preset: 'cloudflare-module',
+  },
+
+  devtools: { enabled: false },
+  compatibilityDate: '2024-09-19',
+})

test/fixtures/cloudflare-runtime-config/pages/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { defineOgImage } from '#imports'
+
+defineOgImage('NuxtSeo.satori', {
+  title: 'Cloudflare runtime config',
+})
+</script>
+
+<template>
+  <div>cloudflare runtime config</div>
+</template>

test/fixtures/cloudflare-runtime-config/server/api/runtime-config.get.ts

@@ -0,0 +1,25 @@
+import { defineEventHandler } from 'h3'
+import { useRuntimeConfig } from 'nitropack/runtime'
+
+export default defineEventHandler((event) => {
+  const runtimeConfig = useRuntimeConfig(event)
+  const sharedRuntimeConfig = useRuntimeConfig()
+  const cloudflareEnv = event.context.cloudflare?.env || event.context._platform?.cloudflare?.env
+
+  return {
+    eventRuntimeConfig: summarize(runtimeConfig),
+    sharedRuntimeConfig: summarize(sharedRuntimeConfig),
+    cloudflareEnv: {
+      keys: Object.keys(cloudflareEnv || {}).sort(),
+      NUXT_OG_IMAGE_SECRET: cloudflareEnv?.NUXT_OG_IMAGE_SECRET,
+    },
+  }
+})
+
+function summarize(runtimeConfig: Record<string, any>) {
+  return {
+    ogImage: runtimeConfig.ogImage,
+    nuxtOgImageSecurity: runtimeConfig['nuxt-og-image']?.security,
+    topLevelKeys: Object.keys(runtimeConfig).sort(),
+  }
+}

test/fixtures/cloudflare-runtime-config/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

test/unit/cloudflare-runtime-secret.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const runtimeConfig = {
+  'app': {
+    baseURL: '/',
+  },
+  'nuxt-og-image': {
+    defaults: {},
+    security: {
+      strict: true,
+      secret: '',
+    },
+  },
+  'ogImage': {
+    secret: '',
+  },
+}
+
+vi.mock('nitropack/runtime', () => ({
+  useRuntimeConfig: () => runtimeConfig,
+}))
+
+vi.mock('#og-image-virtual/component-names.mjs', () => ({
+  componentNames: [],
+}))
+
+describe('cloudflare runtime secret', () => {
+  it('does not require an event outside Cloudflare request handling', async () => {
+    const { useOgImageRuntimeConfig } = await import('../../src/runtime/server/utils')
+
+    const config = useOgImageRuntimeConfig()
+
+    expect(config.security.secret).toBe('')
+  })
+
+  it('reads NUXT_OG_IMAGE_SECRET from Cloudflare env bindings', async () => {
+    const { useOgImageRuntimeConfig } = await import('../../src/runtime/server/utils')
+
+    const config = useOgImageRuntimeConfig({
+      context: {
+        cloudflare: {
+          env: {
+            NUXT_OG_IMAGE_SECRET: 'cf-secret',
+          },
+        },
+      },
+    } as any)
+
+    expect(config.security.secret).toBe('cf-secret')
+  })
+})