1643979 - Fetch headers with same lowercase text are not merged properly when one header undefined

Status: UNCONFIRMED

(DevTools :: Netmonitor, defect, P2)

Description

[southpolesteve]

Attachment: Annotation 2020-06-06 210350.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

Steps to reproduce:

1. Go to any webpage. In my case, I used firefox.com
2. Open Dev tools
3. Run this code: fetch("/", { headers: { Authorization: "foo", authorization: undefined }})
4. Check the network requests tab
5. See that the header for the request is listed as:

Authorization: undefined

Actual results:

Firefox did not combine these two headers. It only sent the header value with literal string "undefined"

Expected results:

I should see the authorization header sent as:

foo, undefined.

Chrome does this correctly. Screenshot attached showing the same request in both browsers

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Hubert Boma Manilla (:bomsy)]

Thanks for the report!

I can reproduce.

I see in chrome that
fetch("/", { headers: { Authorization: "foo", authorization: bar }}) shows Authorization: foo, bar but
fetch("/", { headers: { Authorization: "foo", Authorization: bar }}) shows Authorization: bar

In Firefox
fetch("/", { headers: { Authorization: "foo", authorization: bar }}) shows Authorization: bar and
fetch("/", { headers: { Authorization: "foo", Authorization: bar }}) also shows Authorization: bar

i'm wondering if the correct output should probably be
fetch("/", { headers: { Authorization: "foo", authorization: bar }}) should show Authorization: foo, bar
fetch("/", { headers: { Authorization: "foo", Authorization: bar }}) should show Authorization: foo, bar

Honza what do you think?

Comment 3

[:Harald Kirschner :digitarald]

Comma-separated list is what the spec says, your proposal is correct:

https://www.w3.org/Protocols/rfc2616/rfc2616-sec4.html#sec4.2

Multiple message-header fields with the same field-name MAY be present in a message if and only if the entire field-value for that header field is defined as a comma-separated list.

Comment 4

[Hubert Boma Manilla (:bomsy)]

Thanks Harald!

Comment 5

[Ben D (:rockingskier)]

This seems to be a special case for "Authorization", other headers appear to work as expected.

It's not a display issue but the fact that fetch itself only sends the one header value for authorization.

I set up a tiny express app and it was receiving the same as the devtools netmonitor displays aka one authorization value.

fetch('/auth', {
  headers: {
    Accept: "*/*",
    accept: "text/*",
    'Accept-Language': "en-GB",
    'accept-language': "en-US",
    Authorization: 'foo',
    authorization: undefined,
    NotAuthorization: 'foo',
    notauthorization: undefined
  }
});

// Express headers (subset)

{
	"accept": "*/*, text/*",
	"accept-language": "en-GB, en-US",
	"authorization": "undefined",
	"notauthorization": "foo, undefined",
}

// Devtools displays headers (subset)

{
	"accept": "*/*, text/*",
	"accept-language": "en-GB, en-US",
	"authorization": "undefined",
	"notauthorization": "foo, undefined",
}

That's almost certainly as far as I can go but it might help someone else have a debug.