fix: broken slash decoding in some cases

harlan-zw · harlan-zw · commit 6f8ac7658bba · 2026-03-23T13:54:30.000+11:00
Fixes #522
diff --git a/src/runtime/server/og-image/context.ts b/src/runtime/server/og-image/context.ts
@@ -16,7 +16,7 @@ import { useNitroApp } from 'nitropack/runtime'
 import { hash } from 'ohash'
 import { parseURL, withoutLeadingSlash, withoutTrailingSlash, withQuery } from 'ufo'
 import { normalizeKey } from 'unstorage'
-import { decodeOgImageParams, separateProps } from '../../shared'
+import { decodeOgImageParams, extractEncodedSegment, separateProps } from '../../shared'
 import { autoEjectCommunityTemplate } from '../util/auto-eject'
 import { createNitroRouteRuleMatcher } from '../util/kit'
 import { normaliseOptions } from '../util/options'
@@ -59,7 +59,7 @@ export async function resolveContext(e: H3Event): Promise<H3Error | OgImageRende
   // Parse encoded params from URL path (Cloudinary-style)
   // URL format: /_og/d/w_1200,title_Hello.png
   // Hash mode: /_og/d/o_<hash>.png (for long URLs)
-  const encodedSegment = (path.split('/').pop() as string).replace(new RegExp(`\\.${extension}$`), '')
+  const encodedSegment = extractEncodedSegment(path, extension)
 
   // Check for hash mode (o_<hash>)
   const hashMatch = encodedSegment.match(RE_HASH_MODE)
diff --git a/src/runtime/shared.ts b/src/runtime/shared.ts
@@ -4,7 +4,7 @@ import { defu } from 'defu'
 import { toValue } from 'vue'
 
 export { extractSocialPreviewTags, toBase64Image } from './pure'
-export { buildOgImageUrl, decodeOgImageParams, encodeOgImageParams, hashOgImageOptions, parseOgImageUrl } from './shared/urlEncoding'
+export { buildOgImageUrl, decodeOgImageParams, encodeOgImageParams, extractEncodedSegment, hashOgImageOptions, parseOgImageUrl } from './shared/urlEncoding'
 
 const RE_KEBAB_CASE = /-([a-z])/g
 
diff --git a/src/runtime/shared/urlEncoding.ts b/src/runtime/shared/urlEncoding.ts
@@ -26,6 +26,7 @@ const RE_PERCENT20 = /%20/g
 const RE_PLUS = /\+/g
 const RE_SINGLE_UNDERSCORE = /(?<!_)_(?!_)/
 const RE_OG_PATH_PREFIX = /^\/_og\/[ds]\//
+const RE_OG_ROUTE_PREFIX = /\/_og\/[ds]\//
 const RE_FILE_EXTENSION_WITH_CAPTURE = /\.(\w+)$/
 const RE_FILE_EXTENSION = /\.\w+$/
 const RE_HASH_SEGMENT = /^o_([a-z0-9]+)$/i
@@ -442,3 +443,17 @@ export function parseOgImageUrl(url: string): {
     isStatic,
   }
 }
+
+/**
+ * Extract the encoded segment from the full path, handling the case where
+ * %2F in prop values has been decoded to / by intermediaries (#522).
+ * Uses the full catch-all match after /_og/d/ (or /_og/s/) instead of
+ * only the last path segment.
+ */
+export function extractEncodedSegment(path: string, extension: string): string {
+  const match = path.match(RE_OG_ROUTE_PREFIX)
+  if (match?.index != null) {
+    return path.slice(match.index + match[0].length).replace(new RegExp(`\\.${extension}$`), '')
+  }
+  return (path.split('/').pop() as string).replace(new RegExp(`\\.${extension}$`), '')
+}
diff --git a/test/unit/extractEncodedSegment.test.ts b/test/unit/extractEncodedSegment.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest'
+import { decodeOgImageParams, extractEncodedSegment } from '../../src/runtime/shared/urlEncoding'
+
+describe('extractEncodedSegment', () => {
+  describe('normal encoded URLs (single segment)', () => {
+    it('extracts from /_og/d/ path', () => {
+      expect(extractEncodedSegment('/_og/d/w_1200,title_Hello.png', 'png'))
+        .toBe('w_1200,title_Hello')
+    })
+
+    it('extracts from /_og/s/ path', () => {
+      expect(extractEncodedSegment('/_og/s/w_1200,title_Hello.png', 'png'))
+        .toBe('w_1200,title_Hello')
+    })
+
+    it('strips jpeg extension', () => {
+      expect(extractEncodedSegment('/_og/d/w_1200.jpeg', 'jpeg'))
+        .toBe('w_1200')
+    })
+
+    it('handles hash mode segment', () => {
+      expect(extractEncodedSegment('/_og/d/o_abc123.png', 'png'))
+        .toBe('o_abc123')
+    })
+
+    it('handles default segment', () => {
+      expect(extractEncodedSegment('/_og/d/default.png', 'png'))
+        .toBe('default')
+    })
+  })
+
+  describe('decoded %2F in prop values (#522)', () => {
+    it('preserves full segment when coverSrc contains decoded slashes', () => {
+      const path = '/_og/d/c_Blog,coverSrc_/img/blog/cover.jpg.png'
+      expect(extractEncodedSegment(path, 'png'))
+        .toBe('c_Blog,coverSrc_/img/blog/cover.jpg')
+    })
+
+    it('preserves full segment with multiple decoded slashes', () => {
+      const path = '/_og/d/c_Blog,coverSrc_/img/foo/bar/baz.jpg,title_Hello.png'
+      expect(extractEncodedSegment(path, 'png'))
+        .toBe('c_Blog,coverSrc_/img/foo/bar/baz.jpg,title_Hello')
+    })
+
+    it('preserves full segment with single decoded slash', () => {
+      const path = '/_og/d/c_Blog,coverSrc_/cover.jpg.png'
+      expect(extractEncodedSegment(path, 'png'))
+        .toBe('c_Blog,coverSrc_/cover.jpg')
+    })
+
+    it('works end-to-end: decoded slashes produce same params as encoded', () => {
+      // Original encoded URL segment (before %2F decode)
+      const originalSegment = 'c_Blog,coverSrc_%2Fimg%2Fblog%2Fcover.jpg,title_Hello+World'
+      const originalDecoded = decodeOgImageParams(originalSegment)
+
+      // After intermediary decodes %2F to /
+      const decodedPath = '/_og/d/c_Blog,coverSrc_/img/blog/cover.jpg,title_Hello+World.png'
+      const extractedSegment = extractEncodedSegment(decodedPath, 'png')
+      const reDecoded = decodeOgImageParams(extractedSegment)
+
+      expect(reDecoded).toEqual(originalDecoded)
+      expect(reDecoded.component).toBe('Blog')
+      expect(reDecoded.props?.coverSrc).toBe('/img/blog/cover.jpg')
+      expect(reDecoded.props?.title).toBe('Hello World')
+    })
+
+    it('old behavior would fail: split("/").pop() loses props before decoded slash', () => {
+      // Demonstrate what the old code would produce
+      const path = '/_og/d/c_Blog,coverSrc_/img/blog/cover.jpg,title_Hello.png'
+      const oldResult = (path.split('/').pop() as string).replace(/\.png$/, '')
+      // Old: only gets the last segment after the last /
+      expect(oldResult).toBe('cover.jpg,title_Hello')
+
+      // New: gets the full segment
+      const newResult = extractEncodedSegment(path, 'png')
+      expect(newResult).toBe('c_Blog,coverSrc_/img/blog/cover.jpg,title_Hello')
+
+      // Old decode loses component and coverSrc
+      const oldDecoded = decodeOgImageParams(oldResult)
+      expect(oldDecoded.component).toBeUndefined()
+
+      // New decode preserves everything
+      const newDecoded = decodeOgImageParams(newResult)
+      expect(newDecoded.component).toBe('Blog')
+      expect(newDecoded.props?.coverSrc).toBe('/img/blog/cover.jpg')
+    })
+  })
+
+  describe('with base path prefix', () => {
+    it('works when app has a base path', () => {
+      expect(extractEncodedSegment('/prefix/_og/d/w_1200,title_Hello.png', 'png'))
+        .toBe('w_1200,title_Hello')
+    })
+
+    it('works with base path and decoded slashes', () => {
+      const path = '/my-app/_og/d/c_Blog,coverSrc_/img/cover.jpg.png'
+      expect(extractEncodedSegment(path, 'png'))
+        .toBe('c_Blog,coverSrc_/img/cover.jpg')
+    })
+  })
+
+  describe('fallback behavior', () => {
+    it('falls back to last segment when no /_og/ prefix found', () => {
+      expect(extractEncodedSegment('/unknown/path/w_1200.png', 'png'))
+        .toBe('w_1200')
+    })
+  })
+})
