preface

Recently, I reorganized my own front-end knowledge. In the field of front-end security, there is not much practical application due to the internal projects I have done in the last two years. I take this opportunity to learn more about it.

The front security

Cross-site Request Forgery (CSRF)

In the early stage of the development of the Domestic Internet, the WEBSITE CSRF vulnerabilities are still quite many. If we are the attackers, we can carry out CSRF attack smoothly when the attacked website meets the following conditions:

  • Cookie information saved by a user who logs in to the attacked website
  • The user opens another TAB to access our malicious site
  • The site is not protected by CSRF

Attack process

When your website meets the above three conditions, the information of the current login user is completely transparent to the malicious website, the following talk about the attack process:

As shown in the figure:

  • The user opens website A
  • Login A (XSRF Vulnerability)
  • Generate login cookie
  • Same browser B (fake attack site)
  • Website B obtains A’s cookie through the script and sends it to the attacker
  • The attacker obtains the cookie and obtains the user information through the cookie

How to prevent

Through analysis, it can be found that the XSRF attack method is to get cookies through phishing websites, and then the attackers carry out illegal operations. The solution is to make the attackers unable to get cookies or the authentication method is not only cookie.

  • Use POST as much as possible and limit GET, which makes it more difficult to attack. The attacker must forge the form to make the request.
  • Set the cookie property to HTTPOnly, so that the attacker cannot get the cookie.
/ / res nodejs express as an example. Cookies (' the userinfo ', '* * * * * * *' {maxAge: 60000, path: '/ news, httpOnly: true})Copy the code
  • Token authentication is added to the server. The server generates a token at each login and verifies the token at each request
  • The Referer is used to identify the source address, and the server obtains the source address through the Refer header. If the address is invalid, the server rejects the operation.
String referer = req.headers.referer 
Copy the code

Cross-site Scripting attacks (XSS)

reflective

  • The user logs in to the attacked website A through the link provided by the attacker
  • Website A does not perform any string verification for links

Storage type

  • A website is the url of blog, forum class, and can input content
  • Website A does not perform any string verification on the input content
  • The user browses the content posted by the attacker

The DOM model

  • The user opens website A through the wifi or other network provided by the attacker
  • The user clicks to the attacker to insert the DOM of website A

Attack process

As you can see, the flow of the attack is slightly different: reflective

  • The attacker forged A website link
  • The user opens website A
  • Insert the attacker’s attack JS
  • Obtain user information and perform illegal operations

Storage type

  • Attacker A enters the attack script code or SQL statement into the database (such as the blog forum website).
  • The user opens website A
  • The user navigates to the attacker’s page
  • Obtain user information and perform illegal operations

DOM type (storage based, so to speak)

  • Data source provided by the attacker (CDN hijacking, illegal characters stored in the database)
  • The data enters the Web application through an untrusted data source
  • Users browse and load untrusted data source attack scripts
  • Obtain user information and perform illegal operations

How to prevent

Common defense:

  • (Bug: Internet Explorer or earlier browsers may not support the Http Header)
  • In the setting of cookies, plus HttpOnly parameters (function: can prevent the page XSS attack, Cookie information stolen, compatible to IE6) (defects: website itself JS code can not operate cookies, and limited role, can only ensure the security of cookies)
  • When developing the API, verify the Referer parameter of the request (function: to a certain extent to prevent CSRF attacks) (Bug: The Referer parameter can be falsified in IE or earlier versions of browsers)

Reflection type:

Background rendering of HTML requires the following function filtering:

  • Htmlspecialchars function (PHP)
  • The htmlentities function
  • HTMLPurifier. Auto-.php
  • RemoveXss function

When the front end renders the page through the background API:

  • Try to use innerText(IE) and textContent(Firefox) (jQuery’s text()) to output the text content
  • You have to use innerHTML or something like that, so you have to do htmlSpecialchars like PHP filtering

Persistent type:

  • The server processes the stored data and converts the script characters that may be executed into strings, as follows:
function htmlspecialchars(str){ \ str = str.replace(/&/g, '&amp; '); \ str = str.replace(/</g, '&lt; '); \ str = str.replace(/>/g, '&gt; '); \ str = str.replace(/"/g, '&quot; '); \ str = str.replace(/'/g, '&#039; '); \ return str; The \}Copy the code

DOM type XSS: The DOM type XSS is mainly by the client side script through the DOM dynamically output data to the page rather than relying on the data submitted to the server side, and the data obtained from the DOM from the client side is executed locally, so only from the server side is not defensible. Its defenses lie in:

  • Avoid client-side document rewriting, redirection or other sensitive operations, and avoid using client-side data. These operations should be implemented using dynamic pages on the server.
  • Analyze and strengthen the client JS code, especially the DOM object affected by the user, pay attention to the relevant functions or methods that can directly modify the DOM and create HTML files, and encode escape when the output variables to the page, such as the output to HTML, HTML coding, output to

Click on the hijacked

What is the

Some malicious sites use iframes to embed sites within their own sites, then make the iframe transparent and use locational means to lure users to click on the malicious page. In this way, users unknowingly perform some unsafe operations.

Attack process

  • The attacker forges the site using an iframe
  • Users are performing unsafe operations on bogus websites
  • The attacker obtains the desired information through insecure operations

How to prevent

  • Js defense: determine whether the upper-layer routing address is consistent with the original website address
if (top.location.hostname ! == self.location.hostname) {alert(" unauthorized access! ") ); top.location.href = self.location.href; }Copy the code
  • Header configuration prevents:
//nginx 
add_header X-Frame-Options SAMEORIGIN;

//nodejs
res.setHeader('X-Frame-Options','DENY');
Copy the code

conclusion

With the rapid development of the Internet, the demand for front-end development is also increasing. How to develop a safe and easy to use application is a required subject for each of our front-end developers. Therefore, mastering common website attack means is one of the most effective ways for us to defend against attacks. When it comes to front end security, no developer can guarantee that his or her application is bug-free. What we can do is to eliminate known vulnerabilities and understand possible vulnerabilities. There is a long way to go.

Refer to the article

  • www.jianshu.com/p/4fcb4b411…
  • Segmentfault.com/a/119000001…