What is the difference between cookies in the response headers and the storage cookies?

What is the difference between an HTTP response cookie (specifically in the Firefox console window) and the cookies in Storage? I'm attempting to return a CSRF token as a cookie from express to an angular frontend, like so:

const options = {
httpOnly: true,
secure: false, // set to false for local testing
sameSite: "lax",
// maxAge: oneDayToSeconds,
domain: 'localhost'
};
return res.status(200).cookie('XSRF-TOKEN', csrfToken, options).end();


I'd expect this to store the cookie in the browser storage, here:



but nothing gets stored. If I check the response headers section and the cookies section for the response, I can see the following:



and the cookies section:



I can see the token.

What is the difference between the two cookie sections and shouldn't this approach automatically store the cookie value?

Thanks

Continue reading...