fix(next/image): improve query string validation for integers (#67293)

The Image Optimization API currently uses `parseInt()` for `w` and `q`
query string parameters.

This doesn't handle floats as you might expect and instead coerces, for
example `parseInt('99.9') === 99`.

This PR changes the runtime to match the build time validation and only
accept integers for `w` and `q`.

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

@@ -242,19 +242,28 @@ export class ImageOptimizerCache {
       return { errorMessage: '"w" parameter (width) is required' }
     } else if (Array.isArray(w)) {
       return { errorMessage: '"w" parameter (width) cannot be an array' }
+    } else if (!/^[0-9]+$/.test(w)) {
+      return {
+        errorMessage: '"w" parameter (width) must be an integer greater than 0',
+      }
     }
 
     if (!q) {
       return { errorMessage: '"q" parameter (quality) is required' }
     } else if (Array.isArray(q)) {
       return { errorMessage: '"q" parameter (quality) cannot be an array' }
+    } else if (!/^[0-9]+$/.test(q)) {
+      return {
+        errorMessage:
+          '"q" parameter (quality) must be an integer between 1 and 100',
+      }
     }
 
     const width = parseInt(w, 10)
 
     if (width <= 0 || isNaN(width)) {
       return {
-        errorMessage: '"w" parameter (width) must be a number greater than 0',
+        errorMessage: '"w" parameter (width) must be an integer greater than 0',
       }
     }
 
@@ -273,12 +282,12 @@ export class ImageOptimizerCache {
       }
     }
 
-    const quality = parseInt(q)
+    const quality = parseInt(q, 10)
 
     if (isNaN(quality) || quality < 1 || quality > 100) {
       return {
         errorMessage:
-          '"q" parameter (quality) must be a number between 1 and 100',
+          '"q" parameter (quality) must be an integer between 1 and 100',
       }
     }
 

test/integration/image-optimizer/test/util.ts

@@ -506,7 +506,7 @@ export function runTests(ctx: RunTestsCtx) {
     const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
     expect(res.status).toBe(400)
     expect(await res.text()).toBe(
-      `"q" parameter (quality) must be a number between 1 and 100`
+      `"q" parameter (quality) must be an integer between 1 and 100`
     )
   })
 
@@ -515,7 +515,7 @@ export function runTests(ctx: RunTestsCtx) {
     const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
     expect(res.status).toBe(400)
     expect(await res.text()).toBe(
-      `"q" parameter (quality) must be a number between 1 and 100`
+      `"q" parameter (quality) must be an integer between 1 and 100`
     )
   })
 
@@ -524,7 +524,7 @@ export function runTests(ctx: RunTestsCtx) {
     const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
     expect(res.status).toBe(400)
     expect(await res.text()).toBe(
-      `"w" parameter (width) must be a number greater than 0`
+      `"w" parameter (width) must be an integer greater than 0`
     )
   })
 
@@ -533,7 +533,7 @@ export function runTests(ctx: RunTestsCtx) {
     const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
     expect(res.status).toBe(400)
     expect(await res.text()).toBe(
-      `"w" parameter (width) must be a number greater than 0`
+      `"w" parameter (width) must be an integer greater than 0`
     )
   })
 
@@ -542,7 +542,16 @@ export function runTests(ctx: RunTestsCtx) {
     const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
     expect(res.status).toBe(400)
     expect(await res.text()).toBe(
-      `"w" parameter (width) must be a number greater than 0`
+      `"w" parameter (width) must be an integer greater than 0`
+    )
+  })
+
+  it('should fail when w is not an integer', async () => {
+    const query = { url: '/test.png', w: 99.9, q: 100 }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
+    expect(res.status).toBe(400)
+    expect(await res.text()).toBe(
+      `"w" parameter (width) must be an integer greater than 0`
     )
   })
 
@@ -551,7 +560,16 @@ export function runTests(ctx: RunTestsCtx) {
     const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
     expect(res.status).toBe(400)
     expect(await res.text()).toBe(
-      `"q" parameter (quality) must be a number between 1 and 100`
+      `"q" parameter (quality) must be an integer between 1 and 100`
+    )
+  })
+
+  it('should fail when q is not an integer', async () => {
+    const query = { url: '/test.png', w: ctx.w, q: 99.9 }
+    const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
+    expect(res.status).toBe(400)
+    expect(await res.text()).toBe(
+      `"q" parameter (quality) must be an integer between 1 and 100`
     )
   })