From 3e7c5803187cfab55627c639f4aec4aa50e8072c Mon Sep 17 00:00:00 2001 From: Joachim Viide Date: Thu, 1 Jul 2021 03:19:27 +0300 Subject: [PATCH 1/2] Add Vary: Accept header to /_next/image responses --- packages/next/server/image-optimizer.ts | 1 + .../image-optimizer/test/index.test.js | 24 +++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/packages/next/server/image-optimizer.ts b/packages/next/server/image-optimizer.ts index 30a175203e7c2..4280a0edfd90f 100644 --- a/packages/next/server/image-optimizer.ts +++ b/packages/next/server/image-optimizer.ts @@ -419,6 +419,7 @@ function setResponseHeaders( isStatic: boolean, isDev: boolean ) { + res.setHeader('Vary', 'Accept') res.setHeader( 'Cache-Control', isStatic diff --git a/test/integration/image-optimizer/test/index.test.js b/test/integration/image-optimizer/test/index.test.js index 161301d3d28b3..886674ce8177f 100644 --- a/test/integration/image-optimizer/test/index.test.js +++ b/test/integration/image-optimizer/test/index.test.js @@ -58,6 +58,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() expect(isAnimated(await res.buffer())).toBe(true) }) @@ -70,6 +71,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() expect(isAnimated(await res.buffer())).toBe(true) }) @@ -82,6 +84,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() expect(isAnimated(await res.buffer())).toBe(true) }) @@ -95,6 +98,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toMatch(/^Accept(,|$)/) expect(res.headers.get('etag')).toBeTruthy() const actual = await res.text() const expected = await fs.readFile( @@ -113,6 +117,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toMatch(/^Accept(,|$)/) expect(res.headers.get('etag')).toBeTruthy() const actual = await res.text() const expected = await fs.readFile( @@ -133,6 +138,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() }) @@ -147,6 +153,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() }) @@ -244,6 +251,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() await expectWidth(res, w) }) @@ -257,6 +265,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() await expectWidth(res, w) }) @@ -270,6 +279,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() await expectWidth(res, w) }) @@ -283,6 +293,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() // FIXME: await expectWidth(res, w) }) @@ -296,6 +307,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() // FIXME: await expectWidth(res, w) }) @@ -311,6 +323,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() await expectWidth(res, w) }) @@ -326,6 +339,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() await expectWidth(res, w) }) @@ -346,6 +360,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() await expectWidth(res, w) }) @@ -448,6 +463,7 @@ function runTests({ w, isDev, domains }) { expect(res1.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res1.headers.get('Vary')).toBe('Accept') const etag = res1.headers.get('Etag') expect(etag).toBeTruthy() await expectWidth(res1, w) @@ -460,6 +476,7 @@ function runTests({ w, isDev, domains }) { expect(res2.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res2.headers.get('Vary')).toBe('Accept') expect((await res2.buffer()).length).toBe(0) const query3 = { url: '/test.jpg', w, q: 25 } @@ -469,6 +486,7 @@ function runTests({ w, isDev, domains }) { expect(res3.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res3.headers.get('Vary')).toBe('Accept') expect(res3.headers.get('Etag')).toBeTruthy() expect(res3.headers.get('Etag')).not.toBe(etag) await expectWidth(res3, w) @@ -486,6 +504,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() const json2 = await fsToJson(imagesDir) @@ -501,6 +520,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') expect(res.headers.get('etag')).toBeTruthy() await expectWidth(res, 400) }) @@ -516,6 +536,7 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') const png = await res.buffer() @@ -540,6 +561,7 @@ function runTests({ w, isDev, domains }) { expect(res1.headers.get('Cache-Control')).toBe( 'public, max-age=315360000, immutable' ) + expect(res1.headers.get('Vary')).toBe('Accept') await expectWidth(res1, w) // Ensure subsequent request also has immutable header @@ -548,6 +570,7 @@ function runTests({ w, isDev, domains }) { expect(res2.headers.get('Cache-Control')).toBe( 'public, max-age=315360000, immutable' ) + expect(res2.headers.get('Vary')).toBe('Accept') await expectWidth(res2, w) } }) @@ -873,6 +896,7 @@ describe('Image Optimizer', () => { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=31536000, must-revalidate` ) + expect(res.headers.get('Vary')).toBe('Accept') await expectWidth(res, 64) }) }) From 4a2e62ffd8bd18fac67e385781758ff3baff983d Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 1 Jul 2021 14:24:47 -0500 Subject: [PATCH 2/2] Update test --- test/integration/image-optimizer/test/index.test.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/test/integration/image-optimizer/test/index.test.js b/test/integration/image-optimizer/test/index.test.js index 886674ce8177f..07eca10b961bb 100644 --- a/test/integration/image-optimizer/test/index.test.js +++ b/test/integration/image-optimizer/test/index.test.js @@ -98,6 +98,8 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) + // SVG is compressible so will have accept-encoding set from + // compression expect(res.headers.get('Vary')).toMatch(/^Accept(,|$)/) expect(res.headers.get('etag')).toBeTruthy() const actual = await res.text() @@ -504,7 +506,9 @@ function runTests({ w, isDev, domains }) { expect(res.headers.get('Cache-Control')).toBe( `public, max-age=${isDev ? 0 : 60}, must-revalidate` ) - expect(res.headers.get('Vary')).toBe('Accept') + // bmp is compressible so will have accept-encoding set from + // compression + expect(res.headers.get('Vary')).toMatch(/^Accept(,|$)/) expect(res.headers.get('etag')).toBeTruthy() const json2 = await fsToJson(imagesDir)