Front-end network test sites

1.TCP / IP three-way handshake and four wave

2.http common status codes (http-status-code):

3. Enter the URL from the browser and press Enter to display the page what happened?

The main difference 4.HTTPS and HTTP as follows?

The browser cache

Strong Cache : not send a request to the server, the resource is read directly from the cache, the Network Options chrome console can be seen in the request returns a status code 200, and Size display from disk cache or from memory cache. Strong cache can be set two HTTP Header realization: Expires and Cache-Control.

Negotiation cache : cache invalidation is mandatory after, the browser sends a request to carry identity cache server, the process of deciding whether to use cached by the cache server based on the identification, mainly in the following two situations:

• Negotiated entry into force of the cache, and returns 304 Not Modified
• Cache invalidation negotiation, and returns the result of the request negotiation cache 200 can set two achieved HTTP Header: Last-Modified and ETag.

Forced to negotiate cache cache priority, if forced cache (Expires and Cache-Control) entry into force of the direct use of the cache, if the cache entry into force of the consultations (Last-Modified / If-Modified-Since and Etag / If-None-Match) consultation cache server to decide whether to use the cache, the cache if the negotiation fails, the failure of the request on behalf of cache, a 200, and return to the resource cache identifier, and then stored in the browser cache; 304 is returned into effect, continue to use the cache.

6.ajax four steps

1. Create XMLHttpRequest object, the object is to create an asynchronous call
2. Create a new HTTP request, and specify the method of the HTTP request, URL and authentication information
3. Setting response function of the state change of the HTTP request
4. Send an HTTP request
5. 

General properties and methods XMLHttpRequest

1. readyState: Represents an integer status of the request, the value:

• UNSENT (0): Object has been created
• OPENED (1): open () call success, in this state, the first request may be provided to xhr, or use the send () sends a request
• HEADERS_RECEIVED (2): all done automatically redirect access, and the final response has been received HTTP header
• LOADING (3): a response is received body
• DONE (4): data transfer is completed or a transmission error

3. onreadystatechange: Function called when readyState change
4. status: HTTP status code returned by the server (e.g., 200, 404)
5. statusText: HTTP status information returned by the server (such as, OK, No Content)
6. responseText: Full response from the server as a string of
7. responseXML: Document object that represents the response from the server to parse XML documents
8. abort(): Cancel asynchronous HTTP request
9. getAllResponseHeaders(): Returns a string that contains all the HTTP header in the response sent by the server. Each header is a colon-separated name / value pairs, and to use a carriage return / line feed line to separate the header
10. getResponseHeader(headerName): Returns the header values ​​corresponding to headName
11. open(method, url, asynchronous [, user, password]): Initialization ready to send a request to the server. The method of HTTP method is insensitive; url is relative or absolute URL request sent; Asynchronous indicates whether the asynchronous request; user password for authentication and
12. setRequestHeader(name, value): Set HTTP header
13. send(body): Requests to the server to initialize. The body portion comprising a body parameter request, a POST request to the key-value as a string; for GET request is null

Which you use ajax?
From native XHR to jquery ajax, now and then axios and fetch.
axios and fetch are based Promise, usually we will carry out the second package while using
talked about the difference fetch with jquery ajax, and this is it very strange place
when receiving an HTTP status code indicating an error when the fetch ( ) returned Promise not flagged as reject, even if the state of the HTTP response code is 404 or 500. Instead, it is marked as a state Promise resolve (but ok resolve property will be set to the return value to false), only when a network failure or the request is blocked, it will be labeled as reject. By default, fetch does not send or receive any cookies from the server, if the site depends on the user session, the request will result in non-certified (to send cookies, you must set credentials option)

In general interceptor will write what code?
请求拦截We'll token half to write here, so do not have to write this parameter for each request
will do a data processing format, if a parameter requires a unified processing can be placed here

//设置请求拦截器
//TOKEN校验（JWT）:接收服务器返回的token，存储到vuex/本地存储中，每一次向服务器发请求时，都把token带上
axios.interceptor.request.use(config => {
	let token = localStorage.getItem('token');
	token && (config.headers.Authorization = token);
	return config;
}, error => {
	return Promise.reject(error)l
});

响应拦截Half will make a judgment request fails direct call failed message box for each interface so do not write the same code
will return reponse.data upon return; so they do not accept each data at all times plus a data.data

//响应拦截器
axios.interceptors.response.use(response => {
	return response.data;
}, error => {});

get request and post requests What is the difference? When to use post?

GET: General to obtain information, use a URL to pass parameters, the number of transmitted information is also limited, in the 2000 general character POST: generally used to modify resources on the server, the information sent is no limit
in the following cases, Please use the POST request: 1. not use the cache files (files or update the database on the server) 2. send large amounts of data (POST does not limit the amount of data) 3. send users to include unknown characters input to the server, POST is more stable than GET more reliable
actually HTTP protocol has never prescribed length limit request GET / POST is. Get request parameter limit is a source server and a browser or web browser or web server limits the length of the url. In order to clarify this concept, we must re-emphasize the following points:
1, HTTP protocol does not specify length limits GET and POST
2, the maximum length GET displayed because the browser and the web server limits the length of the URI
3, different browsers and WEB server, not the same as the maximum length limit
4, IEs to support, the maximum length of 2083byte, if only support Chrome, you'll maximum length 8182byte

Session tracking methods which web development

1. cookie
2. session
3. url rewrite
4. Hidden input
5. ip address

Cookie and Session difference?

(See Computer Network Box)
• Security: Session than Cookie security, Session is stored on the server side, Cookie is stored on the client side.
• the value of different types of access: Cookie support only string data memory, other types of data want to set necessary to convert it to a string, Session data may be any type of memory.
• Different validity: Cookie can be set for long periods, such as we often use the default login feature, Session general failure a short time, the client closes (default) or Session timeouts fail.
• Storage of different sizes: single Cookie saved data can not exceed 4K, Session can store data much higher than Cookie, but when too much traffic, it will take up too much server resources.

Token-related?

1. The client uses the user login name with the password request
2. Server receives a request to verify the user name and password
3. After successful authentication, the server will issue a token and sends the token to the client
4. After the client received token, it will be stored, such as on a cookie or in localStorage
5. Every time a client requests a resource to the server needs with the server issued token
6. Data server receives the request, and then to verify that the client requests inside with the token, if the authentication is successful, it is returned to the client's request

• Each request needs to carry token, token need to put in the HTTP Header
• token-based user authentication is authentication, the server a service end stateless without storing token data. In exchange for a token analytical calculation time storage session, thereby reducing the pressure on the server, reducing the frequent queries a database
• token entirely by the management application, so it can avoid the same-origin policy

What is the origin policy?

Same Origin Policy: protocol, domain names, the same port, same origin policy is a security protocol, refers to a script read-only properties window and documents from the same source.

Why should there be homologous limit? The purpose is to prevent a document or script loaded from multiple different sources.
We illustrate: for example, a hacker program, he uses the Iframe embedded real bank login page to his page, when you use the actual user name, password, he can read the pages to your form via Javascript input in the content, so the user name, password easily at hand

Work is how to solve cross-domain?

1. jsonp

2. HEARTS

3. proxy agents (for local development)

4. frame can ignore the impact domains, you can in your own pages, the Baidu embedded into them
   must be the same main domain, different sub-domains

Summary:
• CORS support all types of HTTP requests, is the fundamental solution to cross-domain HTTP requests
• JSONP only supports GET request, JSONP advantage is to support older browsers, and can request data from the CORS site does not support.
• Whether Node middleware proxy or nginx reverse proxy, mainly through homologous strategy on the server without restrictions.
• daily work, with more than cross-domain solution is cors and nginx reverse proxy

XSS and CSRF difference

XSS (Cross Site Scripting), in order not to confuse and Cascading Style Sheets CSS, it will be abbreviated as XSS XSS. 恶意攻击者往 Web 页面里插入恶意 Script 代码, When a user browses the page, which is embedded inside the Web Script code is executed, so as to achieve 恶意攻击用户the purpose.
CSRF (Cross-site request forgery), forged requests, impersonate the user in the normal operation of the station. We know that the vast majority of sites are cookie to identify the user identity by other means, and then be authorized. So to forge a user's normal operation, the best way is through XSS links or other means to deceive, 让用户在本机（即拥有身份 cookie 的浏览器端）发起用户所不知道的请求.

Difference:
different principles, CSRF exploit site is A itself, to request api for Site A; XSS is injected into the JS code to the target site, and then execute the JS code.
CSRF requires the user to log in the target website for cookie, but does not require login XSS
CSRF targeted at users, XSS goal is server
XSS is the use of legitimate users to access their information,CSRF是伪造成合法用户发起请求

XSS attack prevention
are now mainstream browsers built-in measures to prevent XSS, such as CSP. But for developers, but also we should look for a reliable solution to prevent XSS attacks.

• HttpOnly prevent rob Cookie
  HttpOnly first proposed by Microsoft and has already become a standard. Javascript is disabled browser to access the page with the HttpOnly Cookie attributes.
  An attacker can obtain the user's Cookie information by injecting malicious scripts. Cookie usually are included in the user's login credentials, the attacker after obtaining the Cookie, Cookie hijacking attacks can be launched. So, strictly speaking, HttpOnly not prevent XSS attacks, but can prevent Cookie XSS attack after hijacking attacks.
• Enter check
  Do not trust any input from the user. For any input of the user to be checked, filtered and escaped. Establishing a trusted HTML tags and characters white list, or filter for character encoding or tag is not in the white list of columns.
  In XSS defense, inspection data input check generally contains user input <,> and other special characters, if present, special characters or coding filter, this is also known as XSS Filter.
  In some of the front end of the frame, there will be a decodingMap, tags or special characters for user input comprises filtering or encoding, such as <,>, script, preventing XSS attacks
• Check the output of
  the user's input will be a problem, the output end of the service will be problematic. In general, in addition to rich text output outside, when the variable output to HTML pages, you can use the encoding or escaping of ways to defend against XSS attacks. For example, after the page is then output to the output content filtering rules using sanitize-html.