preface

In Chrome 80 version released in February, third-party cookies were blocked by default. During the grayscale period, many applications of Ali department had problems. For this reason, a special team was set up to promote the transformation of each BU. All the front end teams have probably been notified of this, and it has really improved people’s understanding of cookies, so there’s probably an interview question about this, and even if it’s not an interview question, when you ask about HTTP, it’s a good idea to mention this as well, to show that you’re following up on the front end. Two can also be extended to the front end of the security aspects of the content, for your interview points.

This article introduces browser cookies and the “hot” SameSite property.

HTTP

If the same client sends a request to the server twice in a row, the server will not recognize that the request is from the same client. This can cause problems such as adding an item to your shopping cart, but because you don’t recognize it as the same client, you refresh the page and it’s gone…

Cookie

To solve the problem caused by HTTP statelessness, cookies later came along. However, this may lead you to some misunderstandings. First of all, statelessness is not bad. It has advantages, but it can also lead to some problems. The existence of cookies is not to solve the problem of stateless communication protocol, but to solve the problem of the session state between the client and the server. This state refers to the state of the back-end service rather than the state of the communication protocol.

A Cookie is introduced

So let’s take a look at cookies, quote from Wikipedia:

Cookies (plural form of Cookies). The type of Cookies is “small text file”. It refers to the data stored on the local terminal of a user by some websites to identify the user.

As a small piece of text data, typically no more than 4KB, it consists of a Name, a Value, and several other optional attributes that control the Cookie’s validity, security, and usage range, which we will discuss later.

A Cookie at

We can view the Cookie of the current page in the browser’s developer tools:

Just because we see cookies in the browser doesn’t mean that cookies are stored in the browser alone. In fact, the Cookies related content can also exist in the local file, such as Chrome under Mac, storage directory is ~ / Library/Application Support/Google/Chrome/Default, There will be a database file called Cookies, which you can open using sqLite software:

The nice thing about having a local Cookie is that it works even if you close the browser.

The setting of cookies

So how do you set the Cookie? In a nutshell

  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 when it receives the response
  4. After each request to the server, Cookie information is sent to the server through the Cookie field.

In https://main.m.taobao.com/, for example we see the process:

We can see the set-cookie field in the Response Headers returned from the request:

Then let’s look at the Cookie:

If we refresh the page and look at the Request again, we can see the cookie field in Request Headers:

The attribute of Cookies

Here we can see some of the attributes associated with Cookies:

Here are some things you might not have noticed:

Name/Value

When using JavaScript to manipulate a Cookie, be careful to encode the Value.

Expires

Expires is used to set the expiration time of a Cookie. Such as:

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
Copy the code

When Expires defaults, it represents a session-based Cookie. For example, the value of Expires is Session, which represents a session-based Cookie. When it is a session-based Cookie, the value is stored in client memory and is invalidated when the user closes the browser. It is important to note that some browsers provide session recovery, in which case the session cookies are retained even after the browser is closed, as if the browser was never closed.

The opposite of a session-based Cookie is a persistent Cookie, which remains on the user’s hard drive until the Cookie expires or is cleared. It is important to note here that the date and time set are only relevant to the client, not the server.

Max-Age

Max-age is used to set the number of seconds before the Cookie expires. Such as:

Set-Cookie: id=a3fWa; Max-Age=604800;
Copy the code

Max-age can be positive, negative, or even 0.

If the max-age attribute is positive, the browser will persist it, that is, write it to the corresponding Cookie file.

When the max-age attribute is negative, the Cookie is only a conversational Cookie.

When max-age is 0, the Cookie is deleted immediately.

If both Expires and max-age exist, max-age takes precedence.

Domain

Domain specifies the host name to which the Cookie can be delivered. If not specified, the default value is the host portion of the current document access address (but not the subdomain).

For example, the Domain set on the home page of Taobao is.taobao.com, so that both A.taobao.com and B.taobao.com can use cookies.

Note here that you can not set cookies across domains, such as Ali Domain page Domain set to Baidu is invalid:

Set-Cookie: qwerty=219ffwef9w0f; Domain=baidu.com; Path=/; Expires=Wed, 30 Aug 2020 00:00:00 GMT
Copy the code

Path

Path specifies a URL Path that must appear in the Path of the resource to be requested before the Cookie header can be sent. For example, if Path=/docs, resources under /docs/Web/ carry Cookie headers, but /test does not.

Together, the Domain and Path identity define the scope of the Cookie: the URL to which the Cookie should be sent.

Secure properties

Cookies marked Secure should only be sent to the server through requests that are encrypted by the HTTPS protocol. The HTTPS security protocol protects cookies from being stolen and tampered with during transmission between the browser and the Web server.

HTTPOnly

Setting the HTTPOnly attribute prevents client scripts from accessing cookies through document.cookie and helps prevent XSS attacks.

SameSite

SameSite is very noteworthy recently, because the Chrome80 version released in February blocked third-party cookies by default, which caused problems in many Ali applications, and a special team was set up to push each BU to make changes.

role

Let’s first look at what this property does:

The SameSite property prevents cross-site request forgery attacks (CSRF) by preventing cookies from being sent on cross-site requests.

Attribute values

SameSite can have the following three values:

  1. Strict allows only one request to carry cookies. That is, the browser sends only the cookies requested by the same site. That is, the current URL of the web page is consistent with the target URL of the request.
  2. Lax allows some third-party requests to carry cookies
  3. None The Cookie is sent regardless of cross-site

The previous default was None, and Chrome80 defaults to Lax.

Cross-domain and cross-site

The first thing to understand is that cross-site and cross-domain are different. “Same-site/cross-site” is equivalent to first-party/third-party. However, the concept of “same-origin/cross-origin” in the browser’s same-origin policy (SOP) is completely different.

The same-origin policy indicates that the two urls have the same protocol, host name, or port. For example, www.taobao.com/pages/… , the protocol is HTTPS, the host name is www.taobao.com, and the port is 443.

The same origin policy, as the security cornerstone of the browser, is relatively strict in its “same origin” judgment. Relatively speaking, the “same site” judgment in the Cookie is relatively loose: as long as the eTLD+1 of two urls is the same, it does not need to consider the protocol and port. ETLD indicates a valid top-level domain name registered in the Public Suffix List maintained by Mozilla, such as.com,.co.uk, and.github. IO. ETLD +1 indicates a valid top-level domain name + a secondary domain name, such as taobao.com.

For example, www.taobao.com and www.baidu.com are cross-sites, www.a.taobao.com and www.b.taobao.com are co-sites, and a.github. IO and b.github. IO are cross-sites (note cross-sites).

change

Now take a look at where the change from None to Lax affects the sending of Cookies. Let’s go straight to a chart:

As you can see from the figure above, for most Web applications, the Post form, Iframe, AJAX, and Image have gone from sending three-party cookies across the site to not sending at all.

Post forms: Sure, CSRF always uses examples of forms.

Iframe: Many web applications embedded with iframe are cross-site and will be affected.

AJAX: May affect the behavior and outcome of some front-end values.

Image: The Image is usually put CDN, most cases do not need Cookie, so the impact is limited. However, if the image that requires authentication is used, it may be affected.

In addition to these there are script ways, this way will not send cookies, like Taobao most of the requests are JSONP, if involved in cross-site may also be affected.

The problem

Let’s see what happens, okay? A few examples:

  1. The pages of Tmall and Feilu obtain the login information by requesting the interface under the domain name of Taobao. Due to the loss of cookies, users cannot log in. The pages will also give error prompts due to the misjudgment that the user has opened the “prohibit third-party cookies” function of the browser

  2. Some pages of Taobao are embedded with alipay payment confirmation and receipt confirmation pages, and Tmall is embedded with Taobao login pages, etc. Due to the invalid Cookie, payment, login and other operations will fail

  3. Ali mother’s advertisements on major websites such as Toutiao, netease, Weibo and so on are also embedded with iframe. Without cookies, they cannot be accurately recommended

  4. Some burial systems will bury user ID information in cookies for log reporting. This kind of system generally uses a separate domain name, which is separate from the business domain name, so it will also be affected.

  5. Some systems used to prevent malicious requests, to judge the access to malicious requests will pop-up verification code for the user to perform security authentication, through the security authentication will be in the request domain to breed a Cookie, the request with this Cookie, a short period of time no longer pop-up security verification code. After Chrome80, if the request cannot be carried with the Cookie due to Samesite, the verification code will pop up all the time for security verification.

  6. Tmall merchant background requests cross-domain interface, because there is no Cookie, the interface will not return data

  7. …

If not solved, there are still many systems affected…

To solve

The solution is to set SameSite to None.

Take the Adobe website www.adobe.com/sea/ as an example. The view request can see:

But there are two caveats:

  1. HTTP interface does not support SameSite= None

If you want to add the SameSite= None attribute, then the Cookie must also have the Secure attribute, indicating that the Cookie will only be sent over HTTPS.

  1. If UA detection is required, some browsers cannot add SameSite= None

IOS 12 Safari and some older versions of Chrome recognize SameSite=none as SameSite=Strict, so the server must perform user-agent detection before sending the set-cookie response header. Do not deliver the SameSite= None attribute for these browsers

The role of the Cookie

Cookies are mainly used in the following three aspects:

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

The disadvantage of the Cookie

If asked, you can answer in terms of size, security, increasing the size of the request, etc.

reference

  1. MDN
  2. HTTP is a stateless protocol. What does statelessness mean in this sentence? – The answer of the spirit sword – Zhihu
  3. How does setting SameSite to Lax by default in Chrome 80.0 affect existing Cookie usage? – Ziyunfei’s answer – Zhihu
  4. Some internal articles

All kinds of series

Contents of various series of articles: github.com/mqyqingfeng…

If there are any mistakes or irregularities, please be sure to correct them. Thank you very much. If you like it or have some inspiration, welcome star, which is also a kind of encouragement to the author.