Fix Invalid character in header ["Content-Disposition"]

packages/next/compiled/content-disposition/LICENSE

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2014-2017 Douglas Christopher Wilson
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/next/compiled/content-disposition/package.json

@@ -0,0 +1 @@
+{"name":"content-disposition","main":"index.js","author":"Douglas Christopher Wilson <doug@somethingdoug.com>","license":"MIT"}

packages/next/package.json

@@ -167,6 +167,7 @@
     "@types/babel__traverse": "7.11.0",
     "@types/ci-info": "2.0.0",
     "@types/compression": "0.0.36",
+    "@types/content-disposition": "0.5.4",
     "@types/content-type": "1.1.3",
     "@types/cookie": "0.3.3",
     "@types/cross-spawn": "6.0.0",
@@ -203,6 +204,7 @@
     "comment-json": "3.0.3",
     "compression": "1.7.4",
     "conf": "5.0.0",
+    "content-disposition": "0.5.3",
     "content-type": "1.0.4",
     "cookie": "0.4.1",
     "cross-spawn": "6.0.5",

packages/next/server/image-optimizer.ts

@@ -6,6 +6,7 @@ import imageSizeOf from 'image-size'
 import { IncomingMessage, ServerResponse } from 'http'
 // @ts-ignore no types for is-animated
 import isAnimated from 'next/dist/compiled/is-animated'
+import contentDisposition from 'next/dist/compiled/content-disposition'
 import { join } from 'path'
 import Stream from 'stream'
 import nodeUrl, { UrlWithParsedQuery } from 'url'
@@ -541,7 +542,10 @@ function setResponseHeaders(
 
   const fileName = getFileNameWithExtension(url, contentType)
   if (fileName) {
-    res.setHeader('Content-Disposition', `inline; filename="${fileName}"`)
+    res.setHeader(
+      'Content-Disposition',
+      contentDisposition(fileName, { type: 'inline' })
+    )
   }
 
   res.setHeader('Content-Security-Policy', `script-src 'none'; sandbox;`)

packages/next/taskfile.js

@@ -199,6 +199,16 @@ export async function ncc_conf(task, opts) {
     .target('compiled/conf')
 }
 // eslint-disable-next-line camelcase
+externals['content-disposition'] = 'next/dist/compiled/content-disposition'
+export async function ncc_content_disposition(task, opts) {
+  await task
+    .source(
+      opts.src || relative(__dirname, require.resolve('content-disposition'))
+    )
+    .ncc({ packageName: 'content-disposition', externals })
+    .target('compiled/content-disposition')
+}
+// eslint-disable-next-line camelcase
 externals['content-type'] = 'next/dist/compiled/content-type'
 export async function ncc_content_type(task, opts) {
   await task
@@ -929,6 +939,7 @@ export async function ncc(task, opts) {
         'ncc_comment_json',
         'ncc_compression',
         'ncc_conf',
+        'ncc_content_disposition',
         'ncc_content_type',
         'ncc_cookie',
         'ncc_cross_spawn',

packages/next/types/misc.d.ts

@@ -87,6 +87,10 @@ declare module 'next/dist/compiled/conf' {
   import m from 'conf'
   export = m
 }
+declare module 'next/dist/compiled/content-disposition' {
+  import m from 'content-disposition'
+  export = m
+}
 declare module 'next/dist/compiled/content-type' {
   import m from 'content-type'
   export = m

test/integration/image-component/unicode/pages/index.js

@@ -1,16 +1,16 @@
 import React from 'react'
 import Image from 'next/image'
-import img from '../public/äöü.png'
+import img from '../public/äöüščří.png'
 
 const Page = () => {
   return (
     <div>
       <h1>Unicode Image URL</h1>
       <Image id="static" src={img} />
-      <Image id="internal" src="/äöü.png" width={400} height={400} />
+      <Image id="internal" src="/äöüščří.png" width={400} height={400} />
       <Image
         id="external"
-        src="https://image-optimization-test.vercel.app/äöü.png"
+        src="https://image-optimization-test.vercel.app/äöüščří.png"
         width={400}
         height={400}
       />

test/integration/image-component/unicode/test/index.test.js

@@ -20,15 +20,19 @@ let browser
 function runTests() {
   it('should load static unicode image', async () => {
     const src = await browser.elementById('static').getAttribute('src')
-    expect(src).toMatch(/_next%2Fstatic%2Fmedia%2F%C3%A4%C3%B6%C3%BC(.+)png/)
+    expect(src).toMatch(
+      /_next%2Fstatic%2Fmedia%2F%C3%A4%C3%B6%C3%BC%C5%A1%C4%8D%C5%99%C3%ADC(.+)png/
+    )
     const fullSrc = new URL(src, `http://localhost:${appPort}`)
     const res = await fetch(fullSrc)
     expect(res.status).toBe(200)
   })
 
   it('should load internal unicode image', async () => {
     const src = await browser.elementById('internal').getAttribute('src')
-    expect(src).toMatch('/_next/image?url=%2F%C3%A4%C3%B6%C3%BC.png')
+    expect(src).toMatch(
+      '/_next/image?url=%2F%C3%A4%C3%B6%C3%BC%C5%A1%C4%8D%C5%99%C3%ADC.png'
+    )
     const fullSrc = new URL(src, `http://localhost:${appPort}`)
     const res = await fetch(fullSrc)
     expect(res.status).toBe(200)
@@ -37,7 +41,7 @@ function runTests() {
   it('should load external unicode image', async () => {
     const src = await browser.elementById('external').getAttribute('src')
     expect(src).toMatch(
-      '/_next/image?url=https%3A%2F%2Fimage-optimization-test.vercel.app%2F%C3%A4%C3%B6%C3%BC.png'
+      '/_next/image?url=https%3A%2F%2Fimage-optimization-test.vercel.app%2F%C3%A4%C3%B6%C3%BC%C5%A1%C4%8D%C5%99%C3%ADC.png'
     )
     const fullSrc = new URL(src, `http://localhost:${appPort}`)
     const res = await fetch(fullSrc)

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

@@ -63,7 +63,7 @@ function runTests({
   })
 
   it('should handle non-ascii characters in image url', async () => {
-    const query = { w, q: 90, url: '/äöü.png' }
+    const query = { w, q: 90, url: '/äöüščří.png' }
     const res = await fetchViaHTTP(appPort, '/_next/image', query, {})
     expect(res.status).toBe(200)
   })

yarn.lock

@@ -4498,6 +4498,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/content-disposition@0.5.4":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@types/content-disposition/-/content-disposition-0.5.4.tgz#de48cf01c79c9f1560bcfd8ae43217ab028657f8"
+  integrity sha512-0mPF08jn9zYI0n0Q/Pnz7C4kThdSt+6LD4amsrYDDpgBfrVWa3TcCOxKX1zkGgYniGagRv8heN2cbh+CAn+uuQ==
+
 "@types/content-type@1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@types/content-type/-/content-type-1.1.3.tgz#3688bd77fc12f935548eef102a4e34c512b03a07"
@@ -7483,6 +7488,7 @@ contains-path@^0.1.0:
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
   dependencies:
     safe-buffer "5.1.2"