Fix image optimization invalid internal upstream image (#34899)

This gracefully handles errors when the `url` query string param looks like an internal image because it starts with `/` but it is not pointing to an internal image. Previously, this was printing an unnecessary stack trace when the upstream content-type was undefined. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
vercel · Mar 1, 2022 · 0816b77 · 0816b77
1 parent 6b37d6c
commit 0816b77
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/packages/next/server/image-optimizer.ts b/packages/next/server/image-optimizer.ts
@@ -546,10 +546,18 @@ export async function imageOptimizer(
       throw new ImageError(500, 'Unable to optimize buffer')
     }
   } catch (error) {
-    return {
-      buffer: upstreamBuffer,
-      contentType: upstreamType!,
-      maxAge,
+    if (upstreamBuffer && upstreamType) {
+      // If we fail to optimize, fallback to the original image
+      return {
+        buffer: upstreamBuffer,
+        contentType: upstreamType,
+        maxAge: nextConfig.images.minimumCacheTTL,
+      }
+    } else {
+      throw new ImageError(
+        500,
+        'Unable to optimize image and unable to fallback to upstream image'
+      )
     }
   }
 }

diff --git a/test/integration/image-optimizer/test/util.js b/test/integration/image-optimizer/test/util.js
@@ -691,6 +691,17 @@ export function runTests(ctx) {
     expect(await res.text()).toBe(`"url" parameter is invalid`)
   })
 
+  it('should fail when internal url is not an image', async () => {
+    const url = `//<h1>not-an-image</h1>`
+    const query = { url, w: ctx.w, q: 39 }
+    const opts = { headers: { accept: 'image/webp' } }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
+    expect(res.status).toBe(500)
+    expect(await res.text()).toBe(
+      `Unable to optimize image and unable to fallback to upstream image`
+    )
+  })
+
   if (ctx.domains.includes('localhost')) {
     it('should fail when url fails to load an image', async () => {
       const url = `http://localhost:${ctx.appPort}/not-an-image`

diff --git a/test/production/middleware-typescript/test/index.test.ts b/test/production/middleware-typescript/test/index.test.ts
@@ -18,7 +18,7 @@ describe('should set-up next', () => {
         'next.config.js': new FileRef(join(appDir, 'next.config.js')),
       },
       dependencies: {
-        typescript: 'latest',
+        typescript: '4.4.3',
         '@types/node': 'latest',
         '@types/react': 'latest',
         '@types/react-dom': 'latest',

diff --git a/yarn.lock b/yarn.lock
@@ -4855,7 +4855,7 @@
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
 
-"@types/eslint-scope@^3.7.0", "@types/eslint-scope@^3.7.3":
+"@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
   integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
@@ -4880,11 +4880,6 @@
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
 
-"@types/estree@^0.0.50":
-  version "0.0.50"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
-  integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
-
 "@types/estree@^0.0.51":
   version "0.0.51"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"