DEV Community

David
David

Posted on

Chrome removing third party cookies

I was working on authentication and when I inspected my cookie in my client and I saw this warning from google chrome [insert image here] that 3rd party cookies are been deprecated and will be blocked in the future. They are working to stop 3rd party tracking via cookies google blog thereby creating tracking protection.In my case I was hosting the backend and the frontend on separate servers. The frontend is hosted on vercel, while the backend on render, so when the backend sends the cookie to the client since they are not on the same server hence different domain an article explaining, the cookie will be treated as a 3rd party cookie.

Cookie prefix

The solution I implemented was from reading mdn documentation mdn_doc. I added a prefix __Host- to the cookie name. __Host- is called a cookie prefix. There are two types; __Host- and __Secure-.
a. __Host- means that the cookie is domain-locked, when you set a cookie with this header prefix it is accepted if it's marked with the Secrue attribute, was sent from a secure origin https, does not include a Domain attribute and has the Path set to '/'.

So my code looks like this now. After modifying my cookie options, the warning did not show again because.

const cookieOptions = {
    maxAge: 60 * 60 * 24 * 30 * 1000, // 30 days
    httpOnly: true, // prevents client scripts from accessing the cookie
    secure: process.env.NODE_ENV === "production", // the cookie should be sent over secure https connection
    sameSite: process.env.NODE_ENV === "development" ? "Lax" : "None",
    path: "/",
}

res.cookie(process.env.NODE_ENV === "development"
? "sage_warehouse_token":"__Host-sage_warehouse_token",'refreshToken',cookieOptions)
.header("Authorization", 'accessToken')
Enter fullscreen mode Exit fullscreen mode

If anyone encountered this same issue I would love to know how they resolved it, I am learning backend development with express.js, which is fun. I am currently working on an e-commerce application to solidify my knowledge as I learn new concepts.

If you are interested in learning backend development and you don't want to do it alone you can checkout HNG where you will participate in tasks with peers and ask for help from mentors as you go along in your tech journey, they also have a premium version where you can earn a certificate and it also comes with some perks.

Top comments (0)