SameSite Cookie Explained

If you are a web developer or a web user, you have probably encountered cookies before. Cookies are small pieces of data that a web server sends to a web browser, and the browser stores them and sends them back with subsequent requests to the same server. Cookies are used for various purposes, such as session management, personalization, tracking, and security. In this article, we will focus on one particular aspect of cookie security: the SameSite attribute. We will explain what SameSite cookie is, why it is important, how it works, how to use it, and how to handle the recent changes in Chrome browser regarding SameSite cookie.

A cookie is a key-value pair that can have additional attributes that control when and where the cookie is used. For example, a cookie can have an expiration date or time period after which the cookie should not be sent, or a domain and path to limit where the cookie is sent. A simple cookie can be set by the server using the Set-Cookie header like this:

Set-Cookie: <cookie-name>=<cookie-value>

This instructs the browser to store a cookie with the given name and value.

Why use cookies?

Cookies are mainly used for three purposes:

Session management: Cookies can store information such as user ID, login status, shopping cart items, game scores, or anything else that the server needs to remember for each user. This way, the server can provide a consistent and personalized experience for each user across multiple requests and pages.
Personalization: Cookies can store user preferences, themes, settings, language, location, or other information that can be used to customize the web page or application according to the user’s choices and needs.
Tracking: Cookies can store unique identifiers or other data that can be used to record and analyze user behavior, such as browsing history, clicks, conversions, interactions, or other metrics. This can be used for analytics, advertising, marketing, or other purposes.

What are the risks of cookies?

Cookies are also associated with some security and privacy risks that need to be addressed by web developers and users. Some of these risks are:

Cross-site request forgery (CSRF)

This is a type of attack where an attacker tricks a user into performing an unwanted action on a web site where they are already logged in. For example, an attacker can send an email with a link that looks like this:

https://bank.example/transfer?amount=1000&to=attacker

If the user clicks on this link while they are logged in to their bank account, their browser will send a request to transfer $1000 to the attacker’s account along with their cookies that authenticate them as a valid user. The bank server will not be able to distinguish this request from a legitimate one and will perform the transfer without the user’s consent or knowledge.

Cross-site scripting (XSS)

This is a type of attack where an attacker injects malicious code into a web page that is then executed by the user’s browser. For example, an attacker can insert a script tag that looks like this:

<script>document.cookie = "session=attacker"</script>

If this script tag is embedded in a web page that the user visits, their browser will execute the script and overwrite their session cookie with the attacker’s value. This way, the attacker can hijack the user’s session and access their account or data.

Third-party cookies

These are cookies that are set by a domain other than the one that the user is visiting. For example, if the user visits a news site that has ads from an ad network, the ad network can set cookies on the user’s browser that can be used to track them across different sites. This can raise privacy concerns for some users who do not want to be tracked or targeted by third-party advertisers or trackers.

SameSite is a cookie attribute that prevents cookies from being included in cross-site requests. It tells browsers when and how to send cookies in first- party or third-party situations. It can be set to Lax, Strict, or None, depending on the level of protection and functionality needed. The default value of SameSite changed in 2019 to Lax, which means cookies are sent only in a first-party context and with HTTP GET requests. To allow cross-site cookie use, SameSite=None must be used. SameSite cookie is important because it can help prevent CSRF attacks by limiting when cookies are sent to the server.

What are the different values of SameSite attribute?

The SameSite attribute can have three possible values: Lax, Strict, or None. Each value has different implications for when and how cookies are sent to the server.

Lax

This is the default value for most browsers since 2019. It means that cookies are sent only in a first-party context and with HTTP GET requests. This allows cookies to be sent with top-level navigations, such as clicking on a link or typing a URL in the address bar, but not with other types of cross-site requests, such as forms, images, scripts, or iframes. This provides a balance between security and usability for most scenarios.

Strict

This means that cookies are sent only in a first-party context, regardless of the request method. This provides the highest level of protection against CSRF attacks, but also limits some functionality that relies on cross-site requests, such as social media buttons or embedded content. This is suitable for cookies that are related to sensitive actions or data, such as changing a password or making a purchase.

None

This means that cookies are sent in both first-party and third-party contexts, regardless of the request method. This provides no protection against CSRF attacks, but also allows full functionality for cross-site requests. This is suitable for cookies that are not related to any stateful or sensitive information, such as analytics or advertising. However, to use this value, the cookie must also have the Secure attribute, which means it can only be sent over HTTPS connections.

SameSite cookie prevents CSRF attacks by restricting when cookies are sent to the server based on the origin of the request. For example, if the bank site sets a session cookie like this:

Set-Cookie: session=user123; SameSite=Lax

This means that the cookie will only be sent with requests that originate from the bank site or with top-level navigations from other sites using HTTP GET method. If an attacker tries to trick a user into clicking on a link like this:

https://bank.example/transfer?amount=1000&to=attacker

The browser will not send the session cookie with this request because it is a cross-site request using HTTP GET method that is not a top-level navigation. Therefore, the bank server will not recognize the user as logged in and will not perform the transfer.

To set and use SameSite cookie in your web application, you need to specify the SameSite attribute along with other attributes when setting cookies using the Set-Cookie header. For example:

Set-Cookie: <cookie-name>=<cookie-value>; SameSite=<value>

You can also use different values for different cookies depending on your needs. For example, you can use SameSite=Strict for your session cookie and SameSite=None for your analytics cookie. However, you should always use the Secure attribute for any cookie that has SameSite=None to ensure that it is only sent over HTTPS connections. For example:

Set-Cookie: session=user123; SameSite=Strict; Secure


Set-Cookie: analytics=abc123; SameSite=None; Secure

To use SameSite cookie in your web application, you need to make sure that your code and logic are compatible with the different values of the SameSite attribute. For example, if you use SameSite=Strict for your session cookie, you need to ensure that your web application does not rely on cross-site requests for any functionality that requires authentication, such as social media buttons or embedded content. If you use SameSite=None for your analytics cookie, you need to ensure that your web application does not store any sensitive or stateful information in that cookie, such as user ID or login status.

Conclusion

SameSite cookie is a powerful feature that can help you improve the security and privacy of your web application by preventing CSRF attacks and limiting cross-site tracking. However, it also requires some changes and adjustments in your code and configuration to ensure compatibility and functionality with different browsers and scenarios. By following the steps outlined in this article, you can set and use SameSite cookie effectively in your web application and handle the recent changes in Chrome browser smoothly.