Note: the following content is easy to note, belongs to the unformed article, please do not refer to

Network based

Computer network architectures fall into three categories

• The OSI system
• TCP/IP system
• Five layer system

TCP and UDP

TCP is a connection-oriented, reliable, byte stream based transport protocol

• Connection-oriented: Three handshakes are required before data transfer between the client and the service, and four handshakes are required before disconnection
• Reliable; Stateful (keeping track of what data was sent and what was accepted); Controllable (automatically adjust the sending speed or retransmission when the network deteriorates and packet is lost)
• Byte stream: UDP is based on packets. TCP converts packets into byte streams for state maintenance

agreement	TCP	UDP
Whether connection	There is no	There are
reliable	If no, flow control is not applicable	If yes, use flow control
Number of connected objects	multiple	A single
transport	message	Byte stream
The first overhead	small	big
Usage scenarios	Video conference, live broadcast	The file transfer

Three-way handshake

Verify that both parties have the ability to send and receive

SYN synchronization sequence number

ACK confirmation number

Seq serial number

• To avoid confusion with previously connected data segments, each initial sequence number is generated when the next link is established
• During connection establishment, SYN is used to enable the TCP at both ends to synchronize the ISN exchange

Four times to wave

After receiving the FIN packet, the server does not return the FIN packet immediately. The SERVER sends the FIN packet only after all packets are sent. Therefore, an ACK indicates that a FIN has been received from the client, and the FIN is sent after a period of time

DNS

The DNS protocol provides a host name to IP address translation service, which is often referred to as the domain name system. It is an application-layer protocol that runs on top of UDP and uses port 53.

The DNS uses UDP to avoid connection delay caused by TCP

Recursive query

After the query request is sent, the DNS server sends the request to the lower-level DNS server and returns the final query result to the user. With recursive queries, the user only needs to issue a query request once

Iterative query

After a query, the DNS server returns the query result. The next level of query is requested by the user. With iterative queries, users need to make multiple query requests

The HTTP protocol

The characteristics of

• Reliable,
• Request response
• Content variety

disadvantages

• clear
• Team head block
• stateless

Message structure

Start line + header + blank line + entityCopy the code

Request method

• GETThe request data
• POSTSubmit data
• PUTModify the data
• DELETEDelete the data
• HEADObtaining meta information
• OPTIONSList available methods

GET and POST

• Cache Angle, GET is cached by the browser, POST is not
• Data length, GET2048 characters
• Security, GET in the URL, in the body of the POST request
• Encoding, GET can only be a URL, POST can only be
• Repeatable lines, GET does no harm, POST does not
• GET packets are sent once, POST headers and entities are sent separately

Status code

• 1XX has been accepted and will be processed
  • 101 Upgrade HTTP to WebSocket
• 2XX has been successfully processed
  • 204 There is no body data after the response header
• 3 xx redirection
  • 301 permanent redirect
  • 302 Temporary redirect
  • 304 Negotiated Cache
• 4XX Client error
  • 400 Request error
  • 401 unauthorized
  • 403 has blocked
  • 404 not found
  • Method 405 is not allowed
• 5XX Server error
  • 500 The server has an internal error
  • 502 Gateway Problems

The data transfer

Fixed length

Set content-Length: 10 field in the response header

u

The response header is set with transfer-encoding: chunked field, content-Length field is ignored, and dynamic Content is continuously pushed based on long connections

A large file

HTTP1.1 uses range requests

Accept-Ranges: bytes
Content-Range: bytes 0-9/100
Copy the code

Specific can see next three big guy’s relevant blog

HTTP/1.x

Can not achieve state management and there is queue head blocking

Note: queue head blocking means that when one request in a sequence of sequential requests is blocked for some reason, all subsequent requests are blocked as well

methods

• 1.0 GET the POST of the HEAD
• 1.1 PUT the DELETE OPTIONS

The cache

• 1.0 Expires and last-modified
• 1.1 cache-control and Etag

Breakpoint Continuation (large file)

Rang field in 1.1

Team head block

1.1 Concurrent Connection and Domain Name Sharding

HTTP/2

TCP packet header blocking is at the packet level. If the previous packet is not received, subsequent packets will not be uploaded to HTTP

HTTP queue header blocking occurs at the HTTP request-response level, where subsequent requests block before the first request is processed

Binary framing

Split the original Header + entity part into binary frames (Header frame, Data frame)

• Both communication parties can send binary frames to each other. This bidirectional sequence of binary frames is also calledflowHTTP/2 uses streams to communicate multiple data frames over a SINGLE TCP connectionmultiplexingThe concept of.
• Streams with different ids are out of order. Streams with the same ID are transmitted sequentially. Binary frames of the same ID stream will be assembled upon arrival.

The head of compression

Header fields take up large space, such as User-Agent, Cookie, Accept, Server, and Range. 2.0 uses HPACK algorithm for compression, mainly including

• Create a hash table between the server and the client, and store the fields used in this table. Then when transferring the values that have appeared before, you only need to transfer the index to each other.
• For integer and string Huffman encoding, the principle of Huffman encoding is to first establish an index table for all the characters that appear, and then make the characters that appear more frequently correspond to the index as short as possible. Such index sequence is also transmitted during transmission

Server push

In the past, the client requested it and the server answered it. Now it is a request for an HTML file, and the server can return the HTML together with other resource files referenced in the HTML to the client, reducing the wait of the client.

HTTP/HTTPS and 3

HTTPS

HTTPS = HTTP + SSL/TLS

Asymmetric encryption is used to realize identity authentication and key negotiation. Symmetric encryption algorithm uses the negotiated key to encrypt data and verifies the integrity of information based on hash function.

The TLS / 1.2 a handshake

HTTP/3

QUIC is based on UDP and is the bottom support protocol in HTTP/3. This protocol is based on UDP and takes the essence of TCP to achieve a fast and reliable protocol

Cross domain

Same-origin policy: Access resources of the same protocol, domain name, and port.

• The Ajax request could not be sent
• Cookie, LocalStorage, and IndexDB cannot be read
• DOM and JS objects cannot be retrieved

JSONP

Principle: Using

Features: Good compatibility, supports only GET, has XSS attack risks, and supports both the front and back ends

Process:

• Create A callback function, A, that accepts data sent by the target server
• Create A script tag that will assign the cross-domain API to the SRC attribute with the function name of the callback A as the URL parameter. callbakc=A)
• The server concatenates the function name passed in with the data it needs to give you into A string (A(data)) and returns

Example:

// client
function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) = > {
    let script = document.createElement('script')
    window[callback] = function (data) {
      resolve(data)
      document.body.removeChild(script) } params = { ... params, callback }// wd=b&callback=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join('&')}`
    document.body.appendChild(script)
  })
}
jsonp({
  url: 'http://localhost:3000/say'.params: { name: 'admin' },
  callback: 'show'
}).then(data= > {
  console.log(data)
});

// server
let express = require('express')
let app = express()
app.get('/say'.function(req, res) {
  let { name, callback } = req.query
  console.log(name) // admin
  console.log(callback) // show
  res.end(`${callback}('Password')`)
})
app.listen(3000.() = > {
  console.log('server is on http://localhost:3000')})Copy the code

CORS

Principle: The server uses the HTTP header access-Control-allow-origin to set the conditions for allowing Access to resources

Features: Mainly rely on back-end implementation

The browser automatically adds an Origin field in the request header to indicate which source the request came from. The server takes the request and responds with an access-Control-Allow-Origin field. If Origin is not in the range of the field, the browser intercepts the response

The OPTIONS method is used to send the precheck request and check whether the precheck response meets the request in progress

Proxy server /Nginx reverse proxy

The same origin policy is the standard that browsers need to follow, but not if the server is making requests to the server

Principle: The proxy server accepts the client request and forwards it to the target server. The target server sends the response to the proxy server, which forwards the response to the client

websocket

Principle: WebSocket and HTTP are both application layer protocols based on TCP to achieve full-duplex communication between the browser and the server

postMessage

How it works: THE HTML5 API allows limited communication between scripts from different sources in an asynchronous manner

// client
<iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe>
<script>
  function load() {
    let frame = document.getElementById('frame')
    frame.contentWindow.postMessage('I love you'.'http://localhost:4000') // Send data
    window.onmessage = function(e) { // Accept the returned data
      console.log(e.data) I don't love you}}</script>

// server
window.onmessage = function(e) {
  console.log(e.data) / / I love you
  e.source.postMessage('I don't love you', e.origin)
}
Copy the code

The agent

Forward agent

The proxy can be used to access known server addresses that cannot be accessed originally, while the proxy can hide user information externally.

User 1 \ user - agent -> server/user 3Copy the code

Example: Science on the Internet

The reverse proxy

A proxy server is pushed between the client and server, and all requests are managed through the proxy server.

User 1 server 1 \ / User 2 -> Master server -> Server 2 / user 3 Server 3Copy the code

Example: Taobao has a master server, which has many small servers. When users visit, they access the master server’s address (public IP), and the master server assigns specific small servers (private IP) to handle your request.

reference

• Ternary blog – Network protocol
• Consolidate your HTTP knowledge
• Relearn TCP/IP
• Status code

Network security

XSS

Cross-site scripting attacks. The target site is injected with malicious scripts, which are executed when accessed

Storage type

Malicious scripts are stored on the server, and the front and back ends are not filtered properly

reflective

Inducing access to urls with malicious code and executing malicious code after opening the URL

The DOM model

Malicious code is executed when inducing data with malicious code to be inserted into the DOM

Note: Inline event listeners and link jumps can both run strings as code

Preventive measures:

• The front and back ends escape the data
• Content Security Policy allows only resources in the same domain to be loaded
• The input content is restricted. Special characters are prohibited
• HTTPOnly, which prevents JavaScript from accessing cookies

CSRF

Cross-site request forgery. The attacker lures the victim to a third-party site, where a cross-site request is sent to the targeted site

Preventive measures:

• Add verification code for core operations such as transactions
• Determine the source of the request and check the Referer
• The Samesite property does not allow third parties to use cookies
• With tokens, the server generates them and the client carries them with each request

Click on the hijacked

The attacker embedded the website to be attacked in its own web page by nesting iframe, and set iframe as transparent, revealing a button in the page to induce users to click

Preventive measures:

• X-FRAME-OPTIONS

DDos

A large number of requests are sent in a short period of time, exhausting server resources and causing the server to break down

• Backup site, only prompt function
• Bandwidth capacity
• The SOURCE server is preceded by the CDN. If attack domain name, CDN can block; If I attack the source server directly, I bought an elastic IP address, which can dynamically mount the host instance and change the address if it is attacked

reference

• You must understand Web security
• About CSRF and CSRFToken
• DDos