Skip to content

[backport]: fix(next/image): fix image-optimizer.ts headers (#82114) #82175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 29, 2025
+18 −1
Merged

[backport]: fix(next/image): fix image-optimizer.ts headers (#82114) #82175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/next/src/server/image-optimizer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -634,7 +634,6 @@ export async function fetchInternalImage(
const mocked = createRequestResponseMocks({
url: href,
method: _req.method || 'GET',
headers: _req.headers,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The error handling logic in fetchInternalImage only catches falsy status codes but ignores HTTP error status codes like 401, 404, or 500.

View Details

Analysis

The condition if (!mocked.res.statusCode) on line 643 only handles cases where the status code is falsy (0, undefined, null), but it doesn't properly handle HTTP error status codes like 401, 404, or 500. When an API returns a 401 status code (as demonstrated by the new test), this condition evaluates to false (since 401 is truthy), and the function proceeds to treat the error response as valid image data.

This causes the error to be handled later in the pipeline when imageOptimizer detects that the response isn't a valid image type, resulting in a generic "The requested resource isn't a valid image" error instead of properly propagating the original API error. While this accidentally produces the expected 400 status code in the test, it's semantically incorrect and produces misleading error messages.

The logic should check for successful HTTP status codes (typically 2xx range) rather than just truthy/falsy values.

Recommendation

Change the condition on line 643 to properly handle HTTP error status codes. Replace:

if (!mocked.res.statusCode) {

with:

if (!mocked.res.statusCode || mocked.res.statusCode >= 400) {

This will properly catch both missing status codes and HTTP error status codes (400+), allowing the function to throw an appropriate error with the actual status code and a more meaningful error message.

socket: _req.socket,
})

Expand Down
11 changes: 11 additions & 0 deletions test/integration/image-optimizer/app/pages/api/conditional-cookie.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const pixel =
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg=='

export default function handler(req, res) {
if (req.headers['cookie']) {
res.setHeader('content-type', 'image/png')
res.end(Buffer.from(pixel, 'base64'))
} else {
res.status(401).end('cookie was not found')
}
}
7 changes: 7 additions & 0 deletions test/integration/image-optimizer/test/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,6 +308,13 @@ export function runTests(ctx: RunTestsCtx) {
expect(ctx.nextOutput).toContain(animatedWarnText)
})

it('should not forward cookie header', async () => {
const query = { w: ctx.w, q: 30, url: '/api/conditional-cookie' }
const opts = { headers: { accept: 'image/webp', cookie: '1' } }
const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
expect(res.status).toBe(400)
})

if (ctx.nextConfigImages?.dangerouslyAllowSVG) {
it('should maintain vector svg', async () => {
const query = { w: ctx.w, q: 90, url: '/test.svg' }
Expand Down
Loading