fix(next/image): improve and simplify detect-content-type (#82118)

Add support for detecting more src image formats via magic number. The
src image formats are handled as follows:

- `image/jxl` - serve as is (since safari can render it)
- `image/heic` - serve as is (since safari can render it)
- `image/jp2` - serve as is (since safari can render it)
- `application/pdf` - error (since no browser will render it)
- `image/pic` - error (since no browser will render it)

We also fallback to `sharp().metadata()` if we can't detect the magic
number to ensure correctness.

Author: styfle

packages/next/src/server/image-optimizer.ts

@@ -37,12 +37,20 @@ const AVIF = 'image/avif'
 const WEBP = 'image/webp'
 const PNG = 'image/png'
 const JPEG = 'image/jpeg'
+const JXL = 'image/jxl'
+const JP2 = 'image/jp2'
+const HEIC = 'image/heic'
 const GIF = 'image/gif'
 const SVG = 'image/svg+xml'
 const ICO = 'image/x-icon'
+const ICNS = 'image/x-icns'
+const TIFF = 'image/tiff'
+const BMP = 'image/bmp'
+const PDF = 'application/pdf'
 const CACHE_VERSION = 3
 const ANIMATABLE_TYPES = [WEBP, PNG, GIF]
 const VECTOR_TYPES = [SVG]
+const BYPASS_TYPES = [SVG, ICO, ICNS, BMP, JXL, HEIC]
 const BLUR_IMG_SIZE = 8 // should match `next-image-loader`
 const BLUR_QUALITY = 70 // should match `next-image-loader`
 
@@ -118,7 +126,9 @@ async function writeToCacheDir(
  * it matches the "magic number" of known file signatures.
  * https://en.wikipedia.org/wiki/List_of_file_signatures
  */
-export function detectContentType(buffer: Buffer) {
+export async function detectContentType(
+  buffer: Buffer
+): Promise<string | null> {
   if ([0xff, 0xd8, 0xff].every((b, i) => buffer[i] === b)) {
     return JPEG
   }
@@ -152,6 +162,89 @@ export function detectContentType(buffer: Buffer) {
   if ([0x00, 0x00, 0x01, 0x00].every((b, i) => buffer[i] === b)) {
     return ICO
   }
+  if ([0x69, 0x63, 0x6e, 0x73].every((b, i) => buffer[i] === b)) {
+    return ICNS
+  }
+  if ([0x49, 0x49, 0x2a, 0x00].every((b, i) => buffer[i] === b)) {
+    return TIFF
+  }
+  if ([0x42, 0x4d].every((b, i) => buffer[i] === b)) {
+    return BMP
+  }
+  if ([0xff, 0x0a].every((b, i) => buffer[i] === b)) {
+    return JXL
+  }
+  if (
+    [
+      0x00, 0x00, 0x00, 0x0c, 0x4a, 0x58, 0x4c, 0x20, 0x0d, 0x0a, 0x87, 0x0a,
+    ].every((b, i) => buffer[i] === b)
+  ) {
+    return JXL
+  }
+  if (
+    [0, 0, 0, 0, 0x66, 0x74, 0x79, 0x70, 0x68, 0x65, 0x69, 0x63].every(
+      (b, i) => !b || buffer[i] === b
+    )
+  ) {
+    return HEIC
+  }
+  if ([0x25, 0x50, 0x44, 0x46, 0x2d].every((b, i) => buffer[i] === b)) {
+    return PDF
+  }
+  if (
+    [
+      0x00, 0x00, 0x00, 0x0c, 0x6a, 0x50, 0x20, 0x20, 0x0d, 0x0a, 0x87, 0x0a,
+    ].every((b, i) => buffer[i] === b)
+  ) {
+    return JP2
+  }
+
+  // Fallback to sharp if available
+  if (sharp) {
+    const meta = await sharp(buffer)
+      .metadata()
+      .catch((_) => null)
+    switch (meta?.format) {
+      case 'avif':
+        return AVIF
+      case 'webp':
+        return WEBP
+      case 'png':
+        return PNG
+      case 'jpeg':
+      case 'jpg':
+        return JPEG
+      case 'gif':
+        return GIF
+      case 'svg':
+        return SVG
+      case 'jxl':
+        return JXL
+      case 'jp2':
+        return JP2
+      case 'tiff':
+      case 'tif':
+        return TIFF
+      case 'pdf':
+        return PDF
+      case 'dcraw':
+      case 'dz':
+      case 'exr':
+      case 'fits':
+      case 'heif':
+      case 'input':
+      case 'magick':
+      case 'openslide':
+      case 'ppm':
+      case 'rad':
+      case 'raw':
+      case 'v':
+      case undefined:
+      default:
+        return null
+    }
+  }
+
   return null
 }
 
@@ -639,54 +732,52 @@ export async function imageOptimizer(
 ): Promise<{ buffer: Buffer; contentType: string; maxAge: number }> {
   const { href, quality, width, mimeType } = paramsResult
   const upstreamBuffer = imageUpstream.buffer
-  const maxAge = getMaxAge(imageUpstream.cacheControl)
-  const upstreamType =
-    detectContentType(upstreamBuffer) ||
-    imageUpstream.contentType?.toLowerCase().trim()
-
-  if (upstreamType) {
-    if (
-      upstreamType.startsWith('image/svg') &&
-      !nextConfig.images.dangerouslyAllowSVG
-    ) {
-      Log.error(
-        `The requested resource "${href}" has type "${upstreamType}" but dangerouslyAllowSVG is disabled`
-      )
-      throw new ImageError(
-        400,
-        '"url" parameter is valid but image type is not allowed'
-      )
-    }
+  const maxAge = Math.max(
+    nextConfig.images.minimumCacheTTL,
+    getMaxAge(imageUpstream.cacheControl)
+  )
+  const upstreamType = await detectContentType(upstreamBuffer)
 
-    if (ANIMATABLE_TYPES.includes(upstreamType) && isAnimated(upstreamBuffer)) {
-      Log.warnOnce(
-        `The requested resource "${href}" is an animated image so it will not be optimized. Consider adding the "unoptimized" property to the <Image>.`
-      )
-      return { buffer: upstreamBuffer, contentType: upstreamType, maxAge }
-    }
-    if (VECTOR_TYPES.includes(upstreamType)) {
-      // We don't warn here because we already know that "dangerouslyAllowSVG"
-      // was enabled above, therefore the user explicitly opted in.
-      // If we add more VECTOR_TYPES besides SVG, perhaps we could warn for those.
-      return { buffer: upstreamBuffer, contentType: upstreamType, maxAge }
-    }
-    if (!upstreamType.startsWith('image/') || upstreamType.includes(',')) {
-      Log.error(
-        "The requested resource isn't a valid image for",
-        href,
-        'received',
-        upstreamType
-      )
-      throw new ImageError(400, "The requested resource isn't a valid image.")
-    }
+  if (
+    !upstreamType ||
+    !upstreamType.startsWith('image/') ||
+    upstreamType.includes(',')
+  ) {
+    Log.error(
+      "The requested resource isn't a valid image for",
+      href,
+      'received',
+      upstreamType
+    )
+    throw new ImageError(400, "The requested resource isn't a valid image.")
+  }
+  if (
+    upstreamType.startsWith('image/svg') &&
+    !nextConfig.images.dangerouslyAllowSVG
+  ) {
+    Log.error(
+      `The requested resource "${href}" has type "${upstreamType}" but dangerouslyAllowSVG is disabled`
+    )
+    throw new ImageError(
+      400,
+      '"url" parameter is valid but image type is not allowed'
+    )
+  }
+  if (ANIMATABLE_TYPES.includes(upstreamType) && isAnimated(upstreamBuffer)) {
+    Log.warnOnce(
+      `The requested resource "${href}" is an animated image so it will not be optimized. Consider adding the "unoptimized" property to the <Image>.`
+    )
+    return { buffer: upstreamBuffer, contentType: upstreamType, maxAge }
+  }
+  if (BYPASS_TYPES.includes(upstreamType)) {
+    return { buffer: upstreamBuffer, contentType: upstreamType, maxAge }
   }
 
   let contentType: string
 
   if (mimeType) {
     contentType = mimeType
   } else if (
-    upstreamType?.startsWith('image/') &&
     getExtension(upstreamType) &&
     upstreamType !== WEBP &&
     upstreamType !== AVIF

packages/next/src/server/serve-static.ts

@@ -5,6 +5,9 @@ import send from 'next/dist/compiled/send'
 // Although "mime" has already add avif in version 2.4.7, "send" is still using [email protected]
 send.mime.define({
   'image/avif': ['avif'],
+  'image/x-icns': ['icns'],
+  'image/jxl': ['jxl'],
+  'image/heic': ['heic'],
 })
 
 export function serveStatic(

test/integration/image-optimizer/app/public/test.heic

@@ -196,6 +196,70 @@ export function runTests(ctx) {
     expect(res.status).toBe(200)
   })
 
+  it('should maintain icns', async () => {
+    const query = { w: ctx.w, q: 90, url: '/test.icns' }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
+    expect(res.status).toBe(200)
+    expect(res.headers.get('Content-Type')).toContain('image/x-icns')
+    expect(res.headers.get('Cache-Control')).toBe(
+      `public, max-age=${isDev ? 0 : minimumCacheTTL}, must-revalidate`
+    )
+    expect(res.headers.get('Vary')).toBe('Accept')
+    expect(res.headers.get('etag')).toBeTruthy()
+    expect(res.headers.get('Content-Disposition')).toBe(
+      `${contentDispositionType}; filename="test.icns"`
+    )
+    await expectWidth(res, 256)
+  })
+
+  it('should maintain jxl', async () => {
+    const query = { w: ctx.w, q: 90, url: '/test.jxl' }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
+    expect(res.status).toBe(200)
+    expect(res.headers.get('Content-Type')).toContain('image/jxl')
+    expect(res.headers.get('Cache-Control')).toBe(
+      `public, max-age=${isDev ? 0 : minimumCacheTTL}, must-revalidate`
+    )
+    expect(res.headers.get('Vary')).toBe('Accept')
+    expect(res.headers.get('etag')).toBeTruthy()
+    expect(res.headers.get('Content-Disposition')).toBe(
+      `${contentDispositionType}; filename="test.jxl"`
+    )
+    await expectWidth(res, 800)
+  })
+
+  it('should maintain heic', async () => {
+    const query = { w: ctx.w, q: 90, url: '/test.heic' }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
+    expect(res.status).toBe(200)
+    expect(res.headers.get('Content-Type')).toContain('image/heic')
+    expect(res.headers.get('Cache-Control')).toBe(
+      `public, max-age=${isDev ? 0 : minimumCacheTTL}, must-revalidate`
+    )
+    expect(res.headers.get('Vary')).toBe('Accept')
+    expect(res.headers.get('etag')).toBeTruthy()
+    expect(res.headers.get('Content-Disposition')).toBe(
+      `${contentDispositionType}; filename="test.heic"`
+    )
+    await expectWidth(res, 400)
+  })
+
+  it('should maintain jp2', async () => {
+    const query = { w: ctx.w, q: 90, url: '/test.jp2' }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
+    expect(res.status).toBe(200)
+    expect(res.headers.get('Content-Type')).toContain('image/jp2')
+    expect(res.headers.get('Cache-Control')).toBe(
+      `public, max-age=${isDev ? 0 : minimumCacheTTL}, must-revalidate`
+    )
+    expect(res.headers.get('Vary')).toBe('Accept')
+    expect(res.headers.get('etag')).toBeTruthy()
+    expect(res.headers.get('Content-Disposition')).toBe(
+      `${contentDispositionType}; filename="test.jp2"`
+    )
+    await expectWidth(res, 1)
+  })
+
   it('should maintain animated gif', async () => {
     const query = { w: ctx.w, q: 90, url: '/animated.gif' }
     const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
@@ -288,7 +352,6 @@ export function runTests(ctx) {
         'utf8'
       )
       expect(actual).toMatch(expected)
-      expect(ctx.nextOutput).not.toContain('The requested resource')
     })
   } else {
     it('should not allow vector svg', async () => {
@@ -325,11 +388,21 @@ export function runTests(ctx) {
       const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
       expect(res.status).toBe(400)
       expect(await res.text()).toContain(
-        '"url" parameter is valid but image type is not allowed'
+        "The requested resource isn't a valid image"
       )
     })
   }
 
+  it('should not allow pdf format', async () => {
+    const query = { w: ctx.w, q: 90, url: '/test.pdf' }
+    const opts = { headers: { accept: 'image/webp' } }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
+    expect(res.status).toBe(400)
+    expect(await res.text()).toContain(
+      "The requested resource isn't a valid image"
+    )
+  })
+
   it('should maintain ico format', async () => {
     const query = { w: ctx.w, q: 90, url: `/test.ico` }
     const opts = { headers: { accept: 'image/webp' } }
@@ -933,8 +1006,8 @@ export function runTests(ctx) {
     const opts = { headers: { accept: 'image/webp' } }
     const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
     expect(res.status).toBe(400)
-    expect(await res.text()).toBe(
-      `Unable to optimize image and unable to fallback to upstream image`
+    expect(await res.text()).toContain(
+      "The requested resource isn't a valid image"
     )
   })