How does the front end avoid XSS attacks

What is a XSS

Cross-site Scripting (XSS) is a code injection attack. The attacker injects malicious scripts on the target website to run on the user’s browser. Using these malicious scripts, attackers can obtain sensitive user information such as cookies and sessionIDS, thus compromising data security.

XSS classification

Type stored XSS

Storage XSS attack steps:

The attacker submits malicious code to the database of the target website. When the user opens the target website, the website server takes the malicious code out of the database, splices it into HTML and returns it to the browser. When the user’s browser receives the response, it parses it and executes the malicious code mixed in. Malicious code steals user data and sends it to the attacker’s website, or impersonates the user’s behavior and calls the target website interface to perform the operations specified by the attacker. This kind of attack is common in website functions with user-saved data, such as forum posts, product reviews, and user messages.

Reflective XSS

Attack steps of reflective XSS:

• The attacker constructs a special URL that contains malicious code.
• When a user opens a URL with malicious code, the web server takes the malicious code out of the URL, splices it into HTML and returns it to the browser.
• When the user’s browser receives the response, it parses it and executes the malicious code mixed in.
• Malicious code steals user data and sends it to the attacker’s website, or impersonates the user’s behavior and calls the target website interface to perform the operations specified by the attacker.

The difference between reflective XSS and stored XSS is that the stored XSS malicious code is stored in the database, while reflective XSS malicious code is stored in the URL.

Reflective XSS vulnerabilities are common in functions that pass parameters through urls, such as website search, jump, etc.

Because users need to take the initiative to open malicious URL to take effect, attackers often combine a variety of means to induce users to click.

Reflective XSS can also be triggered by the contents of a POST, but the trigger condition is more stringent (the form submission page needs to be constructed and the user is directed to click), so it is very rare.

The DOM model XSS

DOM XSS attack steps:

• The attacker constructs a special URL that contains malicious code.
• The user opens a URL with malicious code.
• When the user’s browser receives the response, it parses it and executes it. The front-end JavaScript picks up the malicious code in the URL and executes it.
• Malicious code steals user data and sends it to the attacker’s website, or impersonates the user’s behavior and calls the target website interface to perform the operations specified by the attacker.

DOM XSS differs from the previous two types of XSS: DOM XSS attacks, in which malicious code is extracted and executed by the browser side, are security vulnerabilities of the front-end JavaScript itself, while the other two types of XSS are security vulnerabilities of the server side.

XSS attack prevention

This section falls into two categories:

• Prevent injection in HTML.
• Prevents malicious code from executing while JavaScript is executing.

Preventing stored and reflective XSS attacks (back end)

Both stored and reflective XSS are inserted into the response HTML after the server takes out the malicious code, where the attacker’s deliberate “data” is embedded in the “code” and executed by the browser.

There are two common approaches to prevent these vulnerabilities:

• Change to pure front-end rendering, separating code from data.
• Fully escape HTML.

Pure front-end rendering

Pure front-end rendering process:

The browser first loads a static HTML that does not contain any business-related data.

The browser then executes the JavaScript in the HTML. JavaScript loads the business data through Ajax and calls the DOM API to update it to the page.

In a pure front-end rendering, we explicitly tell the browser whether to set a text (.innertext), an attribute (.setAttribute), a style (.style), etc. Browsers can’t easily be tricked into executing unexpected code.

In many internal and management systems, pure front-end rendering is perfectly appropriate. However, for pages with high performance requirements or SEO requirements, we still face the problem of concatenated HTML.

Escape HTML If concatenating HTML is necessary, you need to have a suitable escape library that adequately escapes the insertion points of the HTML template.

Common template engines, such as dot.js, EJS, FreeMarker, etc., usually have only one rule for HTML escaping, which is to escape & < > “‘ /. This does provide some XSS protection, but it is not perfect.

Preventing DOM type XSS attacks (front end)

DOM TYPE XSS attack is actually the site’s front-end JavaScript code itself is not strict enough, the untrusted data as code execution.

Be careful when using.innerhtml,.outerhtml, and document.write(). Do not insert untrusted data into the page as HTML. Instead, use.textContent,.setAttribute(), etc.

If using the Vue/React technology stack, and do not use the v – HTML/dangerouslySetInnerHTML function, on the front end render phase avoid innerHTML, outerHTML XSS concerns.

Inline event listeners in the DOM, such as location, onClick, onError, onload, onmouseover, etc. JavaScript eval(), setTimeout(), setInterval(), etc., can all run strings as code. If untrusted data is concatenated into strings and passed to these apis, it is easy to create a security risk that must be avoided.

<! Inline event listener contains malicious code --> <img onclick="UNTRUSTED" onerror="UNTRUSTED" src="data:image/png,"> <! --> <a href="UNTRUSTED">1</a>

<script>
// setTimeout()/setCall malicious code in Interval()setTimeout("UNTRUSTED")
setInterval("UNTRUSTED"// location calls the malicious code location.href ='UNTRUSTED'

// eval() to call malicious codeeval("UNTRUSTED")
</script>
Copy the code

Avoid concatenating untrusted data in strings if this is useful in your project.

If you are using Vue, React, or Node:

Installation:

$ npm install xss --save
Copy the code

Or directly to the page reference: raw.github.com/leizongmin/…

<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script> <script> // use the function name filterXSS, the same usage var HTML = filterXSS(' + 'ipt>');
alert(html);
</script>
Copy the code

Specific reference: github.com/leizongmin/…

Reference: segmentfault.com/a/119000001…