#TIL - Setting Cookies on the Client & Server

Jac Wynn / October 8, 2022

Problem

At my day job, I was tasked with converting a third party cookie into a first party cookie. The reason for this is because browsers are starting to get rid of third party cookies because of privacy reasons. This causes a problem because it will make it hard for marketers to track the customer whenener they are using the site. A workaround some marketing/personalization tools are using is to take that third party and convert it into a 1st party cookie. Techically, that means I need to take the cookie within the browser and set it in our backend application with a year long expiration so that personalized data can be collected effectively. So my logic sounded like this.

  • Check for the cookie that the 3rd party tool is setting.
  • If its there, create a new cookie with a different name and use the 3rd party cookie as the value. Also set the maxage property to a year.

Thats pretty much the gist of it. The key thing to remember is checking the request for the cookie, and then setting the cookie on the response. Request represent the browser/client and response represents the server. So when we set the cookie on the response, essentially we are setting it on the server and then sending it back to browser/client. From there, the the 3rd party tool that is being used will recognize the new cookie that was set as a 1st party cookie and data will continue to be collected.

What I learned

As I was going through this task, I had to learn more about request/response headers. This can be found in the Network tab within DevTools. I learned that the headers is basically meta information that is associated with the request/response. There is a whole list of properties that can be used and its probably best to have some knowledge about what each one does.

Built with Next.js & Chakra UI. Hosted on Vercel.