Comments (12)
Hey, @aleehedl. Thanks for raising this.
Just as with the native Headers
, the .set()
method overrides any given cookie. That's why you're only getting the latest value of "set-cookie" when calling .raw()
.
If you wish to set multiple headers, use .append()
:
const { Headers } = require("headers-polyfill")
let h = new Headers()
h.append('set-cookie', 'foo=bar')
h.append('set-cookie', 'bar=baz')
h.get('set-cookie') // "foo=bar, bar=baz"
This is the same behavior as the native Headers
have, so I believe the library complies well to the specification in this regard.
from headers-polyfill.
Thanks for the response @kettanaito.
The comma-separated value isn't usable with cookies, because browsers don't accept multiple cookies in a single set-cookie
header. See the link from MDN. There should be a way for adding multiple headers with the same name (multiple 'Set-Cookie' headers). So that in the response the cookies would be in the following form:
Response headers:
Connection: keep-alive
Content-Type: text/plain
Set-Cookie: a=1
Set-Cookie: b=2
from headers-polyfill.
I don't think the issue you're describing is directly related to the Headers
polyfill library. In regards to the Set-Cookie
behavior, it acts just as the Fetch API Headers
does: multiple values of the same header are joined into a comma-separated string. You can try it out in your browser's console:
let h = new Headers()
h.append('Set-Cookie', 'foo=bar')
h.append('Set-Cookie', 'bar=baz')
h.get('Set-Cookie')
I may not understand the issue fully here. Could you please elaborate more on what exactly you're trying to do, in what context, etc.? If a reproduction repository or a sandbox can help you share that info, please create that.
from headers-polyfill.
Here's a simple repo:
https://github.com/aleehedl/msw-cookies
There are two servers you can start: server.ts
using msw/http-middleware which cannot do what I want. And these node-server.ts
which sets two Set-Cookie
headers correctly.
And a possbily running codesandbox:
https://codesandbox.io/s/relaxed-vaughan-fuo4gq?file=/index.js
Live mode: https://fuo4gq.sse.codesandbox.io/
The main thing is: Browser doesn't set two cookies when the values come in a single Set-Cookie header.
from headers-polyfill.
Thank you for preparing those!
So it seems like an issue with how MSW handles cookies, not the Headers
polyfill issue. The Headers function as expected, keeping all headers in a name: value(s)
pairs. I think somewhere during the serialization of the mocked cookies is when the issue is happening.
The main thing is: Browser doesn't set two cookies when the values come in a single Set-Cookie header.
About that. In the browser, you cannot set Set-Cookie
headers on a Response
instance. That's a security violation and it's forbidden. You can try it out yourself:
const res = new Response(null, { headers: { 'Set-Cookie': 'foo=bar, bar=baz' } })
res.headers.get('Set-Cookie')
To account for that, MSW reads your mocked cookies and forwards them onto the document
directly, writing them as document.cookie
string (implementation). It looks like we still set the Set-Cookie
header so you can inspect it in the Network but it won't be available in the response you receive. That's correct, the Set-Cookie
isn't available on actual responses either. It's the browser that reads that cookie and forwards it onto the document, which MSW does for the browser in case of mocked responses.
from headers-polyfill.
Thank you for preparing those!
So it seems like an issue with how MSW handles cookies, not the Headers
polyfill issue. The Headers function as expected, keeping all headers in a name: value(s)
pairs. I think somewhere during the serialization of the mocked cookies is when the issue is happening.
The main thing is: Browser doesn't set two cookies when the values come in a single Set-Cookie header.
About that. In the browser, you cannot set Set-Cookie
headers on a Response
instance. That's a security violation and it's forbidden. You can try it out yourself:
const res = new Response(null, { headers: { 'Set-Cookie': 'foo=bar, bar=baz' } })
res.headers.get('Set-Cookie')
To account for that, MSW reads your mocked cookies and forwards them onto the document
directly, writing them as document.cookie
string (implementation). It looks like we still set the Set-Cookie
header so you can inspect it in the Network but it won't be available in the response you receive. That's correct, the Set-Cookie
isn't available on actual responses either. It's the browser that reads that cookie and forwards it onto the document, which MSW does for the browser in case of mocked responses.
from headers-polyfill.
Oh, I see what may be off. In MSW, the ctx.cookie
transformer is using headers.set('Set-Cookie', value)
. That's the same issue as we've talked about before: using .set()
will override any previously existing header value instead of joining header values.
I will create an issue in the MSW repository where we can follow up.
from headers-polyfill.
Opened in mswjs/msw#1290.
from headers-polyfill.
https://developer.mozilla.org/en-US/docs/Web/API/Headers/getSetCookie
This function may help solve this problem.
from headers-polyfill.
Thanks for the suggestion, @gucong3000. However, it's also mentioned the first thing in the Examples that response.headers
are explicitly stripped by the browser for security considerations (otherwise the getSetCookie()
API would conflict with the HttpOnly
nature of cookies).
You can use the getSetCookie()
API only on the Headers
instance. That's a limitation that we cannot rely on in MSW, so this API cannot be used.
from headers-polyfill.
@kettanaito Thanks for your work. I'm using this package under node.js. Great work.
Headers
are used not only for response, but also for request.
https://developer.mozilla.org/en-US/docs/Web/API/Request/headers
from headers-polyfill.
Thanks for your kind words!
Yeah, Headers can be used to declare any headers. In the context of this issue, accessing the response headers was a pre-requisite so I discussed it respectively.
from headers-polyfill.
Related Issues (20)
- License? HOT 2
- Keep private properties under symbols HOT 1
- Invalid Headers.js syntax ? HOT 8
- Package subpath './lib' is not defined by "exports" HOT 3
- Missing "./lib" export in "headers-polyfill" package HOT 2
- Version 3.1.0 => Error: Package subpath './lib' is not defined by "exports" HOT 6
- Error: Package path ./lib is not exported from package HOT 1
- There's no lib folder which is called from /esm/package.json HOT 1
- Webpack compilation error after update HOT 4
- The module does not support ESM correctly HOT 1
- "flattenHeadersObject" joins multi-value headers but semicolon, not comma HOT 1
- Package subpath './lib' is not defined by "exports" HOT 13
- Package subpath './lib' is not defined by "exports" HOT 3
- Cypress: Unexpected token on nullish coalescence operator HOT 12
- Nullish coalescing operator (??) causing webpack build to fail HOT 2
- 3.2.0 does not handle Set-Cookie as expected HOT 2
- Can't import the named export 'splitCookiesString' HOT 7
- Move custom Headers methods to transformer functions HOT 1
- response3.headers.all is not a function HOT 4
- Losing headers when using Undici in latest Node 18.x HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from headers-polyfill.