Make sure the image optimization endpoint only response with images (#23366)

If the upstream MIME type isn't prefixed with `image/`, the endpoint should directly response with a 400 error.

## Bug

- [x] Fixes #23312
- [x] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes

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

@@ -230,6 +230,13 @@ export async function imageOptimizer(
       sendResponse(req, res, upstreamType, upstreamBuffer)
       return { finished: true }
     }
+
+    // If upstream type is not a valid image type, return 400 error.
+    if (!upstreamType.startsWith('image/')) {
+      res.statusCode = 400
+      res.end("The requested resource isn't a valid image.")
+      return { finished: true }
+    }
   }
 
   let contentType: string

test/integration/image-optimizer/public/text.txt

+hi
\ No newline at end of file

test/integration/image-optimizer/test/index.test.js

@@ -481,6 +481,14 @@ function runTests({ w, isDev, domains }) {
     expect(res.headers.get('etag')).toBeTruthy()
     await expectWidth(res, 400)
   })
+
+  it("should error if the resource isn't a valid image", async () => {
+    const query = { url: '/test.txt', w, q: 80 }
+    const opts = { headers: { accept: 'image/webp' } }
+    const res = await fetchViaHTTP(appPort, '/_next/image', query, opts)
+    expect(res.status).toBe(400)
+    expect(await res.text()).toBe("The requested resource isn't a valid image.")
+  })
 }
 
 describe('Image Optimizer', () => {