500 error when content-type header is not formatted correctly

[jkjustjoshing]

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

14.16.1

What browser are you using?

Chrome

What operating system are you using?

Codesandbox

How are you deploying your application?

next start

Describe the Bug

When a request comes in to a pages/api endpoint, and the content-type header is not correctly formed, my API code does not run, and the request returns a 500 error.

I noticed this issue because I'm getting 500 responses for calls with a trailing semicolon in my production logs "content-type": "application/x-www-form-urlencoded;"

This does not happen for getServerSideProps calls.

content-type values that reach my code (and return 200 in the below reproduction):

• text/plain
• text/abcdefg
• abc/defg
• abc/___
• abc/---

content-type values that do not reach my code and always return a 500 error:

• text (anything without a slash)
• /text and text/ (slash not in middle)
• text/plain; and text;/plain (trailing or containing semicolon)

Expected Behavior

I would expect getServerSideProps and API routes to handle headers the same way. I expect the user to not be able to trigger a 500 error. I would expect either a) Next.js to return a 4xx status code, or b) Let my code handle the request as it wishes, treating any of these failing content-types the same way it currently treats the content-type of abc/def or how getServerSideProps handles it.

I would much prefer option (b).

To Reproduce

https://codesandbox.io/s/nifty-tharp-6w90w?file=/pages/api/test.js:94-100
Use Postman (or similar app) to hit the codesandbox /api/test route with a content-type: text/plain; header (note the trailing semicolon)

Any API endpoint can reproduce, for example:

export default async (req, res) => {
  res.setHeader("Content-Type", "text/plain");
  res.end("OK");
};

[timneutkens]

Just had a look into this. To reproduce I used:

fetch('http://localhost:3000/api/test', {headers: { 'content-type': 'text/abcdefg' }, method: 'POST', body: 'a=1'})

The error that comes out is:

TypeError: invalid parameter format
    at parse (/Users/timneutkens/projects/my-app/node_modules/next/dist/compiled/content-type/index.js:1:1479)
    at parseBody (/Users/timneutkens/projects/my-app/node_modules/next/dist/next-server/server/api-utils.js:11:80)
    at apiResolver (/Users/timneutkens/projects/my-app/node_modules/next/dist/next-server/server/api-utils.js:6:48)
    at DevServer.handleApiRequest (/Users/timneutkens/projects/my-app/node_modules/next/dist/next-server/server/next-server.js:66:492)
    at async Object.fn (/Users/timneutkens/projects/my-app/node_modules/next/dist/next-server/server/next-server.js:58:580)
    at async Router.execute (/Users/timneutkens/projects/my-app/node_modules/next/dist/next-server/server/router.js:25:67)
    at async DevServer.run (/Users/timneutkens/projects/my-app/node_modules/next/dist/next-server/server/next-server.js:68:1042)
    at async DevServer.handleRequest (/Users/timneutkens/projects/my-app/node_modules/next/dist/next-server/server/next-server.js:32:504)

Specifically this line:

next.js/packages/next/next-server/server/api-utils.ts

Line 117 in 079c629

const contentType = parse(req.headers['content-type'] || 'text/plain')

causes an error when invalid content-types are provided. getServerSideProps does not have automatic body parsing currently which is why it does not error for that case.

In this case I think you could change the behavior to be text/plain when the content type could not be parsed.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.