0

My server sends a locale cookie to the frontend which the backend determines from the client's accept language header. When I run the backend and frontend on localhost, I'm able to access the locale cookie in the javascript in document.cookie on the browser. It's also visible in chrome devtools (Application Tab-> Cookies).

But when I run the backend and frontend remotely over https, I cannot access the cookie in the javascript on the browser. Nor is it visible in devtools (Application Tab-> Cookies).

document.cookie // no locale cookie in javascript devtools console
"_ga=somevalue; _gid=somevalue; __stripe_mid=somevalue; __stripe_sid=somevalue"

But I can see the locale cookie in the response's Set-Cookie header and in chrome://settings/cookies/.

Response:

Set-Cookie: locale=%7B%22locale%22%3A%22en-US%22%2C%22countryCode%22%3A%22US%22%2C%22languageCode%22%3A%22en%22%7D; Max-Age=1617632; Path=/; Expires=Sat, 24 Apr 2021 07:34:03 GMT; Secure; SameSite=None

chrome://settings/cookies/:

Name: locale
Content : %7B%22locale%22%3A%22en-US%22%2C%22countryCode%22%3A%22US%22%2C%22languageCode%22%3A%22en%22%7D
Domain: mydomain.herokuapp.com
Path: /
Send for: Secure connections only
Accessible to script: Yes
Created: Monday, April 5, 2021 at 9:25:27 AM
Expires: Saturday, April 24, 2021 at 2:45:56 AM

I know you cannot access HTTP only cookies in javascript, but it's not an HTTP only cookie. It is set to secure but that shouldn't matter "Cookies with this attribute can still be read/modified with access to the client's hard disk, or from JavaScript if the HttpOnly cookie attribute is not set."src. It is also a cross origin cookie, my backend is running on mydomain.herokuapp.com and my frontend on mydomain.netlify.app.

What would cause this cookie to not be accessible by javascript?

Dashiell Rose Bark-Huss
  • 762
  • 5
  • 19
  • 1
    There's no such thing as cross-origin cookies. You can't set a cookie in a different domain. – Barmar Apr 05 '21 at 15:11
  • Thanks. I switched it to the same domain now, but different subdomains and it's still not working. Shouldn't it work across different subdomains? – Dashiell Rose Bark-Huss Apr 06 '21 at 15:47
  • You can only set cookies in the same domain or a parent domain. Not across subdomains. – Barmar Apr 06 '21 at 15:48
  • I was able to make it work with different subdomains by setting the domain to `mydomain.com` after reading this https://stackoverflow.com/questions/32354962/is-it-possible-to-share-cookies-between-subdomains – Dashiell Rose Bark-Huss Apr 06 '21 at 17:01

1 Answers1

0

The problem was the frontend can only read the cookie by javascript if the cookie is set to the domain of the frontend app. But the backend and frontend were on totally different domains. And since the backend was on a totally different domain, it cannot set on a cookie on the frontend domain. So I moved them to subdomains of the same domain- frontend.mydomain.com and backend.mydomain.com. Then I set the cookie to mydomain.com as described here.

    res.cookie('locale', JSON.stringify(localeObj), {
      maxAge: new Date() * 0.001 + 300,
      domain: 'mydomain.com',
      secure: true,
      sameSite:'none',
    });
Dashiell Rose Bark-Huss
  • 762
  • 5
  • 19