@jialin.huang
FRONT-ENDBACK-ENDNETWORK, HTTPOS, COMPUTERCLOUD, AWS, Docker
To live is to risk it all Otherwise you are just an inert chunk of randomly assembled molecules drifting wherever the Universe blows you

© 2024 jialin00.com

Original content since 2022

back
RSS

HTTP Headers: Set-Cookie - SameSite Configuration

Why

The issue arose when cookies obtained after logging in at localhost:3000 couldn't be used at thembase-subdomain.localhost:3000.

The solution involves using these cookie options:

 cookieOptions: {
    httpOnly: true,
    secure: false,
    sameSite: "lax",
    path: "/",
  },

SameSite Values…

SameSite has three possible values: strict, lax, and none.

  1. Strict: Completely prohibits third-party use. For example, if used by Yahoo, Facebook wouldn't receive it.
  1. Lax: Allows some third-party use, particularly for top-level navigation.
  1. None: Allows third-party use but must be paired with the Secure flag.

Same Site vs Same Origin

Same Site (main topic of this article)

  1. eTLD+1 rule:
    • Generally, same site refers to sharing the same eTLD+1 (effective Top-Level Domain plus one level).
    • For example, example.com, www.example.com, and blog.example.com are all considered the same site.
  1. Public Suffix List exceptions:

    https://publicsuffix.org/

    • Some domains (like github.io, herokuapp.com) are on the public suffix list, and their subdomains are treated as separate sites.
    • For instance, youraccount.github.io and myaccount.github.io are not considered the same site.
  1. Protocol and port: For SameSite cookies, protocol (http/https) and port usually don't affect the "same site" determination.
  1. IP addresses: When using IP addresses directly, each IP is considered a separate site.
  1. Localhost: localhost is typically viewed as one site, and its subdomains (like test.localhost) might be considered the same site, but this can vary by browser implementation.

Same Origin (important in other places, but not this article)

  • Same Origin policy requires the scheme (protocol), host, and port to be identical.
  • Under this definition, www.web.dev and static.web.dev are not considered the same origin due to different subdomains.

Top-level Navigation with SameSite=Lax

Top-level Navigation refers to

  1. directly entering a URL in the browser's address bar
  1. clicking a link that causes a page transition.

When SameSite is set to Lax, it allows cookies to be sent during top-level navigation (like clicking links), but not for sub-resource requests like img or iframe.



https://stackoverflow.com/questions/67689503/what-is-top-level-navigation-in-browser-terminology-and-in-what-ways-it-can-be-t

Basically, TOP LEVEL navigation changes the URL in your address bar. Resources that are loaded by iframe, img tags, and script tags do not change the URL in the address bar so none of them cause TOP LEVEL navigation.

Top-level Navigation with SameSite=Strict

Strict mode provides the strongest protection against CSRF (Cross-Site Request Forgery) attacks by not sending cookies to different sites, even for top-level navigation.

Why HttpOnly Can Prevent XSS?

Set-Cookie: key=value; Expires=...; Secure; HttpOnly

HttpOnly tells the browser that this cookie cannot be accessed by client-side scripts (like JavaScript). This helps prevent XSS (Cross-Site Scripting) attacks by ensuring that even if an attacker injects malicious scripts, they can't access the cookie.

This is restricted.

document.cookies()

SameSite=None Must Be Paired with Secure

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

When a cookie is set with SameSite=None, it's completely open for cross-site sending. Requiring the Secure flag ensures that these cookies are only sent over HTTPS connections, providing a basic level of security.

https://developers.google.com/search/blog/2020/01/get-ready-for-new-samesitenone-secure

When the SameSite=None attribute is present, an additional Secure attribute must be used so cross-site cookies can only be accessed over HTTPS connections.

Resources

https://medium.com/程式猿吃香蕉/再探同源政策-談-samesite-設定對-cookie-的影響與注意事項-6195d10d4441

https://developers.google.com/search/blog/2020/01/get-ready-for-new-samesitenone-secure?hl=zh-tw

https://jsweibo.github.io/2019/03/25/什么是Public-Suffix-List/

https://publicsuffix.org/

https://publicsuffix.org/list/public_suffix_list.dat

EOF