HTTP protocol as an important front-end development of basic knowledge, but many non-computer professional background of code farmers soft. The author systematically studied the basic content of THE HTTP protocol through the book Illustrated HTTP, and tried to describe the key content of the HTTP protocol in a more concise language, so as to help students who do not like reading to save time.

Small class the teacher

• Introduction to HTTP
• The HTTP version
• The HTTP message
• The Web server
• HTTPS
• Web Security Precautions
• summary

Introduction to HTTP

The article “Illustrated HTTP” describes HTTP’s role in the network as follows:

The Web uses a Protocol called HyperText Transfer Protocol (HTTP) as the specification to complete a series of operation processes from the client to the server. And agreement refers to the stipulation of rules. The Web is built to communicate over the HTTP protocol, so to speak.

The HTTP protocol defines how a Web client requests a Web page from a Web server and how the server passes the Web page to the client. The HTTP protocol adopts the request/response model. The client sends a request packet to the server. The request packet contains the request method, URL, protocol version, request header, and request data. The server responds with a status line containing the protocol version, success or error code, server information, response header, and response data.

HTTP is a stateless protocol. The protocol itself does not save the state of the communication between the request or response. Therefore, the two parties cannot know the identity and status of the other. This is also an important reason for Cookie technology: client-side state management. The browser automatically keeps cookies according to the set-cookie header information in the response packet sent from the server. Each time a client sends an HTTP request, it carries a Cookie in the request packet, which serves as an identifier for the server to identify the status of the client.

TCP/IP protocol family

To better understand the HTTP protocol, we must first look at the TCP/IP protocol family. HTTP is a subset of the TCP/IP protocol family, which is the most basic protocol on the Internet. The TCP/IP protocol family is divided into the following four layers (network basics, it is best to remember) :

• The application layer

The application layer defines the communication protocol for providing application services to users, such as:

The TCP/IP protocol family prestores various common application service protocols. For example, File Transfer Protocol (FTP), Domain Name System (DNS), and HTTP.

The DNS resolves domain names (for example, www.baidu.com) and IP addresses (for example, 119.75.217.109).

• The transport layer

The transport layer connects to the upper-layer application layer and provides a protocol for data transmission between two computers in a network connection.

There are two different protocols at the transport layer: Transmission Control Protocol (TCP) and User Data Protocol (UDP).

The TCP protocol is full-duplex, that is, sending and receiving data are synchronized, just like we make a phone call, we can speak and hear at the same time. TCP, which uses three handshakes and four waves to establish and disconnect connections, is more reliable during transmission but less efficient than UDP.

UDP is connectionless, meaning that a connection does not need to be established before data can be formally transmitted. UDP does not guarantee orderly and unlost transmission to the peer, which means it is not stable, but it is also more efficient and lightweight than TCP.

• The network layer

The network layer specifies the route through which the data is transmitted to the other party’s computer (IP protocol, etc.).

The network layer is used to select a transmission route among a number of options when transmitting between multiple computers or network devices. The road map that provides with ctrip goes home function is same.

• The link layer

The hardware that handles the connection to the Network, including the device drivers that control the operating system, the hardware, the NIC (Network Interface Card), and the physically visible parts such as optical fibers (and all transmission media such as connectors). Hardware categories are within the scope of the link layer.

The traffic flow for a typical Web application looks like this:

When the sender transmits data between layers, each layer is marked with the header information of the layer. On the contrary, when the receiver transmits data between layers, it will remove the corresponding header information after each layer.

Introduction to serial connections, persistent connections, piped persistent connections, and HTTP /2.0 multiplexing

• Serial connection: The connectionless nature of HTTP, which means that only one request can be processed per connection and the connection is disconnected immediately upon receiving a response. In HTTP/1.0 (known as serial connection or short connection, short polling), the TCP connection is disconnected after each HTTP communication, so a new connection needs to be established for each new HTTP request. But with dozens of HTTP requests on the web, it’s easy to reach the browser’s request limit, and each request creates a new TCP connection (three handshakes and four goodbyes each time), which greatly increases the communication overhead.
• Persistent connections: To solve this problem, persistent connections (also known as long connections, long polling) are proposed. Within a certain period of time, as long as neither end of HTTP requests under the same domain name requests to disconnect, the TCP connection status is maintained, and other requests can reuse the connection channel. HTTP/1.1 implements and defaults all connections to be persistent, which reduces the network resources and communication time wasted by TCP handshakes when clients make multiple HTTP requests. However, persistent connections are in blocking mode. The next request cannot be initiated until the last response is returned. If the last response has not been returned, the next request will have to wait (often referred to as a thread blocking).
• Piped persistent connections: Piped allows you to send the next request and return the response in sequence without waiting for the response to return. Modern browsers do not piped by default. (I won’t say much about the information I have collected in this respect.)
• HTTP/2.0 multiplexing: Each HTTP request has a sequence identifier, so the browser can make multiple requests concurrently, and the server receives the data and reorders it into different request packets based on the sequence identifier without causing data confusion (see this article for details). Similarly, the server can concurrently return multiple responses to the browser, which then reorder the response packets according to the sequence identifier and group them into their respective requests. In addition, all requests under the same domain name reuse the same TCP connection, greatly increasing the maximum concurrency of the server.
• WebSocket: WebSocket is a full-duplex protocol proposed by HTML5 for the communication between the client and the server. The client initiates a request. After the connection is established, the client can actively send requests to the server and the server can actively push information to the client.

Look at the picture to distinguish three kinds of links:

In figure (a) : A serial connection must establish a new TCP connection each time it initiates a request.

(b) : Persistent connection Multiple HTTP requests can reuse the same TCP connection, but the next request must be made after the last response returned.

In figure (c) : Pipelined persistent connections can also reuse the same TCP connection and can be made without waiting for multiple HTTP requests, but the responses must be returned in order.

URI

HTTP uses URIs to locate resources on the Internet. Concept:

• Universal Resource Identifier (URI)
• Universal Resource Locator (URL)
• URN(Universal Resource Name).

Personally, A URI is a general term for different representations of a resource file. For example, a file a.html can be represented either by the file name A.HTML, the file path www.baidu.com/a.html, or even by an identifier such as URN :a:1535-3613. Their relationship is as follows:

The HTTP message

The information used for HTTP protocol interaction is called HTTP packets. The HTTP packet on the client is a request packet, and the HTTP packet on the server is a response packet.

A request packet consists of a request line (request method and protocol version), a request header (request URI and client information), and a content entity (user information and resource information, which can be empty).

The response packet consists of the status line (protocol version and status code), the response header (server name and resource identifier), and the content entity (resource information returned by the server).

Request method

• GET: The GET method is used to obtain server resources
• POST: The POST method is generally used to transport the entity body
• PUT: The PUT method is used to transfer files
• DELETE: The DELETE method deletes files
• HEAD: The HEAD method is used to obtain the packet header without returning the packet body
• OPTIONS: The OPTIONS method is used to ask for the method supported by the request URI resource

The concept is very simple very insightful, not quite understand the application scenario of the own Baidu ~~

Status code

The HTTP status code indicates the return result of the HTTP request from the client, identifies whether the server processes the request properly, and indicates the error of the request.

The first field

Here are the field names and functions in the request header and response header:

The first content is more, the key memory browser commonly used some fields on the line:

Two kinds of requests

When browsers send CORS requests (cross-domain requests), they divide the requests into simple requests and complex requests.

In our daily work, common simple requests can be categorized as follows:

1. The request method can only be HEAD, GET, or POST
2. No user-defined request header
3. Content-TypeIt can only be of these kinds:

text/plain multipart/form-data application/x-www-form-urlencoded

Complex requests:

1. Ajax requests for the PUT, Delete methods
2. Sending AN Ajax request in JSON format (such as post data)
3. Ajax requests with custom headers

If it is a simple request, it is executed first and judged later. The execution process is roughly as follows:

The browser detects that the request is a CORS request and adds an Origin field (which contains the page source information) : Protocol, domain name, port) ====> Server receives the corresponding processing (compared with the origin, server to determine whether the source accepted) returns the result to the browser ====> browser to check whether the response header allows cross-domain information ====> allow, then as nothing happened. No, the browser throws an error message.

Complex request When a request occurs, if it is a CORS request, the browser sends an option request in advance. This behavior of the browser is called a precheck request (note that a precheck request does not occur if it is not a cross-domain request, such as a reverse proxy).

//vue.config.js.devServer: {
    port: 8080.// Configure the port
    open: true.// Project startup automatically opens the browser
    compress: true.// Start compression
    overlay: { // Set the browser overlay to display both warnings and errors
      warnings: true.errors: true
    },
    // Set the request reverse proxy
    proxy: {
      '/api': { // The matching character of the interface to be proxied
        target: process.env.BASE_URL, // Domain name of the interface
        secure: false.changeOrigin: true}}},...Copy the code

HTTPS

HTTP itself has no privacy, so the data transmitted over HTTP is essentially streaked over the web in clear text. To solve this problem, various encryption technologies have emerged:

• Symmetric encryption: unique keykey1It can be used for encryption or decryption. Such encryption requires both parties to have a keykey1If the first transmission is intercepted by a third party, game over.
• Asymmetric encryption: Public keykey3And a private keykey2Can be used for corresponding encryption and decryption, can be used for public key encryption and private key decryption, can be used for private key encryption and public key decryption. The server generates a pair of keys. One private key is kept on the server, known only to itself, and the other is the public key, which can be freely distributed for anyone to use. The plaintext encrypted by the public key on the client needs to be decrypted using the private key. Asymmetric key The encryption and decryption processes use different keys, encryption and decryption are asymmetric, so it is called asymmetric encryption. Compared with symmetric key encryption, asymmetric encryption does not need to share the key between the client and the server. As long as the private key is not issued to any user, the public key cannot be decrypted even if it is intercepted on the Internet. The stolen public key is useless.
• Mixed encryption: The server uses the asymmetric private key firstkey2Encryption Key for symmetric encryptionkey1And pass it to the client, which uses the asymmetric encryption public keykey3Decrypt the symmetric encryption keykey1Both parties have the keykey1Begin to utilizekey1Encrypted communication. Disadvantages: The middleman can generate an asymmetric encryption public key to replace the server’s public key and send it to the client, but the client cannot verify the credibility of the public key.
• SSL: You need to apply for a certificate from a certificate authority (CA). The certificate contains the certificate signature and server public keykey3). When the client initiates an HTTP request, the server sends the certificate to the client. The client authenticates the certificate and decrypts the public key of the serverkey3, encrypts the symmetric encryption key generated by itself with the public keykey1And passed to the server, and finally usekey1Encrypt the call. As for security, because the private key is institutional, you can avoid third-party certificate forgery. And even if the server public key is obtained, the public key cannot be decryptedkey3Encrypted symmetric encryption keykey1.

HTTPS is based on the HTTP protocol and encrypts data, authenticates the identity of the other party, and protects data integrity over SSL or TLS (which can be regarded as SSL3.0). Features are as follows:

• Content encryption: using mixed encryption technology, the middle can not directly view the plaintext content
• Authentication: The client accesses its own server through certificate authentication
• Protect data integrity: prevent transmission of content by the middleman impersonation or tampering

The differences between HTTPS and HTTP are as follows:

1. For HTTPS, you need to apply for a certificate from a CERTIFICATE authority (CA). Generally, there are few free certificates and you need to pay a fee.
2. HTTP runs over TCP, and all content transmitted is in plain text. HTTPS runs over SSL/TLS, which runs over TCP, and all content transmitted is encrypted.
3. HTTP and HTTPS use completely different connections and ports (80 and 443).
4. HTTP connections are simple and stateless; HTTPS is a network protocol built by HTTP+SSL for encrypted transmission and identity authentication. It can effectively prevent carrier hijacking and solve a big problem of hijacking prevention. It is safer than HTTP.

const xss = require('xss')
let html = xss('
XSS Demo
')
// -> 
XSS Demo
< script> alert("xss"); < /script>
Copy the code

https://juejin.im?id=5cd0438c6fb9a031ec6d3ab2
Copy the code

<img src="https://juejin.im? id=5cd0438c6fb9a031ec6d3ab2" />Copy the code

summary

The above is the front end of the NEED to master HTTP related knowledge, ability to limit some knowledge may not be very clear, please also read the officials have not clear place to directly criticize and correct.

The front end is a huge subject, although the threshold of entry requirements are not high, but its huge knowledge system let people look at the ocean. Boy as a half-way out of the front small white, planning to follow Daniel’s guidance (thank you) from the beginning to learn the front, every knowledge point will make a summary, deepen their understanding and convenient for others to refer to.

You are advised to read another article about the HTTP protocol HTTP protocol super detailed, for HTTP in more detail.