On the summary of the knowledge of the network, MY previous article has also been summed up

  • Big front-end interview questions – what happens between entering the URL and rendering the page! (Most comprehensive extended explanation)
  • Front-end NETWORK HTTPS encryption mechanism
  • This article addresses Http caching – mandatory caching and negotiated caching

Now I want to summarize TCP/UPD/HTTP/HTTPS/ cross-domain knowledge

Computer network architecture

Computer network architecture can be divided into three types :OSI architecture, TCP/IP architecture and five layer architecture

TCP/IP architecture: contains a series of network protocols that form the foundation of the Internet. It is the core protocol of the Internet and is widely used in local area network and wide area network

TCP protocol

define

Transmission Control Protocol Transmission Control Protocol

  1. Transport layer protocol
  2. Based on theTCPThe application layer protocols areHTTP 、SMTP,FTP,Telnet 和 POP3

The characteristics of

  1. Connection-oriented: TCP connections must be established before data transmission through TCP. Release the connection after the transfer is complete
  2. Full-duplex communication: After a TCP connection is established, both parties can send data
  3. Data sent over a TCP connection: no loss, no error, no repetition, sequential arrival
  4. Byte stream oriented: Data is transmitted as a stream

The advantages and disadvantages

  • Advantages: Reliable data transmission
  • Disadvantages: Low efficiency (need to establish connections, send confirmation packets, etc.)

Application Scenario (Application-layer protocol of the application)

When the communication data is required to be reliable, the data must be accurately transmitted to the other party using TCP protocol, such as: file transmission: HTTP, HTTPS, FTP protocol; Mail transmission: POP, SMTP and other protocols

  • The world wide web:HTTPagreement
  • File transfer:FTPagreement
  • Email:SMTPagreement
  • Remote terminal access:TELNETagreement

Message format

  • TCP is byte stream oriented, but the transmitted data unit = packet segment
  • Packet segment = header + data 2 parts
  • All functions of TCP are reflected in the function of each field in the header. The following describes the analysis of the header: The first 20 characters of the header are fixed and the following 4N bytes are added as required. Therefore, the minimum length of the TCP header is 20 bytes

Description of the corresponding field:

  1. Serial number (packet segment serial number) : Serial number (4 bytes) of the first byte of the data to be sent in this message
  2. ACK number: Indicates the sequence number of the first data byte in the field of the next packet that is expected to be received. It is four bytes. If the ACK number is N, it indicates that all data up to n-1 have been correctly received
  3. SYN (synchronization bit) : Indicates the synchronization sequence number when a connection is established. SYN = 1, ACK = 0 indicates that this is a connection request segment. SYN = 1, ACK = 1 indicates that this is a connection request response packet segment
  4. FIN (Stop control bit) : Release the connection. If FIN =1, the sender of the packet has finished sending data and needs to release the connection

TCP The process of establishing a connection

TCP requires a three-way handshake to establish a connection

  1. The client sends a connection request to the server. Request packet: The client sends a SYN packet to the server. At this time, the client is in the SYN_SENT state and waits for the server to confirm

    Message information:

    • Synchronization flag bit set to 1: SYN=1
    • Randomly select a starting serial number: seq = x
    • No data

  2. After receiving a connection request packet segment, the server sends a connection confirmation packet to the client if it agrees to establish a connection. Assign TCP cache and variable to the TCP connection, and the server enters the synchronous received state (SYN_RCVD)

    • Synchronization flag bit set to 1: SYN = 1
    • Make sure the flag bit is set to 1: ACK = 1
    • Select a random starting number: seq = y
    • The confirmation number field is set to ack = x+1
    • No data

  3. After receiving the confirmation packet, the client sends the connection confirmation packet to the server. Assign TCP cache and variable to this TCP connection. The client and server are in the ESTABLISHED state and can send data

    • Make sure the flag bit is set to 1: ACK = 1
    • Serial number: seq = x +1
    • The confirmation number field is set to ack = y + 1
    • Portable data (set to 1 because SYN is not available; No serial number consumption if no data is carried)

Note:

  1. TCP provides full-duplex communication. Therefore, application processes on both sides can send data at any time
  2. During any of the three handshakes, no reply is received from the opposite party, which will be resend

Why three handshakes?

Prevents the server from receiving invalid connection request packets and waiting for client requests, resulting in deadlock and resource waste analysis:

In the failure of the request message scenario, the client sends the first connection request message fields without loss, but in a certain network node stranded for a long time, lead to delay until some time after the release connection to the server, it is a failure message segment already, don’t know, but the server connection request message of its receipt of this failure, be mistaken for the client A new connection request is sent, and a confirmation message segment is sent to the client

If there is no three-way handshake, the connection is established as long as the server sends the confirmation packet. However, the client does not send any request for establishing a connection and does not send data to the server. However, the server considers that a new TCP connection has been established and waits for data to be sent by the client, resulting in a deadlock state In this case, the client does not acknowledge the connection to the server. Because the server does not receive the confirmation message from the client, it knows that the client does not request to establish a TCP connection

The process of releasing a connection

  • At the end of the communication, both sides can release the connection, with a total of four waves of the hand
  1. The client initiates an interrupt request and sends a FIN packet, and the server receives the FIN packet.
    • Stop control bit set to 1:FIN = 1
    • Packet serial number Set to the serial number of the last byte of the data transmitted by the front-end plus 1:seq = U
    • Portable data

    (FIN = 1 packets carry a serial number even if they do not contain data.)

  2. The Server sends an ACK telling the client that I received your request but am not ready. Please wait for my message. In this case, the client enters the FIN_WAIT state and continues to wait for the packet sent by the FIN on the Server
    • Make sure the flag bit is set to 1:ACK = 1
    • The sequence number of the packet is set to the sequence number of the last byte of the data transmitted by the front-end plus 1:seq = V
    • The confirmation number field is set to ack = U + 1
  3. When the server confirms that data is sent, it sends a FIN packet to the client to tell the client that data is sent and the server is ready to close the connection
    • Stop control bit set to 1 :FIN = 1
    • Make sure the flag bit is set to 1 :ACK = 1
    • Packet segment number; seq = w
    • Repeat the confirmation number field sent last time; Set this to ack = u + 1
    • Portable data

    (FIN = 1 packets consume a sequence number even if they do not carry data.)

  4. After receiving the FIN packet, the client does not trust the network and is in the TIME_WAIT state because the server does not know to close the PACKET. If the server does not receive the ACK, the client can retransmit the PACKET. When the server receives an ACK, it knows it is ready to disconnect. If the client does not receive a reply after 2MSL, the server is shut down and the client can close the connection
    • Make sure the flag bit is set to 1: ACK = 1
    • Sequence number of the packet segment: seq = U + 1
    • The confirmation number field is set to ack = W + 1
    • Portable data

    (FIN = 1 packets consume a sequence number even if they do not carry data.)

Why do you need four waves?

To ensure that both communicating parties can notify each other of the need to release disconnection analysis: Because TCP is full-duplex, both parties can send and receive messages. Even when the connection is disconnected, neither party can receive and send messages When host 1 sends a disconnection request and Host 2 sends a reply confirming the disconnection message, it only indicates that host 1 has no data to send to host 2, but host 2 can send data to host 1 and host 1 can receive data from host 2. In this case, the TCP connection is in the state of one-way disconnection and half-closed When host 2 also sends a disconnection request, and host 1 replies to confirm the release of connection information, it means that host 2 has no data to send to host 1. When both parties cannot communicate, TCP is truly disconnected

Why does the client wait 2MSL before closing the connection?

What is the function of time-wait? MSL = The longest lifetime of the packet segment Cause:

  1. To ensure that the last connection release packet sent by the client can reach the server, so that the server can release the connection normally

    Analysis:

    The last connection release confirmation packet sent by the client may be lost. If the server does not receive the last connection release confirmation packet, the server does not close the connection but resends the connection release packet due to timeout

    It is assumed that the client closes the connection after 2MSL of time. When the last connection release confirmation message is lost, the server resends the connection release message, and the client cannot receive the connection release message re-sent by the server, so it will not send it. The connection release acknowledgement message segment eventually causes the server to fail to enter the shutdown state

  2. Prevents invalid connection request messages from appearing in the connection

After the client sends the last connection release request message, all the message segments generated during the connection duration will disappear from the network after 2MSL, that is, the connection request message that has long expired will not appear in the next new connection

UDP protocol.

User Datagram Protocol

  1. Belongs to the transport layer protocol
  2. Udp-based application layer protocols includeTFTP,SNMP 与 DNS

The characteristics of

  1. None connection: Before using UDP to transmit data, you do not need to establish a UDP connection
  2. Unreliable: After a UDP packet is sent, it does not matter whether it reaches the receiver
  3. Packet-oriented: Data is transmitted as data packets (packets)
  4. No congestion control: Because the transmission is unreliable, that is, whether it reaches the receiver or not, no blocking control is required

The advantages and disadvantages

  1. Advantages: Fast speed
  2. Disadvantages: Messages disappear easily, especially when the network is poor

Application Scenario (Application Layer protocol)

High communication speed is required

  1. Domain name translation: DNS protocol
  2. File transfer: FTP protocol
  3. Network management: SNMP
  4. Remote file server: NFS protocol

Message format

There are two fields: the data field and the header field

Comparison between TCP and UDP

The HTTP protocol

Hypertext transfer protocol (HYPERtext Transfer Protocol), which belongs to the application layer, defines the rules of application process communication

Features:

  1. High transmission efficiency:
    • Connectionless: You do not need to establish an HTTP connection before exchanging HTTP packets
    • Stateless: Data is transferred without any history or state information. This feature simplifies server design and makes it easier for servers to support large numbers of concurrent HTTP requests
    • The transmission format is simple: the request only needs to pass the request method and path
  2. High transmission reliability:
    • TCP is used as the transport layer protocol
    • TCP is connection-oriented reliable transmission. A TCP connection must be established before packets are exchanged

Working mode Adopts request/response working mode

Description of HTTP packets

  • HTTP Data exchange at the application layer = packets
  • Packets are classified into request packets and response packets

The request message

  • Structure is divided into request line, request header, request body composition

  1. The request line
    • Function: declare request method, host name, resource path, protocol version
    • Structure: Composition = request method + request path + protocol version
    • Note: The space in the structure composition should not be small

Structure introduction:

  • Request method: Operation on the request object :GET POST DELET PUT
  • Request path: The request address part of the URL, defined as a uniform resource locator
  • Protocol version: Defines the HTTP version number,HTTP1.0 and HTTP2.0

Add: the difference between GET and POST methods

Technically speaking:

  1. GET requests can be cached, but POST requests cannot
  2. POST is safer than GET requests, because GET requests are contained in the URL and will be saved by the browser. POST does not, but in the case of packet capture, it is the same
  3. POST can transfer more data via the Request Body than GET
  4. Urls have a length limit that affects GET requests, but this length limit is browser-specific, not RFC specific
  5. POST requests support more encoding types without data type restrictions

In essence:

  • Both GET and POST are TCP connections, but GET generates one TCP packet and POST generates two TCP packets

    • For a GET request, the browser sends HTTP headers and data, and the server responds with 200.
    • For POST, the browser sends the header, the server responds with 100, the browser sends data, and the server responds with 200OK.

  • The sample

    Set: request packet using the GET method, URL = www.tsinghua.edu.cn/chn/yxsz/in… ; , HTTP1.1 version

GET/CHN /yxsz/index.htm HTTP/1.1

  1. Request header
    • Function: Declare partial information about client, server, or packet
    • Usage: Use the “header :value “format
  2. Request body
    • Function: Stores data to be sent to the server
    • Usage: 3 kinds in total
      • Data interchange
      • Key/value pair
      • Partial distraction property

Compares request packets and response packets

HTTP2.0

  • multiplexing

Greatly improved web performance compared to HTTP1.0, which resulted in the maximum number of requests due to head blocking, When many resources are requested on a page, queue header blocking causes the remaining resources to wait for other resource requests to complete before being requested at the maximum number of requests. Multiplexing was introduced in 2.0

In 2.0 there are frames (which represent the smallest unit of data and each frame identifies which stream it belongs to) and streams (streams of data made up of multiple frames). Multiplexing is in a TCP connection can exist multiple streams, that is, can send multiple requests, the peer end can be identified by the frame to know which request, through this technology can avoid HTTP1.0 queue head blocking problem, greatly improve transmission performance

  • Binary transmission

All of the performance enhancements in HTTP2.0 are in binary transmission. Prior to this, data was transmitted in text mode. The new encoding mechanism introduced in HTTP2.0 is that all transmitted data will be split and encoded in binary format

  • The Header compression

In 1.0, we transmitted the header as text, and in cases where the header carried cookies, we might have to repeat hundreds to thousands of bytes at a time In 2.0, HPACK compression format is used to encode the transmitted header, reducing the size of the header, and an index table is maintained in the two sides to record the occurrence of the header. The recorded header can be transmitted in the subsequent transmission process, and the peer end can find the corresponding value through the key name after receiving the data

  • The server Push

In HTTP2.0, the server can be on the client side after a request, take the initiative to push other resources, certain resources is the client will request, the server push technology can be used at this moment, in advance to the client to push the necessary resources, so that it can relatively reduce the delay time, of course, in the case of browser compatibility can be used to prefetch

HTTPS

HTTPS establishes SSL encryption layer over HTTP and encrypts transmitted data. It is the secure version of HTTP and is widely used for security-sensitive communication on the World Wide Web.

  1. Encrypt the data and establish a safe channel to ensure the data security in the process of data transmission
  2. Real identity authentication for the web site server

Contrast:

  1. HTTPS is a hypertext transfer protocol, and information is transmitted in plain text. Therefore, it has security risks. HTTPS addresses HTTP security risks by adding SSL and TLS between the TCP and HTTP network layers to enable packet encryption
  2. It is relatively easy to establish an HTTP connection. After the TCP three-way handshake, HTTP packets can be transmitted. However, after the TCP three-way handshake, HTTPS packets can be transmitted through SSL/TLS

How does HTTP address these three risks

  • The hybrid encryption method realizes the confidentiality of information and solves the risk of eavesdropping
  • Algorithm to achieve integrity, it can generate unique identification for data, identification used to verify the integrity of data, to solve the risk of tampering
  • Putting the server public key into the digital certificate solves the risk of impersonation

Mixed encryption

HTTPS uses a mixture of heap encryption and non-heap encryption

  • Asymmetric encryption is used to exchange session keys before communication is established, and asymmetric encryption is not used later
  • Symmetric session key is used to encrypt plaintext data during communication

Reasons for using hybrid encryption:

  • Symmetric encryption uses only one key, which is fast, and the key must be kept secret. Therefore, secure key exchange cannot be achieved
  • Asymmetric encryption uses two keys: public key and private key. The public key can be distributed arbitrarily while the private key is kept secret, which solves the key exchange problem but is slow

The algorithm

It can generate a unique fingerprint for the data to verify the integrity of the data and solve the risk of tampering

Before the client sends a clear through the fingerprint algorithm to calculate the clear, when sending out the fingerprint + plaintext encrypted together into a ciphertext backwardness to the server, the server after decryption, using the same cleartext based algorithm is sent, by comparing the client carry fingerprints and calculate the current fingerprint comparison, if the same fingerprint, states that the data is complete

The digital certificate

Client first ask the server for the public key, then the information is encrypted with the public key, the server after receiving the ciphertext, with his private key to decrypt, but how to ensure that the public key is not been tampered with and trust, this needs with the help of a third party authority CA (digital certificate authentication institutions), the server public key in a digital certificate (issued by a digital certificate authentication institution), The public key is trusted as long as the digital certificate is trusted

The encryption process

It can be roughly understood as divided into six stages

  1. The client applies for HTTPS communication
  2. The server responds and passes the certificate to the client
  3. The client authenticates the certificate, obtains the public key, generates a symmetric encryption key, encrypts the key with the public key, and sends the key to the server
  4. The server receives the message, decrypts it with the private key, produces the symmetric key, and notifies the client that the HTTPS communication has been established after the SSL channel has been established
  5. After the shared key is exchanged successfully and HTTPS communication is established, the client and server use the shared key to encrypt communication
  6. The client is disconnected. Procedure

Browser cross domain

Because browsers have the same origin policy for security reasons, if the protocol, domain name, or port is different, the Ajax request will fail

Cross-domain solutions:

1.CORS

Cross-domain resource sharing CORS needs to be supported by both the browser and the backend. The browser will automatically enter CORS communication. The key to cORS communication is the backend, and cross-domain can be realized as long as the backend implements CORS

To enable CORS, set access-Control-allow-origin on the server. This attribute indicates which domain names can Access resources. If wildcard is set, all websites can Access resources

Browsers will classify CORS requests into two categories, simple and non-simple, and the browser will not treat these two types of requests the same

A simple request

  1. The request method is one of the three methods of HEAD POST GET
  2. HTTP header information does not exceed the following fields
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-type (limited to three valuesapplication/x-www-form-urlencoded,multipart/form-data,text/plain

If both conditions are met it’s a simple request,

For a simple request, the browser will CORS requests, is in the request header information, automatically add an Origin fields, to illustrate the source of the request (protocol + domain name + port), then the server will be according to this value to decide whether or not to approve this request, if agreed, the response returned the following additional response header information

Access-Control-Allow-Origin: http://juejin.com // consistent with Orign This field is required
Access-Control-Allow-Credentials: true // The field indicating whether cookies are allowed is optional
Access-Control-Expose-Headers: FooBar This field is optional
Content-Type: text/html; charset=utf-8 // Indicates the document type

Copy the code

In simple requests, the server must set the access-Contol-allow-Origin field at least

Non-simple request

For example, a PUT or DELETE request, or a Content-type of Application /json, is a non-simple request Non-simple CORS requests. Before a formal request, the server sends an OPTIONS query request, called a pre-check request, asking whether the server supports the request for the domain name of the web page and which header fields can be used. The SERVER sends an XMLHttpRequest request only after receiving a positive response

The method of prechecking the request is OPTIONS, which has several fields in its header

  • Origin: indicates which domain the request came from (must)
  • Access-control-requset-method: Lists the HTTP methods used for CORS requests (must)
  • Access-control-request-headers: Specifies the additional header fields that CORS requests will send, separated by commas

A high number of OPTIONS requests also degrades performance, so minimize OPTIONS requests by having the server add them to the request header

Access-Control-Max-Age: Number // The number is in seconds

Copy the code

Indicates how long the return of the precheck request can be cached, within which the precheck is not required, but the cache is valid only for the same URL

Cross-domain configuration of server CORS

The syntax damage of certain configuration items may differ between languages in back-end languages, but the content is the same to allow cross-domain sources of configuration

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://juejin.com
Copy the code

The access-Control-Allow-Origin field is a must in CORS cross-domain request. * indicates all sources. The browser will not send cookies.

Configure methods to allow cross-domain requests

Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT...
Copy the code

This field is also required and its value is a comma-separated string that indicates the request header field allowed by the method configuration for all cross-domain requests supported by the server

Access-Control-Allow-Headers: x-requested-with,content-type...
Copy the code

This is also required if there is a custom header field in the request header. It is a comma-separated string indicating all header fields supported by the server, not limited to whether the browser precheck request field configuration allows cookies to be sent

Access-Control-Allow-Credentials: true
Copy the code

This field is optional, and its value is a Boolean value that indicates whether cookies are allowed to be sent. By default, cookies are not included in the CORS request. If set to true, the server explicitly allows cookies to be included in the request and sent to the server together, this field can only be set to true. If the server does not want the browser to send cookies, delete this field to set the validity period of the precheck request

Access-Control-Max-Age: 1728000

Copy the code

In the preceding result, the validity period is 20 days (1728000 seconds), that is, the response is allowed to be cached for 20 days. During this period, if you send the interface request again, you do not need to send the precheck request, saving server resources

2.document.domain

This method can be used only when the secondary domain names are the same, for example, a.test.com and b.test.com. You only need to add document.domain = ‘test.com’ to the page to indicate that the secondary domain names are the same

3.JSONP

JSON takes advantage of the fact that the 

<script src="http://domain/api? param1=a">
</script>
<script>
function jsonp(data) {
    console.log(data)
}
</script>
Copy the code

JSONP is simple to use and compatible, but is limited to GET requests

4.postMessage

This approach can often be used to retrieve data from a third party page embedded in a page, with one page sending a message and the other identifying the source and receiving the message

// Send a message
window.parent.postMessage('message'.'http://test.com');
// Receive the message
cosnt mc  = new MessageChannel()
mc.addEventListener('message'.(event) = >{
    const arigin = event.origin || event.originalEvent.origin
    if(origin === 'http://test.com') {
        console.log('Verified')}})Copy the code

5.Node middleware proxy

How it works: The same origin policy is the standard that you need to follow. However, if a server requests a server, it does not need to follow the same origin policy. Therefore, we need to start a proxy server, which needs to do the following

  • Receive client requests
  • Forwards the request to the server
  • Get the server response data
  • The response is forwarded to the client

Agents in cli tools

  1. webpack

Proxy can be set up in Webpack to get interface proxy capability quickly

Copy the code
  1. Vue-cli

Using a:

module.export = {
    // ...
    devServer: {
        proxy: {
            '/api': 'http//www.hahaha.com'}}}Copy the code

As shown above, when you request/API/ABC interface will be acting to http://www.hahaha.com/api/abc to use 2: when you need multiple paths to be acting in the same target, that can be used

module.export = {
    deServer: {
        proxy: [{context: ['/api1'.'/api2'.'/api3'].target:'http://.hahaha.com',}}}Copy the code

Using three: when using the first way agent, agent/API, the final result is http://www.hahaha.com/api/abc, but sometimes we don’t want to agent/API, then you can path through pathRewrite attribute to rewrite

module.export = {
    deServer: {
        proxy: {'/api': {
           target:'http//www.hahaha.com'.pathRewrite: {'^/api':' '}
       }
    }
    }
}
Copy the code

This time will be agent/ABC/API interface to http://www.hahaha.com/abc

Use 4: By default, proxies do not accept backend servers that run over HTTPS and use invalid certificates. If you want to accept them, you need to set Secure: fasle

module.exports = {
  / /...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.hahaha.com'.secure: false}}}}Copy the code

Use 5: Configure a changeOrigin field. When it is true, a local virtual server will accept your request and the proxy will send the request. This field is required if you want to proxy across domains

module.exports = {
  // ...
  devServer: {
    proxy: {
      "/api": {
        target: 'http://www.hahaha.com'.changeOrigin: true,}}}}Copy the code

Use six: Configure multiple different agents

module.exports = {
  // ...
  devServer: {
    proxy: {
      "/api": {
        target: 'http://www.hahaha.com'.changeOrigin: true,},"/api2": {target: 'http://hahaha2.com'.changeOrigin: true.pathRewrite: {'^/api3' : ' '}
      }
    }
  }
}

Copy the code

In the local configuration of the proxy cross-domain, knowledge to solve the development of cross-domain problems, when the project is online, if there is a cross-domain situation need to back-end configuration cross-domain

6.Nginx reverse proxy

In order to ensure that the current domain can obtain static resources and interfaces, configure a proxy server through Nginx. The reverse proxy can access the cross-domain interface, and modify the domain information in the Cookie to facilitate the Cookie writing in the current domain.

Nginx is used for configuration. For example, page A is in the http://www.hahaha.com domain and interfaces are in the http://hahaha1.com:9999 domain

Nginx can then configure a proxy server with the same domain name as page A, both www.hahaha.com, to act as a springboard for reverse proxy access to the www.hahaha1.com interface

# Nginx代理服务器
server {
  listen       80; server_name www.hahaha.com; Location / {# reverse proxy proxy_pass HTTP://www.hahaha1.com:9999;  Proxy_cookie_domain www.hahaha1.com www.hahaha.com; index index.html index.htm; Add_header access-control-allow-origin HTTP: add_header access-control-allow-origin//www.hahaha.com;  
    add_header Access-Control-Allow-Credentials true; }}Copy the code

Reference article:

Interview with you: this is a comprehensive overview of the basics of computer networking

💗 front-end need to understand the computer network knowledge, this one is enough! (Illustrated, swastika word, like collection oh!)