reactjsnode.jscookiescross-domainfastify

Can't set a cookie with fastify and cross domain


I have two domains registered and I created wild card certs for my backend and frontend. Both apps are hosted on my machine locally and working fine. The domains get redirected via an entry in /etc/hosts to 127.0.0.1 (still domain in url bar)

https://api.test1.de
https://app.test2.de

In my backend I covered everything regarding CORS and Cookies (httpOnly etc.) with the following code:

fastify.register(cors, {
  origin: [
    "https://app.test2.de"
  ],
  credentials: true,
})

export const setCookie = async (req: FastifyRequest, rep: FastifyReply) => {
  rep.setCookie('myCookie', 'value', {
    path: '/',
    expires: new Date(Date.now() + 24 * 60 * 60 * 1000 * 365),
    secure: true,
    httpOnly: true,
    sameSite: "none",
    domain: 'api.test1.de'
  })
  return rep.send({ message: 'Cookie set successfully!' })
}

And in my frontend the request is sent like this:

export const setCookie = async () => {
  try {
    const response = await axios.get('https://api.test1.de/setcookie',{
      withCredentials: true,
      headers: {
        'Content-Type': 'application/json',
      },
    })
    return response.data
  } catch (error) {
    throw error
  }
}

It is working in Chrome and Firefox but not in Edge and Safari.
Does anyone know why? Is there a mistake in my code?

Frontend: React + Vite
Backend: Node + Fastify

PS: In Edge it says something like: "This attempt to set a cookie via a Set-Cookie header was blocked due to user preferences". But Edge is freshly installed and all settings are the default ones.


Solution

  • I found a workaround for my case.

    The user opens the frontend (test1.de) and the backend (api.test1.de) is setting a cookie somehow (button click for example). The user opens then the frontend of the second page (test2.de). This page opens a new tab or window (via button click) with the url of a "widget" (if you like to call it that). The widget is hosted on widget.test1.de (for example) and has access to the cookie. With postMessage the cookie from the widget tab/window can then be transmitted to the page test2.de.

    Security-wise there is a lot to worry about and a lot potential for attackers. But for my testing purposes it worked fine.