cookie is not shown in chrome developer tools

Question

i am using node/express server and angularjs as frontend. server sets the cookie and is shown correctly in the network response. but the cookie is not shown in the resource tab in the chrome developer tools. What are the possible reasons for the same.

Answer 1

If your frontend and backend are running on different ports they are considered different origins by the browser. Browsers have strict security policies regarding cross-origin requests, including the handling of cookies. If your server and frontend are not properly configured to handle CORS, the browser may prevent the cookie from being accessible to the frontend. Ensure that your frontend fetch requests include the credentials: 'include' option. This tells the browser to include cookies in cross-origin requests, allowing the server to set and access cookies properly.

const response = await fetch('http://localhost:4000/api/user/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ username, password }),
  credentials: 'include'
});

Answer 2

If you're certain that the cookie is set and is being sent to the server, but you cannot always see it in the cookies pane in the developer tools, check that both the host and the path match the current URL in the browser. One option which may not always be suitable, is to explicitly set Path=/ in the cookie, to match all URLs.

Details

When you're browsing your site with the developer console open, the cookies pane will show only the cookies that match the current host and path in the URL. For example, if you set your cookie for subdomain.example.com but are currently at example.com, the cookie for subdomain.example.com will not appear, even if it is currently set. Navigate to subdomain.example.com and you should now see it in the console.

Likewise, say your Node application at example.com/api did not set the Path in the cookie and it was automatically set to Path=/api. This will only be visible on the console, when and if you browse to a page that starts with example.com/api/. Your JavaScript code in the same page, sending requests to example.com/api will naturally include this cookie, even though it's not visible on the console, due to the path in the URL being different.

You can see the domain and path for all cookies on the site information pop-up. This is typically done by clicking the icon to the left of the URL, e.g. a padlock if it's HTTPS. Under the cookies section, you can see a box like the picture below for Opera, similar to other browsers.

Note the path and domain for the selected cookie.

Potential Solution

Explicitly set Path=/ in the cookie. According to the Set-Cookie MDN documentation for Path=<path-value>:

Indicates the path that must exist in the requested URL for the browser to send the Cookie header.

The forward slash (/) character is interpreted as a directory separator, and subdirectories are matched as well. For example, for Path=/docs,

• the request paths /docs, /docs/, /docs/Web/, and /docs/Web/HTTP will all match.
• the request paths /, /docsets, /fr/docs will not match.

What is implicit in the above quote, is that using Path=/ will match all URLs in the given domain. Before taking this approach, you should be certain that it suits all scenarios in your particular use cases.

Answer 3

It might be that your cookie is the HTTPOnly authentication cookie. Those are not shown in chrome unless you're browsing the localhost.

Answer 4

Below are 2 potential reasons for not actually setting a valid cookie:

1. Invalid expiration time - the cookie expires at a time in the past from the browser's perspective
2. Invalid domain for the cookie. Let's say you serve the page from example.com, but your server tries to set the cookie for domain google.com

There could also be a bug in the chrome dev tools to not show your cookies, but you can check that easily by issuing another request to the server and see what cookies are actually received by the server.