How to get/set multiple 'Set-Cookie' Headers using Fetch API?

Question

As you might know, RFC 6265 indicates that it is allowed to have multiple headers with the Set-Cookie name.

However, Fetch API doesn't allow to do that because all the methods exposed by its Headers interface (including get(), set(), append(), entries() and all the rest) have been implemented to merge the values of all the headers with the same name into a single header separated by commas.

For example, if we do this:

var headers = new Headers();
headers.append('content-type', 'text/plain');
headers.append('set-cookie', 'test1=v; Max-Age=0');
headers.append('set-cookie', 'test2=v; Max-Age=0');
headers.append('set-cookie', 'test3=v; Max-Age=0');

and then we try to read the set-cookie values using get('set-cookie'), or by iterating the headers variable using entries(), we get this:

'set-cookie' : test1=v; Max-Age=0, test2=v; Max-Age=0, test3=v; Max-Age=0

Please notice that the same wrong behaviour also happens if we try to read or manipulate an existing response object having multiple headers with the same name (i.e. created by other frameworks that arguably support such allowed behavior): in other words, it seems like the Fetch API is completely unable to properly deal with such scenario.

Now, while this behavior is desired for some headers, such as Accept, the Set-Cookie header is not parsed correctly by most browsers (including Chrome and Firefox), thus resulting in cookies not being correctly set.

Is that a known bug? If that's the case, is there an usable workaround that can be used to overcome this?

Fogarty

I believe this is the only HTTP header for which it's not allowed to be merged like this. So I'm not entirely shocked that this case is not considered. Do you get separate entries when you iterate over the headers (with .entries()) – Favourite

@Favourite nope, as I explained above, all those methods will return the values merged as one, regardless of what the response object actually contains. To put it in other words, you always get a single (merged) Set-Cookie entry. – Fogarty

Set-Cookie is sent by the server, not the client. Why do you need it in the Fetch API? – Nannienanning

@Nannienanning I've developed a CORS proxy that forwards requests to upstream and responses to clients, therefore I have to deal with HTTP responses in various ways. If you're interested, PM me and I'll send the details, however trust me - I definitely need this answer. – Fogarty

If you want to try to get the bounty, here's the code I need to fix/workaround (line 240 and below). Reading the comments should be enough to understand the issue I'm having and what I would like to obtain. – Fogarty

Not sure if you still have this issue. But I am able to use headers.append to set multiple Set-Cookies in Chrome and Firefox from inside a Cloudflare Worker. Seems this got fixed somewhere along the way – Downatheel

Answer 1

The method getSetCookie() was added to Fetch API interface in order to address this issue. This method provides the ability to get the list of values for all Set-Cookie headers.

Lupulin

Answer 2

This is a known "issue" with the standard. It's actually the first note of the Fetch API standard in the Headers section:

Unlike a header list, a Headers object cannot represent more than one Set-Cookie header. In a way this is problematic as unlike all other headers Set-Cookie headers cannot be combined, but since Set-Cookie headers are not exposed to client-side JavaScript this is deemed an acceptable compromise. Implementations could chose the more efficient Headers object representation even for a header list, as long as they also support an associated data structure for Set-Cookie headers.

You can read more or even raise your own issue in the spec's repo.
There are already a few issues discussing the Set-Cookie case at length though:

• https://github.com/whatwg/fetch/issues/973
• https://github.com/whatwg/fetch/issues/506
• https://github.com/whatwg/fetch/issues/189
• https://lists.w3.org/Archives/Public/www-archive/2016Jan/thread.html

You mentioned using workarounds, but this really depends on your use-case.
The note mentions using a secondary structure to handle those.
If you really want to store those cookies in a Headers object, you could add custom headers to store them:

new Headers([
  ['X-MyOwn-Set-Cookie-1', 'cookie1=value1'],
  ['X-MyOwn-Set-Cookie-2', 'cookie2=value2']
]);

Obviously, this is not an acceptable solution for the standard, but maybe your practical considerations might be in line with such a compromise.

---

As pointed out by this note and @Barmar in the comments, you usually use Set-Cookie from the server, not the front-end.
For instance, there's no problem setting multiple Set-Cookie with express:

test.js

const express = require('express');

const app = express();

const cookies = [
  { key: 'cookie1', value: 'value1' },
  { key: 'cookie2', value: 'value2' },
];

app.get('*', (req, res) => {
  console.log(req.url);
  for (const { key, value } of cookies) {
    res.cookie(key, value, { expires: new Date(Date.now() + 1000 * 60), httpOnly: true });
  }
  res.status(200).send('Success');
});

app.listen(3000, () => console.log(`Listening on http://localhost:3000/`));

Terminal 1

$ node test.js
Listening on http://localhost:3000/

Terminal 2

$ curl -v http://localhost:3000/
[...]
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Set-Cookie: cookie1=value1; Path=/; Expires=Tue, 04 Aug 2020 19:45:53 GMT; HttpOnly
< Set-Cookie: cookie2=value2; Path=/; Expires=Tue, 04 Aug 2020 19:45:53 GMT; HttpOnly
< Content-Type: text/html; charset=utf-8
[...]

Disillusion

Thanks for the explanation, it definitely added something to what I've already digged out of Google. As you can see by reading the answer I gave to @Barman, I need to find a suitable workaround that could be accepted by the most common browsers (Chrome, Firefox, IE, Edge, Safari) because I'm working on a "serverless" CORS proxy (hosted within a Cloudflare Worker) that aims to forward HTTP requests to upstream and HTTP responses to clients - hence the need to "reconstruct" a valid header list with multiple Set-Cookie instances to feed the clients in a proper way. – Fogarty

If you want to try to get the bounty, here's the code I need to fix/workaround (line 240 and below). Reading the comments should be enough to understand the issue I'm having and what I would like to obtain. – Fogarty