Will a cookie with the HttpOnly and Secure attributes be sent using Fetch API in case {credentials: "include"} is present in options?
fetch("https://some.url", {
mode: "same-origin",
credentials: "include",
redirect: "manual"
})
Will a cookie with the HttpOnly and Secure attributes be sent using Fetch API in case {credentials: "include"} is present in options?
fetch("https://some.url", {
mode: "same-origin",
credentials: "include",
redirect: "manual"
})
There are several conditions that have to be met, but yes they are.
- Client initializes asynchronously a fetch request with
credentials: 'include'
. See [here][1] for more details.- To do CORS, server response header must contain
Access-Control-Allow-Origin
explicitly set to a domain, could be different from the server domain. For example, in a Single-Page-App architecture, your frontend site is temporarily hosted at localhost:3000 and your backend server hosted at localhost:8000, then the header should beAccess-Control-Allow-Origin: http://localhost:3000
. See [here][2] and [here][3].- To allow client to process cookies, which is obviously a sensitive resource, server response header must further contain
Access-Control-Allow-Credentials: true
. See [here][4]. Note that this enforces a non-wildcard setting forAccess-Control-Allow-Origin
. See [here][6] - that's why in point 2 above, it has to be explicitly set to something likehttp://localhost:3000
rather than*
- When server sets the cookie, it has to include
SameSite=None; Secure; HttpOnly
. So overall something likeSet-Cookie: session_id=12345; SameSite=None; Secure; HttpOnly
.SameSite
seems to be a relatively [new requirement][5] in latest browsers, and must be used withSecure
together whenSameSite
is set toNone
.- With regard to
HttpOnly
, I haven't found relevant materials, but in my experiment, omitting it caused the browser to ignore theSet-Cookie
header.- Further requests to the backend server also must have
credentials: 'include'
set.