In the chrome 80 version released in February, the third-party cookies are blocked by default. During the grayscale period, many applications of the alisystem have problems. Therefore, a special team has been set up to promote the transformation of Bu. At present, the transformation of Ali system has been basically completed. It is estimated that all front-end teams have received the notice, which has really deepened everyone’s understanding of cookie. Therefore, it is likely to give an interview question about this, even if it is not an interview question, when asked about http When it comes to relevant content, you may as well refer to this matter. First, it can show your follow-up to current events at the front-end; second, it can also extend the content of front-end security to add points to your interview.
So this article will introduce the browser’s cookie and the “hot” samesite attribute.
Generally, we will say “HTTP is a stateless protocol”, but we should note that HTTP here actually refers to http X, and the so-called stateless protocol, a simple understanding is that even if the same client sends requests to the server twice in a row, the server can’t recognize that it is a request sent by the same client. This causes problems such as adding a product to the shopping cart, but because you can’t identify the same client, you can’t refresh the next page
In order to solve the problem caused by HTTP stateless, cookies appeared later. However, this may lead to some misunderstandings. First of all, being stateless is not bad. It has advantages, but it can also lead to some problems. The existence of cookie is not to solve the stateless problem of communication protocol, but to solve the problem of session state between client and server. This state refers to the state of back-end service rather than the state of communication protocol.
So let’s take a look at cookies and quote Wikipedia:
Cookie (complex form cookies), type is “small text file”, refers to the data stored on the user‘s local terminal by some websites in order to identify the user’s identity.
As a piece of small text data, which is generally no more than 4KB, it is composed of a name, a value and several other optional attributes used to control the validity, security and use range of cookies. We will introduce these properties later.
We can view the cookie of the current page in the browser’s developer tool:
Although we see cookies in the browser, this does not mean that the cookie files are only stored in the browser. In fact, cookies related content can also be stored in local files, such as chrome on Mac
~/Library/Application Support/Google/Chrome/DefaultThere will be a database file named cookies in it. You can use SQLite software to open it
The advantage of storing locally is that even if you close your browser, the cookie will still work.
How are cookies set? In short, it is
- The client sends an HTTP request to the server
- When the server receives an HTTP request, a set cookie field is added to the response header
- The browser saves the cookie after receiving the response
- After that, the cookie information is sent to the server through the cookie field in every request to the server.
https://main.m.taobao.com/For example, consider this process:
We can see the set cookie field in the response headers returned by the request
Then let’s look at the cookie:
Let’s refresh the page and look at the request again. You can see the cookie field in the request headers:
Properties of cookies
In the following figure, we can see some properties related to cookies:
Here are some points that you may not pay attention to:
Expires is used to set the expiration time of the cookie. For example:
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
When the expires attribute defaults, it means a session cookie. As shown in the figure above, the value of expires is session, which means a session cookie. When it is a session cookie, the value is stored in the client memory and is invalid when the user closes the browser. It should be noted that some browsers provide the function of session recovery. In this case, even if the browser is closed, the session cookie will be preserved as if the browser had never been closed.
In contrast to session cookies, persistent cookies are stored on the user’s hard disk until they are expired or cleared. It is worth noting here that the date and time set are only related to the client, not the server.
Max age is used to set the number of seconds that need to elapse before the cookie fails. For example:
Set-Cookie: id=a3fWa; Max-Age=604800;
Max age can be positive, negative, or even 0.
If the max age attribute is a positive number, the browser will persist it and write it to the corresponding cookie file.
When the max age attribute is negative, it means that the cookie is only a session cookie.
When Max age is 0, the cookie is deleted immediately.
If both expires and Max age exist, Max age has a higher priority.
Domain specifies the host name to which the cookie can be delivered. If not specified, the default value is the host part of the current document access address (but does not include the subdomain name).
For example, if the cookie is set in the domain name of Baidu, it is not allowed to set it as a cross domain
Set-Cookie: qwerty=219ffwef9w0f; Domain=baidu.com; Path=/; Expires=Wed, 30 Aug 2020 00:00:00 GMT
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, setting
/docs/Web/The first cookie will be included in the resource below,
/testThe cookie header will not be carried.
The domain and path identities jointly define the scope of the cookie: which URLs should the cookie be sent to.
Cookies marked as secure should only be sent to the server through requests encrypted by the HTTPS protocol. Using the HTTPS security protocol, cookies can be protected from theft and tampering during the transmission between the browser and the web server.
Setting the httponly property prevents client scripts from passing through document.cookie To access the cookie in other ways can help to avoid XSS attack.
Samesite is a very noteworthy content recently, because the third-party cookies are blocked by default in the chrome 80 version released in February, which will cause problems in many applications of the alisystem. Therefore, a problem team has been set up to promote the transformation of Bu.
Let’s take a look at the function of this attribute
The samesite property can prevent cross Site Request Forgery Attack (CSRF) by preventing cookie from being sent during cross site request.
Samesite can have three values:
- StrictOnly one party is allowed to request to carry the cookie, that is, the browser will only send the cookie requested by the same site, that is, the current web page URL is exactly the same as the request target URL.
- LaxAllow some third party requests to carry cookies
- NoneCookies are sent regardless of whether they are cross site or not
Before the default is none, after chrome 80, it is lax by default.
Cross domain and cross station
The first thing to understand is that cross site and cross domain are different. The same site / cross site is equivalent to the first party / third party. However, the concept of “same origin / cross origin” in browser same origin policy (SOP) is totally different.
The same origin policy means that the protocol / host name / port of the two URLs are consistent. For example, https://www.taobao.com/pages/… Its protocol is HTTPS and the host name is www.taobao.com , port is 443.
As the security cornerstone of the browser, the same origin policy is more strict. Relatively speaking, the “same site” judgment in cookie is relatively loose: as long as the etld + 1 of two URLs are the same, the protocol and port do not need to be considered. Where etld represents a valid top-level domain name and is 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 + secondary domain name, such as taobao.com Etc.
Take a few examples, www.taobao.com and www.baidu.com It’s Cross station, www.a.taobao.com and www.b.taobao.com It’s the same station, a github.io And B github.io It’s Cross station.
Next, let’s take a look at where the change from none to lax affects the sending of cookies? Let’s go straight to a chart:
As can be seen from the above figure, for most web applications, post forms, iframes, AJAX, and image have changed from sending three-party cookies across sites to not sending them.
Post form: Yes, learning CSRF will always give examples of forms.
Iframe: many web applications embedded in iframe are cross site and will be affected.
Ajax: may affect the behavior and result of some front-end values.
Image: images are usually placed on CDN, and cookies are not required in most cases, so the impact is limited. However, if you refer to an image that needs authentication, it may be affected.
In addition to these, there are also script methods, which will not send cookies. For example, most of Taobao’s requests are jsonp. If cross site is involved, it may also be affected.
Let’s see what the problem is? Here are a few examples
- The pages of tmall and Feizhu rely on the interface under Taobao domain name to obtain login information. As the cookie is lost, the user can not log in. The page will also mistakenly judge that it is due to the user turning on the browser’s “prohibit third party cookie” function and give an error prompt
- Some of the pages of Taobao are embedded in Alipay to confirm payment and confirmation receipt page, Tmall is embedded in Taobao’s login page and so on. Due to Cookie failure, payment, login and other operations will fail.
- Ali’s mother’s advertisements on major websites such as today’s headlines, Netease and microblog are also embedded with iframes. Without cookies, they can’t accurately recommend
- Some buried point systems will embed the user ID information into the cookie for log reporting. This system generally uses a separate domain name, which is separate from the business domain name, so it will also be affected.
- Some systems used to prevent malicious requests will pop up verification codes for the access judged as malicious requests for users to conduct security verification. After passing the security verification, a cookie will be planted in the domain where the request is located. After the cookie is carried in the request, the security verification code will not be played in a short period of time. Above chrome 80, if the request fails to bring this cookie due to samesite, a pop-up verification code will appear for security verification.
- Tmall business background requested a cross domain interface, because there is no cookie, the interface will not return data
If it is not solved, there are still many systems that will affect it
The solution is to set samesite to none.
Take Adobe as an example https://www.adobe.com/sea/ To view the request, you can see:
However, there are two points to pay attention to:
- The HTTP interface does not support samesite = none
If you want to add the samesite = none attribute, the cookie must also have the secure attribute, which means that the cookie will only be sent under the HTTPS protocol.
- UA detection is required. Some browsers cannot add samesite = none
Safari of IOS 12 and some old versions of chrome recognize samesite = none as samesite = strict. Therefore, the server must perform user agent detection when issuing the set cookie response header, and do not issue the samesite = none attribute to these browsers
The role of cookies
Cookies are mainly used in the following three aspects:
- Session state management (such as user login status, shopping cart, game score or other information to be recorded)
- Personalization (such as user-defined settings, themes, etc.)
- Browser behavior tracking (such as tracking and analyzing user behavior, etc.)
The disadvantages of cookies
If asked, you can answer in terms of size, security, and increasing the size of the request.
- HTTP is a stateless protocol. What’s the meaning of stateless in this sentence? -Lingjian’s answer – Zhihu
- What’s the impact of setting the default value of samesite to lax in chrome 80.0 on existing cookie usage? – ziyunfei’s answer – Zhihu
- Some internal articles
Contents of various series of articles address: https://github.com/mqyqingfeng/Blog
If there are mistakes or not rigorous, please be sure to correct them. Thank you very much. If you like it or have some inspiration, welcome star, which is also an encouragement to the author.
And so on
We have set up a “front-end school recruitment interview sprint mutual aid group”. Welcome to join “taoxiaozhao 233″~