The front end of the interview -http agreement

What is the http protocol

Web usage called HTTP (HyperText Transfer Protocol, Hypertext Transfer Protocol) protocol as a standard, complete from client to server and a series of operational processes. The agreement refers to the agreed rules. It can be said, Web is based on the HTTP protocol communication.

It is http3.0

TCP / IP protocol suite.

http is a subset of them. At different levels were divided into the following four:

• Application layer (http, DNS)
• Transport layer (data transmission, tcp three-way handshake and four wave)
• Network layer (transport route selection, IP protocol)
• Data link layer (hardware processing section)

IP protocol

Role is to transmit various data packets to each other (the IP address, MAC address)

TCP protocol

In order to more easily transfer large data, the data is divided into units to segment the data packet management, be able to confirm whether the data reaches the other side (to initiate three-way handshake)

What is https, and http What is the difference

HTTPS based on the HTTP protocol, is provided by SSL or TLS encryption data, verify each other's identity and data integrity protection &

- 内容加密：采用混合加密技术，中间者无法直接查看明文内容
- 验证身份：通过证书认证客户端访问的是自己的服务器
- 保护数据完整性：防止传输的内容被中间人冒充或者篡改  
复制代码

the difference:

• http clear text communications, https content will be encrypted
• http does not verify the identity of the communicating parties, https will be verified by certified
• http unable to prove the integrity of the message, there may have been tampered with, https protect data integrity: to prevent the transmission of content are posing as middlemen or usurp

TCP three-way handshake

A request issued by the client, will go through the http protocol layer of packaging, TCP protocol packaging layer, IP protocol layer of the packaging, repackaging Ethernet layer, and made express is the same, a process called encapsulation, good packaging after on the road (the physical layer by transport), reaches the delivery server begins to open, from outside to inside. Whether this process no one can absolutely reliable master data, so by the TCP three-way handshake

1, the sender sends a data SYN (synchronize) flag with other packet

2, the receiver receives back data packet with a SYN / ACK (acknowledgement) markers have been shown to convey acknowledgment information

3, the transmitting end with a return data packet ACK flag, representing the end of the handshake

If some stage inexplicably interrupted during the handshake, TCP protocol will once again send the same data packets in the same order

TCP's four wave

Client or server can initiate wave action.

(1) A client sends a FIN, for closing the client A to the server B transmits data.

(2) Server B receives the FIN, it sends back an ACK

(3) closes the server B A client connection, the client sends a FIN to the A.

(4) A client sends back ACK packet acknowledgment.

HTTP2.0 and new features compared to the HTTP1.X

status code

HTTP request that the client return results, identify the server process is normal, indicating that an error occurs in the request and so on.

• The received request is being processed 1XX

• 2XX success (this series that the request was properly processed)

  • 200 OK, expressed from the client to request the server side to be correctly processed
  • 204 indicates that the request is successful, the server does not return the resource (response packet does not contain the entity body portion)
  • Range request client 206, the request is successful

• 3XX redirect (show browser to perform the special processing) -301 moved permanently, permanent redirect means that the resource has been assigned a new URL

  • 302 found, temporary redirection means that the resource is assigned a temporary new URL
  • 303 see other, indicates the presence of another URL resources, you should use the GET method to get the resources (for 301/302/303 response, almost all browsers will automatically delete the message body and re-use GET requests)
  • 304 not modified, the server resource did not change, returned to the client cache file.
  • 307 temporary redirection, and 302 similar meaning, it is desirable to maintain the client requests the same method to request a new address

• 4XX client error, indicates that the client is the cause of the error lies

  • 400 request message syntax errors
  • 401 unauthorized, (unauthorized) The request requires authentication. For pages that require login, the server might return this response.
  • 403 forbidden, the server rejects the request.
  • 404 not found, the request means that the resource is not found on the server

• 5XX Server Error

  • 500 represents a server-side error occurred during execution of the request
  • 501 means that the server does not support a function of the current request needed
  • 503 indicates that the server is temporarily in overloaded or is down for maintenance, unable to process the request

What is DNS

The application layer protocol to provide domain name resolution services between IP addresses

Cross-domain issues

Protocol, domain name, any port in a different, cause problems because the browser's same-origin policy restrictions

• cors cross-domain resource sharing mechanism, ie10 more available, there is a simple request and preflight request two kinds.

  • Simple request,

    • Request method is get, post, head (HEAD request is only sent the request does not receive a responsive mode),
    • Request header only a few Accept, Accept-Language, Content-Language, Content-Type.
    • Content-Type header is only allowed values: application / x-www-form-urlencoded, multipart / form-data, text / plain

    Backend adaptation scheme: Add Access-Control-Allow-Origin in respones header in

  • Preflight request, adds a request options before a common cross-domain request for modifying headers to check whether the rear end of the front end to allow first set methods PUT, DELETE, CONNECT, OPTIONS the range, TRACE request sets a cause preflight Accept, headers other than Accept-Language, Content-Language, Content-Type in any one configuration, such as common token: authorization, caching mechanism cache-contorl Content-Type value set to a simple request is not allowed, such as the commonly used application / json

Preflight request to the backend needs to set more respones headers

- Access-Control-Allow-Methods代表可接受methods
- Access-Control-Allow-Headers代表可接受的headers修改
- Access-Control-Max-Age代表预检的残留时间，代表预检之后可以免预检的时间
复制代码

juejin.im/post/5c35f6…

• jsonp (JSON with padding) to request a link on the script in

function jsonp(setting){
  setting.data = setting.data || {}
  setting.key = setting.key||'callback'
  setting.callback = setting.callback||function(){} 
  setting.data[setting.key] = '__onGetData__'

  window.__onGetData__ = function(data){
    setting.callback (data);
  }

  var script = document.createElement('script')
  var query = []
  for(var key in setting.data){
    query.push( key + '='+ encodeURIComponent(setting.data[key]) )
  }
  script.src = setting.url + '?' + query.join('&')
  document.head.appendChild(script)
  document.head.removeChild(script)

}

jsonp({
  url: 'http://api.jirengu.com/weather.php',
  callback: function(ret){
    console.log(ret)
  }
})
jsonp({
  url: 'http://photo.sina.cn/aj/index',
  key: 'jsoncallback',
  data: {
    page: 1,
    cate: 'recommend'
  },
  callback: function(ret){
    console.log(ret)
  }
})
复制代码

Disadvantages: can only get request, with the back-end needs, can not find the cause of the error

websocket

Full-duplex communication for the server and the client, the server and the client initiates a connection, the connection will remain state

• Server without waiting for the client initiates a request, it can send data to the client
• Websoket little header information, the traffic can be reduced

http field of Upgrade: websocket, tells the server communication protocol changed

URI, URL, URN

HTTP protocol to use resources on the Internet a URI. concept:

URI (Universal Resource Identifier: Uniform Resource Identifier) ​​URL (Universal Resource Locator: Uniform Resource Locator) URN (Universal Resource Name: Uniform Resource Name).

URI is / resource / location identifier (/ punctuation to facilitate understanding) represented by a protocol program (http, ftp). Address URI string that identifies a Internet resource, and the resource designated URL (location located on the Internet). URL is a subset of URI

WEB security

xxs attack

Cross-site scripting attack, use the script tag, script injected into web pages as a means of

CSRF attacks

If there is a plus Nuggets concern GET interfaces, id parameter is concerned person Id, as follows:

https://juejin.im?id=5cd0438c6fb9a031ec6d3ab2

I just need to write an img tag inside of my page:

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

CSRF attacks are implicit authentication mechanism from the Web! Web authentication mechanism can guarantee that although a request from a user's browser, but can not guarantee that the request is sent by the user approval. CSRF attacks the problem is usually resolved by the end of the service, to prevent CSRF attacks can follow the following rules:

• Get request is not used to modify the data
• Cookie settings HTTP Only
• Prohibit cross-domain interface settings
• Incidental request verification information, such as codes or Token

Clickjacking

The attacker would need to attack the website via an iframe embedded in their pages, the iframe to be transparent and then convince a user to operate on the page, then the user would click on a page in an iframe transparent unknowingly

Defense: Use a HTTP response header --X-Frame-Options. X-Frame-Options can be said that in order to solve clickjacking born, it has three optional values:

• DENY: the browser will refuse to load any of the current page frame page;
• SAMEORIGIN: the address of the page frame can only be homologous to the page under the domain name;
• ALLOW-FROM origin: frame allows the page address to load;

Middle attack

The attacker while the server and client to establish a connection, and let the other party that the connection is secure, but in fact the entire communication process is controlled by an attacker. An attacker can not only get information communication between the two sides, but also to modify the traffic information. The nature of man in the middle attack is the authentication and trust between the client and server.

HTTPS as the ultimate means of preventing the middleman attack, the introduction of mechanisms to address the issue of trust certificates client and server, thus more effectively prevent the middle attack.

HTTP2.0 and new features compared to the HTTP1.X

• The new binary format : HTTP / 1.x resolution is text-based. Based on the presence of natural defects parse the text of the agreement, there is diversity in forms of text, is bound to do a lot of scenes comprehensive consideration. Binary is different, only the identification of combinations of 0 and 1. Based on this consideration HTTP / 2.0 protocol parsing binary format, convenient and powerful.
• Multiplexer : HTTP / 2.0 support multiplexing, which is the HTTP / 1.1 persistent connection to the upgraded version. Multiplexing, there may be a plurality of flow is in a TCP connection, i.e. may transmit a plurality of request / response. Initiating a plurality of concurrent multiplexed allows requests, each response to the request, and need not wait for other requests or responses, to avoid head of line blocking problem. Such a request time-consuming task seriously, it will not affect the normal execution of other connections, which greatly improves the transmission performance.
• Header compression : request and response headers HTTP / 1.x with large amounts of information, and repeatedly transmitting each request, HTTP / 2.0 to reduce the size of the head using the encoder needs to be transmitted, a first cache their respective communication fields table unit, both to avoid duplicate transmission of the head, but also reduces the size to be transmitted.
• Push server : push server is to client required css / js / img index.html resources accompanied with the transmission to the client, the step of eliminating the client repeat request (fetch from the cache).

HTTP/3.0

• Avoid blocking package : a plurality of data transmission on the TCP connection, the data packet if a problem occurs, it must wait for the TCP packet retransmission, in order to continue transmitting other data packets. However QUIC because, when the UDP packets need to be retransmitted in the problem, will not affect other data packet transmission protocol based on UDP.
• Quick restart the session : General tcp based connection is based on both ends of the ip and port and protocol to build. In the network switching scenarios, such as mobile terminal switched wireless networks, using 4G networks will change the ip itself, which leads tcp connection must be re-created. The QUIC protocol uses a unique UUID to mark every time you connect, when the network environment changes, as long as the same UUID, you can do not need to shake hands and continue to transmit data.

HTTP packets

Information for the HTTP protocol interaction is known as HTTP packets. The client's HTTP packet call request packet, the server's HTTP response packets called messages.

Request packet by request line (request method, protocol version), the request header (the URI request, client information, etc.) and a content entity (user information and the resource information and the like, can be empty) configuration.

Response message is a status line (protocol version, status code), response headers (server name, resource identification, etc.) and content entity (returned from the server resource information) constitute.

Request method

• GET: get method is generally used to get server resources
• POST: post methods generally used for the transport entity body
• PUT: put a method generally used for transferring files
• DELETE: delete method for deleting files
• HEAD: head method for acquiring the message header, message body is not returned
• OPTIONS: options method inquiry method for resources to support the request URI

Header field

• Cache-Control

Control caching behavior: no-cache (mandatory re-verification to the server), no-store (without any cache), max-age = 111111 (cacheable resources maximum time in seconds), public (client, proxy servers can use cache), private (caching proxy server is unavailable)

• Accept

Correctly received media type: application / json text / plain

• If-Match coincides with the etag value, the server processes the request
• If-Modified-Since local resource 304 returns unmodified (comparison time)
• If-None-Match If-None-Match and etag value inconsistent processing request
• Set-Cookie requires the presence of client information, generally used to identify the user's identity
• Expires Expires content, local modifiable
• Last modified Last_modified content
• ETag resource identifier, assigned by the server, identify resources will change when changes
• Content-Type Used to tell the browser what the results returned by parse

hhtp Cache

Strong negotiation cache and cache, based on header content of the response to the decision

Strong cache:

It does not initiate the request.

cache-control (buffer control): max-age = number (in seconds), which specifies an expiration time, HTTP1.1 specification.

Expires (expiration time), it is the time of the string in GMT time, the old specification.

Negotiation cache:

It will launch a request.

This partner groups are paired, i.e., the first request in response to a tape header field (Last-Modified or an Etag), will bring the subsequent request corresponding to the request field (If-Modified-Since or If-None-Match), if there is no response header Etag or Last-Modified field, then the field would not have corresponding request header.

etag, a resource it will be marked with a "two-dimensional code"

The client sends the ETag value of If-None-Match header field:

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

The server client ETag (sent as values ​​If-None-Match field together) is compared with its ETag current resource version, if the two values ​​match (i.e., the resource is not changed), the server will return without any content 304 is not modify the status, telling the client cache version is available (fresh).

Last-Modified is a response header that contains the source server identified by the date and time resources to make changes. It is usually used as a validator to determine whether the received or stored resource coincide with each other. Request header and the If-Modified-Since (if any) compared unchanged return 304

When the If-Modified-Since used together, If-None-Match higher priority (if the server supports)

How strong it clear the cache?

This simple, just behind the URI query field to add, is what we call the version number.

Handwriting ajax request

function callBack () {
  console.log(this.responseText)
}

let xhr = new XMLHttpRequest()
xhr.onload = callBack
xhr.open(method, url, true)
xhr.send()
复制代码

HTTPS handshake, the client how to verify the validity of the certificates

• Check whether the certificate authority trusted by the client.
• By way of checking whether to revoke the CRL or the OCSP.
• Comparing system time, calibration certificate is within the validity period.
• The other by the private key check whether there is a certificate, the certificate to determine whether the domain name is consistent with the certificate issued

Reference: juejin.im/post/5cd043... github.com/Advanced-Fr...

Reproduced in: https: //juejin.im/post/5cee3229e51d455a68490af3