how to get a cookie for with the same name for both `.domain.com` and `domain.com` js-cookie

Question

I'm using the js-cookie library library and I can't figure out how to get the a cookie with a domain value of .domain.com if a cookie with same name exists for domain.com. I've looked at the source and the get function seems to create an object indexed by the name so it will be overridden if two cookies with the same name but different domains exist.

an example:


import Cookie from 'js-cookie'

// one of these two cookies will be unavailable via Cookie.get
Cookie.set('myCookie', 'myValue1', {domain: '.domain.com'})
Cookie.set('myCookie', 'myValue2', {domain: 'domain.com'})

I thought maybe the withAttributes function could help but I think that changes attributes when creating a cookie. I'm not totally sure though the docs are sparse there and i can't figure out the code.

score 1 · Accepted Answer · answered Jul 27 '23 at 20:55

1

You can't have multiple different cookies with the same name being in effect at the same time. The docs say

Note: It is not possible to read a particular cookie by passing one of the cookie attributes (which may or may not have been used when writing the cookie in question):
Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect
The cookie with the name foo will only be available on .get() if it's visible from where the code is called; the domain and/or path attribute will not have an effect when reading.

This is not a limitation of the library, it's the browser that makes only one cookie visible.

answered Jul 27 '23 at 20:55

Bergi

630,263
148
957
1,375

but when I look in the dev tools storage section I can see both of the cookies for domain.com and .domain.com with the same name – gnarlyninja Jul 27 '23 at 20:56
1

Sure, that's what the browser stores internally. But only one of these cookies applies to the current page, and only that will be exposed to the JS via `document.cookie`. Similarly, the devtools also show the http-only cookies that the browser stores, that doesn't mean they can be queried by `Cookies.get`. – Bergi Jul 27 '23 at 21:03
1

You might be able to read the current value of the first cookie, delete it for the currently applicable domain, then read the other one that is still stored. But really you shouldn't need to be doing this - what is your use case? – Bergi Jul 27 '23 at 21:05
I'm trying to migrate from using the cookies with `domain.com` as their domain value to `.domain.com` so that the data can be read/written by our different sub domains. But the old cookies are mucking things up. – gnarlyninja Jul 27 '23 at 21:45
Do you know how it would decide which one is available to js if both are set? – gnarlyninja Jul 27 '23 at 21:46
1

The more specific one, i.e. the one with the longer suffix match - same as the one that is sent in the http header. – Bergi Jul 28 '23 at 01:31
1

"*I'm trying to migrate from using the cookies with `domain.com` as their domain value to `.domain.com`*" - according to [these answers](https://stackoverflow.com/q/1062963/1048572), those two values are equivalent as `domain` cookie attributes. Only if you were to not set the attribute at all, it would create a cookie that doesn't apply to subdomains. But I doubt you can distinguish these cases when reading the cookie. – Bergi Jul 28 '23 at 01:36
ok. I that's just the information I needed thanks! I knew almost nothing about cookies about two weeks ago so I've been on quite the learning curve here – gnarlyninja Jul 28 '23 at 02:24
oh right the reason I'm using `.domain.com` is that if i have a server on `anysub.domain.com` then it can't write cookies with a domain value of `domain.com` so if you want read/write for the subdomain and regular domain then its better to prefix with a period. – gnarlyninja Jul 28 '23 at 02:47

score -1 · Answer 2 · answered Jul 27 '23 at 19:56

you can retrieve the cookie by name and domain like so

import Cookie from 'js-cookie';

function getCookieByDomain(name, domain) {
  const cookies = Cookie.get();
  const matchingCookies = Object.entries(cookies).filter(([cookieName]) => cookieName === name);

  // Search for a cookie with the specified domain
  const cookieWithDomain = matchingCookies.find(([cookieName, cookieValue]) => {
    const cookieOptions = Cookie.getJSON(cookieName, { raw: true });
    return cookieOptions.domain === domain;
  });

  if (cookieWithDomain) {
    const [cookieName, cookieValue] = cookieWithDomain;
    return { [cookieName]: cookieValue };
  }

  return null; // Cookie not found with the specified domain
}

// Usage:
const cookieForDomain = getCookieByDomain('myCookie', '.domain.com');
console.log(cookieForDomain); // Outputs: { myCookie: 'myValue1' } if it exists, otherwise null

I don't think this will work if there are two cookies that have the same name but different domains because Cookie.get will overwrite it with the last value it saw for that name — gnarlyninja, Jul 27 '23 at 20:13

how to get a cookie for with the same name for both `.domain.com` and `domain.com` js-cookie

2 Answers2