Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "what is the concept of cookie and how to use it", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what is the concept of cookie and how to use it?"

I. Overview

Cookie is a small piece of text message saved by the server in the browser, which generally cannot exceed the size of 4KB. Each time the browser makes a request to the server, it automatically appends this information.

Cookie mainly stores state information, and here are some main uses.

Session management: save login, shopping cart and other information that needs to be recorded.

Personalized information: save users' preferences, such as the font size of the web page, background color, etc.

Tracking users: record and analyze user behavior.

Cookie is not an ideal client-side storage mechanism. Its capacity is very small (4KB), lack of data manipulation interface, and will affect performance. Client storage should use Web storage API and IndexedDB. Only the information that needs to be known to the server for each request should be placed in the Cookie.

For an introduction to Web storage, you can read this blog: the use of sessionStorage and localStorage

Each Cookie has the following aspects of metadata.

The name of Cookie

The value of Cookie (the real data is written here)

Expiration time (after which it will expire)

Domain name (default is the current domain name)

Valid path (default is the current URL)

For example, the user visits the URL www.example.com and the server writes a Cookie in the browser. The domain name of this Cookie is www.example.com, and the effective path is the root path /.

If the effective path of the Cookie is set to / user, then the Cookie is only valid when accessing the www.example.com/user and its subpaths. Later, before the browser accesses a path, it finds out the Cookie that is valid for the domain name and path and has not yet expired, and sends it to the server.

The user can set the browser not to accept Cookie, or not to send Cookie to the server. The window.navigator.cookieEnabled property returns a Boolean value indicating whether the browser opens the Cookie feature.

Window.navigator.cookieEnabled / / true

The [xss_clean] property returns the Cookie of the current web page.

Different browsers have different restrictions on the number and size of Cookie. In general, there should be no more than 30 Cookie for a single domain name, and the size of each Cookie cannot exceed 4KB. After the limit is exceeded, Cookie will be ignored and will not be set.

As long as the two URLs have the same domain name, they can share Cookie. Note that the same agreement is not required here. That is, the Cookie set by http://example.com can be read by https://example.com.

II. Cookie and HTTP agreement

Cookie is generated by the HTTP protocol and is mainly used by the HTTP protocol.

1. HTTP response: generation of Cookie

If the server wants to save the Cookie in the browser, it needs to place a Set-Cookie field in the header message of the HTTP response.

Set-Cookie:foo=bar

The above code saves a Cookie named foo in the browser with a value of bar.

The HTTP response can contain multiple Set-Cookie fields, that is, generate multiple Cookie in the browser.

HTTP/1.0 200 OKContent-type: text/htmlSet-Cookie: yummy_cookie=chocoSet-Cookie: tasty_cookie=strawberry

In addition to the value of Cookie, the Set-Cookie field can also attach properties of Cookie. A Set-Cookie field can include multiple attributes at the same time, there is no order requirement.

Set-Cookie: =; Expires=Set-Cookie: =; Max-Age=Set-Cookie: =; Domain=Set-Cookie: =; Path=Set-Cookie: =; SecureSet-Cookie: =; HttpOnly

2. HTTP request: sending of Cookie

When the browser sends a HTTP request to the server, each request is accompanied by a corresponding Cookie. In other words, the server saved this piece of information in the browser and sent it back to the server. At this point, use the Cookie field of the HTTP header information.

/ / A Cookie named foo is sent to the server with a value of bar. The Cookie: foo=bar// Cookie field can contain multiple Cookie, separated by a semicolon (;). Cookie: name=value; name2=value2; name3=value3

Here is an example.

GET / sample_page.html HTTP/1.1Host: www.example.orgCookie: yummy_cookie=choco; tasty_cookie=strawberry

3. Attributes of Cookie 1. Expires,Max-Age

The Expires attribute specifies a specific expiration time, and after the specified time, the browser no longer retains the Cookie. Its value is in UTC format and can be converted using Date.prototype.toUTCString ().

If you do not set this property, or set null,Cookie to be valid only for the current session (session), once the browser window is closed and the current session ends, the Cookie will be deleted. In addition, the browser determines whether the Cookie expires according to the local time, because the local time is not accurate, so there is no guarantee that the Cookie will expire at the time specified by the server.

The Max-Age attribute specifies the number of seconds Cookie exists from now on, such as 60 * 60 * 24 * 365 (that is, one year). After this time, the browser no longer retains the Cookie.

If both Expires and Max-Age are specified, the value of Max-Age takes precedence.

If the Set-Cookie field does not specify an Expires or Max-Age attribute, then the Cookie is Session Cookie, that is, it exists only in this conversation, and once the user closes the browser, the browser will no longer retain the Cookie.

Use Node to create a server to simulate the demonstration:

Const http = require ('http') const fs = require (' fs') http.createServer (function (request, response) {console.log ('request come', request.url) const html = fs.readFileSync (' test.html', 'utf8') response.writeHead (200,{' Content-Type': 'text/html',' Set-Cookie': ['id=123;max-age=2',' abc=456) HttpOnly']}) response.end (html)}) .console.log (8888) console.log ('http://127.0.0.1:8888'))

2 、 Domain,Path

The Domain attribute specifies which domain names should be accompanied by this Cookie when the browser makes a HTTP request.

If this attribute is not specified, the browser will set it as the current domain name by default, and the subdomain name will not be accompanied by this Cookie. For example, if example.com does not set the domain property of Cookie, sub.example.com will not ship with this Cookie.

If the domain attribute is specified, the subdomain name also comes with this Cookie. If the domain name specified by the server does not belong to the current domain name, the browser will reject the Cookie.

Summary: the Domain identity specifies which hosts can accept Cookie. If not specified, the default is the current host (no subdomain name). If Domain is specified, the subdomain name is generally included.

The Path attribute specifies which paths should be accompanied by this Cookie when the browser makes a HTTP request. Whenever the browser finds that the Path attribute is the first part of the HTTP request path, it will put the Cookie in the header message. For example, if the PATH attribute is /, the request / docs path will also contain the Cookie. Of course, the premise is that the domain name must be consistent.

3 、 Secure,HttpOnly

The Secure attribute specifies that the browser can send this Cookie to the server only under the encryption protocol HTTPS. On the other hand, if the current protocol is HTTP, the browser automatically ignores the Secure attribute sent by the server. This property is just a switch and does not need to be specified. If the communication is the HTTPS protocol, the switch is automatically turned on.

The HttpOnly attribute specifies that the Cookie cannot be obtained through the JavaScript script, mainly because the [xss_clean] property, the XMLHttpRequest object, and the Request API cannot get the attribute. This prevents the Cookie from being read by the script and takes the Cookie with it only when the browser makes a HTTP request. For security reasons.

4. [xss_clean]

The [xss_clean] property is used to read and write the Cookie of the current web page. When read, it returns all the Cookie of the current page, provided that the Cookie does not have a HTTPOnly attribute.

[xss_clean] / / "foo=bar;baz=bar"

The above code reads two Cookie at once from [xss_clean], separated by semicolons. You must restore manually to take out the value of each Cookie. This is where it is inconvenient for cookie to access data. There is no perfect api for accessing data for us to use. We must manually extract the data we need from it.

The [xss_clean] property is writable and allows you to add a Cookie to the current site. When writing, the value of Cookie must be written as key=value. Note that there can be no spaces on both sides of the equal sign. [xss_clean] only one Cookie can be written at a time, and writes are not overwritten, but added.

[xss_clean] = 'fontSize=14';// eventually only test1=456 will be written in [xss_clean] =' test1=456;h=123'

[xss_clean] the difference in read and write behavior (all Cookie can be read at a time, but only one Cookie can be written) is related to the Cookie communication format of the HTTP protocol.

When the browser sends Cookie to the server, the Cookie field sends all Cookie on one line.

When the server sets Cookie to the browser, the Set-Cookie field sets a Cookie on one line.

The only way to delete an existing Cookie is to set its expires property to a past date.

[xss_clean] = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT'; above is about the content of this article "what is the concept of cookie and how to use it?" I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.