What is HTTP and its basic features

What happens when you type in a url

It mainly studies the stage of initiating request → reading response

What is the HTTP protocol

Hyper Text Transfer Protocol 1

• The HTTP protocol can host many types of text: HTML, CSS, JS, Web APIs

2. Application layer protocol, based on TCP

• HTTP is an application layer protocol, based on the transport layer TCP protocol, TCP is a reliable protocol

3. Request-response

• HTTP is a C/S model protocol

4. Simple and extensible

• Example of protocol headers:

• You can add some content to the header of the agreement, which is extensible

5. A stateless

Protocols have no memory for interactive scenarios. When a new request comes in, the server can’t remember where the previous request came from

Protocol Analysis (Packet structure, development history)

The development of

agreement	The key point	The characteristics of
HTTP / 0.9	Special agreement	✔ request GET/mypage. HTML ➤ Return only HTML documents
HTTP / 1.0	Building Scalability	➤ Add headers ➤ You have a status code ➤ Support multiple document types
HTTP / 1.1	Standardized protocol	✔ Link reuse ✔ cache Open TAB
HTTPS
HTTP/2	Better performance (data transfer, enhanced functionality)	✔ Binary protocol ✔ compressed header Click ok
HTTP/3	The draft

HTTP/1.1 Packet Parsing

Case 1.

The structure of the request and response is consistent

Case 1:

Case 2:

Composition:

• The starting line (Request/response) : Request: Method Path Version | Responses: Version StatusCode StatusMessage
• Headers (request/response header) Specifies the protocol header of the message
• Empty line segmentation
• Entity data part (request/response body) (information submitted by browser/information returned by server)

2. HTTP packet Method Method

Method	describe
GET	Request a specified resource from the server. This method is used only to retrieve data
HEAD	Request the same response as the GET request, but only the response header of the document from the server
POST	Submitting entities to a specified resource (input data to the server) usually results in state changes or side effects on the server
PUT	Replace all current representations of the target resource with the request payload (storing the body of the request on the server, such as uploading a file)
DELETE	Request to delete the specified resource on the server
TRACE	Perform a message loopback test along the path to the target resource (trace the proxy server through which the request reached the server)
OPTIONS	Communication options used to describe the target resource (the request server returns the request method used to support the specified resource)
CONNECT	Establishes a tunnel to the server identified by the target resource
PATCH	Used to apply partial modifications to a resource

Methond

• Safe: GET HEAD OPTIONS Method that does not modify server data
• Idempotent: GET HEAD OPTIONS PUT DELETE The same request is executed once as it is executed multiple times, and the server status is the same.
• All safe methods are Idempotent, and all secure requests do not modify the data on the server, so all secure requests are Idempotent.

3. A status code

Note: 301 indicates a permanent redirect, 302 indicates a temporary redirect, and 304 indicates that the resource has not been modified

4. RESTful API

RESTful API: an API design style; REST-Representational State Transfer

• Each URI represents a resource;
• Some representation layer that passes this resource between the client and the server;
• The client uses HTTP Method to perform operations on server resources to achieve presentation layer state transformation.

Case study:

5. Common request headers

Request header	describe
Accept	Receive typeIs supported by the browserThe MIME type(Content-Type returned by the benchmarking server)
Content-Type	The client sends out the physical contenttype
Cache-control	Specifies that the request and response followCaching mechanisms, such as no – cache
If-Modified-Since	Last-midified corresponding to the serverMatches to see if the file has changedTo within 1s
Expires	Cache control, no requests are made during this time,Use cache directly, server time
Max-age	On behalf ofThe number of seconds the resource is cached locally, the request is not made during the valid time, instead caching is used
If-None-Match	Etag of the server to matchCheck whether the file content is changed(Very accurate)
Cookie	There are cookies and they are automatically brought when they are in the same domain
Referer	The pageSource URL(Applicable to all types of requests, down to the detail page address, CSRF interception is commonly used for this field)
Origin	Where does the original request originate from (onlyAccurate to port), Origin has more respect for privacy than Referer
Uer-Agent	Some necessary information about the user client, such as the UA header

Cache related

6. Common response headers

Response headers	describe
Content-Type	The type of entity content returned by the server (the WEB server tells the browser the type and character set of the object it is responding to)
Cache-Control	Specifies that the request and response followCaching mechanisms, such as no – cache
Last-Modified	The last modification time of the requested resource
Expires	At what point should a document be considered expired, so it is no longer cached, fetched from the server again, and the cache is updated
Max-age	How many seconds should the client Cache local resources? This parameter takes effect after cache-control is enabled
ETag	Generated from the document entity information content are identifiers for a specific version of the resource, similar to fingerprints, used in conjunction with if-none-match
Set-Cookie	Set the cookie associated with the page. The server passes the cookie to the client through this header
Server	HTTP server information. For example, Server: Microsoft-IIS/7.5, Server: Apache-coyote /1.1. This field can contain multiple product identifiers and annotations, typically in order of importance.
Access-Control-Allow-Origin	The server side allows the request Origin header (such as *) to specify which web sites can be shared across domain source resources

Cache related

7. The cache

Cache-related headers:

Strong cache	Negotiate the cache
Be sure to use local resources for the duration of the cache	Each request has a request-response process, and caches each time need C/S authentication and consultation with each other, there is a communication process. Negotiate cache-related headersCome in pairs.
Expires.Time is not allowed Cache-control: 1. Max-age: The cache time is calculated as the number of seconds from the initiation time. If the number of seconds exceeds the interval, the cache becomes invalid. 2. No-cache: no strong cache is used. Check whether the cache is fresh with the server. 3. No-store: Disables the use of cache (including negotiated cache) and requests the latest resources from the server each time. 4. Must -revalidate: It can be used before the cache expires, after which it must be verified to the server.	ETag/if-None-MatchHash code represents the identifier of a resource. Last-Modified/If-Modified-Since, when the file was last modified.

How the browser determines the cache:

• Note: request status code 200 does not necessarily initiate a real request, it may be a local strong cache.

8.cookie

Cookies help implement the HTTP stateless protocol and also enhance some of the state-related features.

• The COOKIE field is used in HTTP request packets to notify the server of the cookie in effect
• The HTTP response packet uses set-cookie to inform the client of the cookies to be saved. Set set-cookie in the response header
  

  Key/value pair	describe
  Name=value	The names and values of the various cookies
  Expire=Date	The validity period of the Cookie, the default Cookie is only valid until the browser closes (control related)
  Path=Path	The file directory that limits the range of cookies to be sent, default to current (valid directory range)
  Domain=Domain	Limit the domain name in which the cookie takes effect. Default is the domain name of the service that created the cookie (domain name)
  secure	Cookies can only be sent when there is a secure connection
  HttpOnly	Setting HttpOnly prevents javascript scripts from obtaining cookies (security related)
  SameSite[None	Strict

Development -HTTP/2 with HTTPS

HTTP/2: Faster, more stable, and simpler

New Feature 1:

• Frame: The smallest unit of HTTP/2 communication. Each frame contains a frame header that at least identifies the data stream to which the current frame belongs.
• Binary transmission, data compression, reduce packet size.
  

New Feature 2:

• Message :(the complete sequence of frames corresponding to a logical request or response message).

• Data stream: a bidirectional byte stream within an established connection that can carry one or more messages.

• Interleaved sending, recipient reorganized.

  

New Feature 3:

• HTTP/2 connections are permanent and require only one connection per source.
• Flow control: Mechanism that prevents a sender from sending large amounts of data to a receiver.
• Server push:
  

HTTPS

HTTPS: Hypertext Transfer Protocol Secure

• Encrypted by TSL/SSL
  

Encryption:

• Symmetric encryption: The same key is used for both encryption and decryption
• Asymmetric encryption: Encryption and decryption require the use of two different keys (public key and private key)

Scenario analysis

Static resource

1. The case:

2. Static resource solution: Cache +CDN+ file name hash

• Cache: Through the protocol header Settings, resources are preferentially read from the local, and the response time is fast.
• CDN: Content Delivery Network. Based on the judgment of user proximity and server load, CDN ensures that Content can be requested for service in an extremely efficient way.
  

landing

Request Headers:

:authority:sso.toutiao.com/ / address
:method:POST// Action: POST:path:/quick_login/v2/? aid=24&account_sdk_source=sso&language=zh
:scheme:https
accept:application/json, text/javascript// Want to receive json formataccept-encoding:gzip, deflate, br accept-language:zh-CN,zh; q=0.9
content-length:117
content-type:application/x-www-form-urlencoded// Carry the entity information type: form associated with form data
cookie:_S_DPR=1; _S_IPAD=0; _S_WIN_WH=1366_625; ttwid=1%7CvYS_NyRV1Ai9vQseqGzuvE1tZC9HRh0FJIkopl7L_bw%7C1630417245%7C13945c885fd479252cc9b7b0a8db451fc0accedd0ed9a70a3ab599e3f3aa3fa0; passport_csrf_token_default=1b574667f3040e78ca76c4c30363806f; passport_csrf_token=1b574667f3040e78ca76c4c30363806f; MONITOR_WEB_ID=74dbd20c- 75.a9- 4373.-b1eb- 79.d08315118f; s_v_web_id=verify_kt05zmwq_0ZZp9KvV_Cklo_4Rpt_8SvP_C9rXaRkL4LSF
origin: https://sso.toutiao.com// Request source
referer:https://sso.toutiao.com/login/ // Request the source
sec-ch-ua:"Chromium"; v="92"." Not A; Brand"; v="99"."Google Chrome"; v="92"
sec-ch-ua-mobile:?0
sec-fetch-dest:empty
sec-fetch-mode:cors
sec-fetch-site: same-origin
user-agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.04515.107. Safari/537.36 / / Chrome
x-tt-passport-csrf-token: 1b574667f3040e78ca76c4c30363806f // Add custom protocol to prevent CSRF attacks HTTP is extensible protocol
Copy the code

Response Headers: has a lot of set-cookies:

content-encoding: gzip
content-length:198
content-type: application/json // The data format is JSON
set-cookie:passport_auth_status=2c38778eef31cd8c6efdddebef79ba1f%2C; Path=/; Domain=toutiao.com; Max-Age=2592000; HttpOnly// In the root domain name toutiao.com valid 2592000s to prevent JS to obtain
set-cookie: passport_auth_status_ss=2c38778eef31cd8c6efdddebef79ba1f%2C; Path=/; Domain=toutiao.com; Max-Age=2592000; HttpOnly; Secure; SameSite=None
set-cookie: sso_auth_status=d892c172d477b9d8f53e3a6229285dd8; Path=/; Domain=toutiao.com; Max-Age=2592000; HttpOnly
set-cookie:sso_auth_status_ss=d892c172d477b9d8f53e3a6229285dd8; Path=/; Domain=toutiao.com; Max-Age=2592000; HttpOnly; Secure; SameSite=None
set-cookie: sso_uid_tt=b2ab94b926277554cef74291a1e23935; Path=/; Domain=toutiao.com; Max-Age=5184000; HttpOnly
set-cookie:sso_uid_tt_ss=b2ab94b926277554cef74291a1e23935; Path=/; Domain=toutiao.com; Max-Age=5184000; HttpOnly; Secure; SameSite=None
set-cookie:toutiao_sso_user=893aaca56a87090a729ad0eede82e55c; Path=/; Domain=toutiao.com; Max-Age=5184000; HttpOnly
set-cookie:toutiao_sso_user_ss=893aaca56a87090a729ad0eede82e55c; Path=/; Domain=toutiao.com; Max-Age=5184000; HttpOnly; Secure; SameSite=None
set-cookie:n_mh=BeOyQzO-cLr1SIXI014bhcrMEP81myfFv6SWp805Fpc; Path=/; Domain=toutiao.com; Max-Age=10368000; HttpOnly
timing-allow-origin: *
vary:Accept-Encoding
via:vcache6.cn2586[317.0]
x-janus-mini-api-forward:Janus-Mini(fast)
x-tt-logid: 202108312229170102121380514845D63E
Copy the code

1. What action was made to what address?

• Using POST
• Target domain name: sso.toutiao.com
• Goal: path: / quick_login/v2

2. What information was carried and returned?

• Carry information
  • Post body, data format is form.
  • You want to get the data in JSON format.
  • The existing cookies
• Return information

  • Data format JSON

  • Information about multiple cookies

3. Why can I remember the login state when I enter the page next time? (cookies and token)

• Session+cookie
  • Session is the unique identifier of the user generated by the server. After parsing, the server can identify the user and then return the user information.
• JWT – JSON Web Token
  • The token is not stored in a cookie. When a client initiates a GET request, the client cannot automatically carry the token. Instead, the client needs to place the token in the appropriate location and send the token to the server.
  • Scenario: Three-party authentication

Rich media

1. Video playback

• Status code: 206 indicates Partial Content. Requests are always sent during pausing or dragging the progress bar. These requests are part of the entire video resource.
• How do I determine which part of the total resource is currently returned? : Request Headers: range; Response: Content-Range
• Progressive play
• Live video protocol

2. Upload files

• What if your page needs to support image uploads? → Form submission
• What if your page needs to support video uploads? → Large resources, upload time may be very long, the use of a request, once the failure of the need to start again → Web file upload solutions

Practical application (browser, Node)

reference

www.cnblogs.com/lauhp/p/897…

www.cnblogs.com/brxHqs/p/11…