fix(cloudflare): handle app.baseURL, cross-zone origin detection and external sources

Author: adamkasper

src/runtime/providers/cloudflare.ts

@@ -1,4 +1,4 @@
-import { encodeQueryItem, joinURL } from 'ufo'
+import { encodeQueryItem, hasProtocol, joinURL } from 'ufo'
 import { createOperationsGenerator } from '../utils/index'
 import { defineProvider } from '../utils/provider'
 
@@ -36,20 +36,43 @@ interface CloudflareOptions {
   baseURL?: string
 }
 
-// https://developers.cloudflare.com/images/image-resizing/url-format/
+function getRequestOrigin(event: unknown): string {
+  const headers = (event as any)?.headers
+  if (typeof headers?.get === 'function') {
+    const host = headers.get('x-forwarded-host') || headers.get('host')
+    const proto = headers.get('x-forwarded-proto') || 'https'
+    if (host) return `${proto}://${host}`
+  }
+  if (typeof window !== 'undefined' && window.location?.origin && window.location.origin !== 'null') {
+    return window.location.origin
+  }
+  return ''
+}
+
+// https://developers.cloudflare.com/images/transform-images/transform-via-url/
 export default defineProvider<CloudflareOptions>({
-  getImage: (src, {
-    modifiers,
-    baseURL = '/',
-  }) => {
+  getImage: (src, { modifiers, baseURL = '/' }, ctx) => {
     const mergeModifiers = { ...defaultModifiers, ...modifiers }
     const operations = operationsGenerator(mergeModifiers as any)
 
-    // https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>
-    const url = operations ? joinURL(baseURL, 'cdn-cgi/image', operations, src) : src
+    const isExternal = hasProtocol(src)
+    const sourcePath = isExternal ? src : joinURL(ctx.options.nuxt.baseURL, src)
 
-    return {
-      url,
+    // When baseURL is a different zone (absolute URL) and src is relative,
+    // resolve to an absolute URL so Cloudflare can fetch from the correct origin
+    let imageSource = sourcePath
+    if (!isExternal && hasProtocol(baseURL)) {
+      const origin = getRequestOrigin(ctx.options.event)
+      if (origin) {
+        imageSource = joinURL(origin, sourcePath)
+      }
     }
+
+    // https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>
+    const url = operations
+      ? joinURL(baseURL, 'cdn-cgi/image', operations, imageSource)
+      : sourcePath
+
+    return { url }
   },
 })

test/nuxt/providers.test.ts

@@ -109,6 +109,107 @@ describe('Providers', () => {
     }
   })
 
+  it('cloudflare with app.baseURL', () => {
+    const ctx = { options: { ...emptyContext.options, nuxt: { baseURL: '/admin/' } } } as any
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: { width: 200 },
+      baseURL: '/',
+    }, ctx)).toMatchObject({ url: '/cdn-cgi/image/w=200/admin/images/test.png' })
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: {},
+      baseURL: '/',
+    }, ctx)).toMatchObject({ url: '/admin/images/test.png' })
+  })
+
+  it('cloudflare with external image', () => {
+    expect(cloudflare().getImage('https://example.com/photo.jpg', {
+      modifiers: { width: 200 },
+      baseURL: '/',
+    }, emptyContext)).toMatchObject({ url: '/cdn-cgi/image/w=200/https://example.com/photo.jpg' })
+
+    expect(cloudflare().getImage('https://example.com/photo.jpg', {
+      modifiers: {},
+      baseURL: '/',
+    }, emptyContext)).toMatchObject({ url: 'https://example.com/photo.jpg' })
+  })
+
+  it('cloudflare cross-zone', () => {
+    const ctx = {
+      options: {
+        ...emptyContext.options,
+        nuxt: { baseURL: '/' },
+        event: {
+          headers: new Headers({
+            'host': 'app.example.com',
+            'x-forwarded-proto': 'https',
+          }),
+        },
+      },
+    } as any
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: { width: 200 },
+      baseURL: 'https://cdn.example.com',
+    }, ctx)).toMatchObject({ url: 'https://cdn.example.com/cdn-cgi/image/w=200/https://app.example.com/images/test.png' })
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: {},
+      baseURL: 'https://cdn.example.com',
+    }, ctx)).toMatchObject({ url: '/images/test.png' })
+  })
+
+  it('cloudflare cross-zone with app.baseURL', () => {
+    const ctx = {
+      options: {
+        ...emptyContext.options,
+        nuxt: { baseURL: '/admin/' },
+        event: {
+          headers: new Headers({
+            'host': 'app.example.com',
+            'x-forwarded-proto': 'https',
+          }),
+        },
+      },
+    } as any
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: { width: 200 },
+      baseURL: 'https://cdn.example.com',
+    }, ctx)).toMatchObject({ url: 'https://cdn.example.com/cdn-cgi/image/w=200/https://app.example.com/admin/images/test.png' })
+
+    expect(cloudflare().getImage('/images/test.png', {
+      modifiers: {},
+      baseURL: 'https://cdn.example.com',
+    }, ctx)).toMatchObject({ url: '/admin/images/test.png' })
+  })
+
+  it('cloudflare cross-zone with external src', () => {
+    const ctx = {
+      options: {
+        ...emptyContext.options,
+        nuxt: { baseURL: '/' },
+        event: {
+          headers: new Headers({
+            'host': 'app.example.com',
+            'x-forwarded-proto': 'https',
+          }),
+        },
+      },
+    } as any
+
+    expect(cloudflare().getImage('https://other.example.com/images/test.png', {
+      modifiers: { width: 200 },
+      baseURL: 'https://cdn.example.com',
+    }, ctx)).toMatchObject({ url: 'https://cdn.example.com/cdn-cgi/image/w=200/https://other.example.com/images/test.png' })
+
+    expect(cloudflare().getImage('https://other.example.com/images/test.png', {
+      modifiers: {},
+      baseURL: 'https://cdn.example.com',
+    }, ctx)).toMatchObject({ url: 'https://other.example.com/images/test.png' })
+  })
+
   it('cloudinary', () => {
     const providerOptions = {
       baseURL: '/',