Small browser cookies

Reference article: browser Cookie Series and SameSite property

Cookie introduction

Why are cookies appearing?

HTTP is a stateless protocol (here HTTP refers to HTTP 1.x). Each request is completely independent. Each request contains the complete data required to process the request. Sending the request does not involve Status change. The simple understanding is that the same client sends a request to the server twice in a row, and the server does not recognize that this is a request sent by the same client.
In order to solve the problem caused by HTTP statelessness, cookies appeared. The existence of cookies is not just to solve the problem of stateless communication protocols.

What is a cookie?

meaning: type is "small text file", which refers to the data (not more than 4KB) stored on the user's local terminal by some websites in order to identify the user.
composition: It is composed of a name (Name), a value (Value) and several other optional attributes that are used to control the validity period, security, and scope of the cookie.
view:

• For cookies stored in the browser, open the developer tools of the browser, and view the cookies of the current page in Application-Cookies
• For cookies with local files, open the file to view

What is the purpose of cookies?

Cookies are mainly used in the following three areas:

1. Session state management (such as user login status, shopping cart, game score or other information that needs to be recorded)
2. Personalized settings (such as user-defined settings, themes, etc.)
3. Browser behavior tracking (such as tracking and analyzing user behavior, etc.)

How are cookies set?

Simply put:

1. The client sends an HTTP request to the server
2. When the server receives an HTTP request, it adds a Set-Cookie field to the response header
3. The browser saves the cookie after receiving the response
4. After each request to the server, the Cookie information is sent to the server through the Cookie field.

What are the attributes of cookies?

Name/Value

When using JavaScript to manipulate cookies, pay attention to the encoding of Value.

Expires

Expires is used to set the expiration time of the Cookie. The set expiration time is only related to the client, not the server.

Set-Cookie: name=value; Expires=Wed, 21 Oct 2021 07:28:00 GMT;

• When the Expires attribute defaults, it means that it is a session cookie. The cookie value is stored in the client's memory and becomes invalid when the user closes the browser. Some browsers provide a session resumption function. In this case, even if the browser is closed, the session cookie will be retained, as if the browser has never been closed.
• When the Expires attribute is not default, it means that it is a persistent cookie, and the cookie value is stored in the user's hard disk until it expires or the cookie is manually cleared.

Max-Age

Max-Age is used to set the number of seconds that elapse before the cookie expires. Max-Age can be positive, negative, or even 0.

Set-Cookie: id=1224455; Max-Age=604800;

• If the max-Age attribute is a positive number, the browser will persist it, that is, write it to the corresponding Cookie file.
• When the max-Age attribute is a negative number, it means that the cookie is only a session cookie.
• When max-Age is 0, this cookie will be deleted immediately.

When both Expires and Max-Age exist, Max-Age has higher priority.

Domain

Domain specifies the host name to which cookies can be delivered. The default value is the effective top-level domain name + second-level domain name of the current document access address.

Set-Cookie: test=219ffwef9w0f; Domain=taobao.com;

If the domain is set to taobao.com, both a.taobao.com or b.taobao.com can use cookies.

Cookies cannot be set across domains. For example, setting the Domain to Baidu.com on the .taobao.com page is invalid

Path

Path specifies a URL path, this path must appear in the path of the requested resource before cookies can be sent. Such as setting Path=/docs , /docs/Web/ resources under it will take Cookie, /test will not carry Cookie.

Set-Cookie: test=219ffwef9w0f; Domain=taobao.com; Path=/;

The Domain and Path identifiers together define the scope of the cookie: which URL the cookie should be sent to.

Secure

Setting Secure means that only the https protocol will send cookies. Using the HTTPS security protocol can protect cookies from being stolen and tampered during the transmission process between the browser and the web server.

Set-Cookie: test=219ffwef9w0f; Domain=taobao.com; Path=/; Secure

HTTPOnly

Setting HTTPOnly means that cookies are only sent under the http and https protocols, and the local method of obtaining cookies is invalid. It can prevent client-side scripts from accessing cookies through document.cookie, etc., which helps avoid XSS attacks.

Set-Cookie: test=219ffwef9w0f; Domain=taobao.com; Path=/; HTTPOnly

http-only: Cannot be read by web scripts, and does not limit the security of the transmission path
secure: It can be read by web scripts, and is only allowed to be sent to the server through a secure channel

SameSite

SameSite can prevent cookies from being sent during cross-site requests, thereby preventing cross-site request forgery attacks (CSRF).

Set-Cookie: name=dzxz; Expires=Wed, 30 Aug 2020 00:00:00 GMT;SameSite=none; Secure

• The HTTP interface does not support SameSite=none. If you want to add the SameSite=none attribute, then the Cookie must also be added with the Secure attribute, which means that the Cookie will only be sent under the HTTPS protocol.

attribute value

SameSite can have the following three values:

• Strict Only one party is allowed to request to carry cookies, that is, the browser will only send the cookies requested by the same site
• Lax allows some third-party requests to carry cookies
• None Cookies will be sent regardless of cross-site

The default before Chrome80 is None, and the default after Chrome80 is Lax.

Same station and cross station

"Same-site/cross-site" and first-party/third-party are equivalent. But it is a completely different concept from the "same-origin/cross-origin" in the browser SOP.

• The "same source" of the same-origin policy: means that the protocol/hostname/port of the two URLs are the same.
• Same site: As long as the eTLD+1 of the two URLs are the same, there is no need to consider the protocol and port.
• Cross-site: The eTLD+1 of the two URLs are different.

example:
and 160dd9230e3794 www.baidu.com are cross-sites.
www.a.taobao.com and www.b.taobao.com are the same site.
a.github.io and b.github.io are cross-site. [Github.io is a complete eTLD, and the subdomains registered on it are all cross-sites. 】

eTLD
Indicates a valid top-level domain name, registered in the public suffix list maintained by Mozilla, for example, .com, .co.uk, .github.io, etc. eTLD+1 means valid top-level domain name + second-level domain name, such as taobao.com.

The difference between a top-level domain TLD and an effective top-level domain eTLD
Strictly speaking: .cn is the top-level domain name, .com.cn .org.cn is the top-level domain name created by .cn. Due to the wide range of circumstances, the strict top-level domain name cannot be used directly in many scenarios, so the concept of "effective top-level domain name" was created. Register your self-created top-level domain name as a valid top-level domain name, such as .github.io, .org.cn