Write in front: this article is mainly my browser on some knowledge summary summary, as well as event examples, for a better understanding of the browser knowledge

Same-origin policy and front-end cross-domain solution

The same-origin policy

The object that a domain name requests another domain name is cross-domain (subdivided into different protocols, different domain names, different ports are considered cross-domain), but CSS and JS are not restricted, such as the introduction of CDN, so cross-domain can be realized through JSONP.

Cross domain

  • Jsonp cross-domain: request jsonp.js and inform the server with parameters. The server concatenates the data and returns it in jsonp.js

  • Cors cross-domain: Cross-domain resource sharing is supported by both the browser and the server. The server needs to implement the CORS interface and set the browser request header to use CORS communication, which is no different from Ajax communication.

  • Proxy cross-domain: The browser can access the server across domains, but the server cannot access the server across domains. Therefore, the proxy creates a local server and requests the proxy to cross domains.

}

Http1.0 version differences

  • Http1.0: Breakpoint continuation is not supported. Only one link can transmit a resource once, in plaintext

  • Http1.1: Support long connections, a link to transfer multiple resources, such as caching, requests, latency, and other areas are significantly optimized, can be encrypted

  • Http2.0: Encrypted transport, many improvements

Common status codes and scenarios

  • 200: Data is returned successfully
  • 301: Permanent redirect
  • 302: Temporary redirect
  • 304: The cache is not updated. The cache is negotiated
  • 401: Not approved by HTTP
  • 403: No access permission
  • 404: Resource page not found
  • 500: Server error

Page redraw, reflux/rearrange

  • Backflow occurs when a page layout changes, such as dom additions and subtractions, layout changes, content changes, and window sizes

A redraw is a style change such as color modification, background image, etc

  • Reflux must redraw, redraw does not necessarily reflux

  • Avoid backflow: CSS should use transform, opacity, and reduce DOM operations (dynamic class, virtual DOM).

Browser cache

Browser cache classification:

  1. Server worker(has a page-independent life cycle, can communicate with pages, manipulate DOM or transfer data)
  2. Memory cache (stored in memory with little but fast data that is released when the page is closed)
  3. Dick cache local cache (stored on hard disk, fast, large and persistent, does not expire all the time)
  4. Push cache Caches http2 content

Browser caching process:

  1. When the browser initiates a request, it first looks up the result of the request and the cache identifier in the browser cache
  2. Each time the browser receives the result of the request, it stores the result and the cache id in the browser cache

Strong cache:

Instead of making a request to the server, enforce the use of cached content, and control strong caching by setting the header’s Expires or cache-control value.

Negotiation cache:

Access the server with the cache id. If the data is updated, return 200 and new data. If the data is not updated, return 304 status code and read the cached data

The browser renders the page order

  1. Parsing HTML to build a DOM Tree
  2. CSS Rule Tree (CSSOM)
  3. Parsing script tags compiles JS code, which blocks the process until compilation is complete.
  4. Dom Tree and CSSOM Tree merge into Render Tree
  5. Traverse the render tree, calculate the layout and paint the page.
  6. Reflow and Repaint are triggered when a page layout changes or style changes

CSRF attacks

Cross-site Request Forgery (CSRF)

The attacker lures the victim to a third-party site, where a cross-site request is sent to the targeted site. Using the victim in the attacked website has obtained the registration certificate, bypassing the background user authentication, to impersonate the user to perform a certain operation on the attacked website

Form: picture, A link, Form Form, etc.

Harm: Attackers can steal the identity of users, malicious operations in the name of users.

Three types:

  1. Get requests, such as access to harmful images will automatically initiate get requests
  2. Post requests, such as an automatic form submission after a visit to a harmful website
  3. A link form, such as harmful link click after automatic

CSRF has two characteristics

  1. CSRF (usually) occurs in third party domain names.
  2. CSRF attackers cannot obtain information such as cookies, but only use.

How to prevent

  1. Same-origin detection to prevent cross-domain requests (third-party website attacks)
  2. Double cooke(can be used but can’t get cooke)
  3. User authentication,token (cooke only)

End