The front end surface of questions (e) (safety, performance optimization)

First, talk about what you know and web security protection measures

1. Common attacks: SQL injection, XSS (Cross Site Script), XSS, CSRF (Cross Site Request Forgery), cross-site request forgery

（1）XSS

• xss: XSS (Cross Site Scripting) is the most common and basic method of attack WEB site, the attacker by injecting illegal html tag or javascript code, so that when users browse the web, control the user's browser.
• (A) category (three kinds)

1. DOM xss :

   • That DOM Document Object Model, DOM may allow the use of the content, structure and style of programs and scripts to dynamically access and update the document. This approach does not require the server to resolve directly involved in the response, triggered by a XSS DOM parsing browser can be considered completely client thing.

2. Reflective xss:

   • Reflective XSS also known as non-persistent XSS, is an XSS vulnerability is now most likely to occur. A request is made, XSS code appears in the URL, enter the last submitted to the server, the server parses this XSS code appears in the content of the response, the browser parses the last execution.

3. Storage type Xss

   • Storage-type XSS also known as persistent XSS, it is the most dangerous kind of cross-site scripting, compared reflective XSS and DOM XSS type has a higher hidden, so more dangerous, it does not require the user to manually trigger. When the attacker to submit some XSS code is received by the server and storage, when all surfers visit a page will be XSS, one of the most typical example is the message board.

• (B) Xss harm

1. Defraud using false personal information input form.
2. Cookie value using the script to steal user, the victim unknowingly help the attacker to send malicious requests.

• (C) harm against Xss

1. httpOnly: Setting HttpOnly attribute in the cookie, the cookie js script can not read the information.
2. The front end input check, have to do the same back-end checks and filters.
3. In some cases, the user data can not be strict filtering, the label needs to be converted

(B) CSRF

• Cross-site request forgery (Cross-Site Request Forgeries), posing as the user initiates a request (without the user's knowledge), the completion of some things contrary to the wishes of the user (such as modify user information, delete the beginning of comments, etc.).

• 1, it may cause harm:

  1. Using the updated setting information authenticated user rights;
  2. The use of purchased goods certified user rights;
  3. The use of user rights has been adopted to comment on the message board.

• 2. Defense:

  1. Verification code; Forcing the user to interact with an application in order to complete the final request.
  2. Try to use the post, get use restrictions; too easy to get used to do csrf attack;
  3. Restriction request source, this method is the lowest cost, but can not guarantee 100% effective, because the server is not a time to be able to take Referer, and there is a risk of forgery Referer lower versions of the browser.
  4. Verify CSRF token defense mechanism is recognized as the most appropriate solution.

• Using the principles of token:

  1. The first step: the rear end of a randomly generated token, which you save the token to the session state; the same token to the rear end of the front page;
  2. Step two: the front end of the page to submit the request, the request data or token is added to the header information, passed along the rear end;
  3. Verify that the back-end and front-end session came the same token, the same is legitimate, otherwise it is illegal request.

---

Second, talk about your understanding of said front-end performance optimization?

• content aspects

  • Reduce HTTP requests: merge files, CSS sprites, inline Image
  • Reduce DNS Query: Browser can not download any files from the host prior to any DNS query is completed. Methods: DNS cache, the distribution of resources to the appropriate number of host names, parallel download and balance DNS query
  • Avoid redirects: extra intermediate access
  • The Ajax cacheable
  • Non-essential components lazy loading
  • Needed for future assembly preloading
  • Reduce the number of DOM elements
  • The resources into different domains at: browsers simultaneously from a number of domain download limited resources, increase the field can increase parallel downloads
  • Reduce the number of iframe
  • Do 404

• Server aspects

  • Use CDN
  • Add Expires or Cache-Control header response
  • Components that use Gzip compression
  • Configuration ETag
  • Flush Buffer Early
  • Use Ajax GET request
  • Avoid empty img src tag of

• Cookie aspects

  • Reduce the size of the cookie
  • Do not include the introduction of the resource domain cookie

• css aspects

  • The style sheet into the top of the page
  • Do not use CSS expressions
  • Filter the IE is not used

• Javascript aspects

  • The scripts in the bottom of the page
  • The introduced from the outside and css javascript
  • Compressing javascript and css
  • Delete unneeded script
  • Reducing DOM access
  • Rational design event listeners

• Pictures aspects

  • Optimize your images: color to choose according to the actual color depth, compression
  • Css optimization wizard
  • Do not stretch the picture in HTML
  • Ensure favicon.ico small and cacheable

(C) What are your front-end performance optimization method used?

• Reduce the number of requests http:

  • CSS Sprites, JS, CSS source code compression, image size appropriate control;
  • Page Gzip, CDN hosting, data caching, image server.
• JS + front-end template data, reduce wasted bandwidth due to the cause of HTML tags,
• Save distal AJAX request results were variable, local variables for each operation, without requesting to reduce the number of requests
• Instead of operating with the innerHTML DOM, reducing the DOM number of operations, to optimize performance javascript.
• When you need to set the style of a lot of time to set className instead of directly operating style
• Less use of global variables, the result cache DOM nodes are looking for.
• Reduce IO read operation
• Avoid using CSS Expression (css expression), also known as Dynamic properties (dynamic properties)
• Pictures loaded on top of the style sheet
• The script at the bottom stamped
• Avoid will show up after complete download its contents table, table to wait in the body of the page layout, the display than div + css layout slow

(Iv) the front end needs to pay attention to what SEO

---

• Reasonable title, description, keywords: search for these three weight reduced by one;

  • title value to emphasize important points, important keywords appear no more than 2 times, and rely on before, different page title to be different;
  • The highly summarized description page content, appropriate length, not too much keyword stuffing, different page description is different;
  • Keywords can include important keywords
• Semantic HTML code to comply with W3C specifications: semantic code is easy to understand web search engines
• The most important part of the HTML code on the front: search engines to crawl HTML order is from top to bottom, there are restrictions on some search engines to crawl the length, to ensure that important content will be crawled
• Do not use an important part of the output js: reptiles will not perform content acquisition js
• Less iframe: search engines will not crawl the content of an iframe
• Non-decorative picture must be added alt
• Improve site speed: Site speed is an important indicator of search engine ranking

(E) how to do SEO optimization?

• Title and Keywords

  • Set realistic attractive title, the title should include keywords do

• Website directory structure

  • Best not more than three, every stage has "breadcrumbs" to make the site into a tree structure distribution

• Page elements

  • To the picture labeled "Alt" can make search engine friendly inclusion

• Site Content

  • There are monthly updates the site regularly every day, would be more like a search engine

• Links

  • The other must be a regular site, a professional team or individual daily maintenance updates

• The arrangement within the chain

  • The website form a structure similar to a spider web, it does not appear connected to a separate page or link

• Traffic Analysis

  • Analysis of traffic sources by statistical tools (Baidu statistics, CNZZ), the next SEO guide
• Last issue front-end JavaScript Interview
• Past Classic delve into - the page URL from input to display to complete the process of loading

Every day, a little bit of accumulation + a little bit like leaving a growing === like oh ~

---

Continuously updated in ~ welcome attention to explore with front-end trip