Reference article: developer.mozilla.org/zh-CN/ “front-end interview guide”

XSS

Cross Site Scripting (XSS).

An attacker could exploit the vulnerability to inject malicious client code on a website. These malicious codes will run automatically when the victim logs on to the website, so that the attacker can break through the access rights of the website and impersonate the victim.

XSS attacks can be classified into three types: storage (persistent), reflection (non-persistent), and DOM.

  • Type stored XSS

Injected scripts are permanently stored on the target server. When the browser requests data, the script is sent back from the server and executed.

  • Reflective XSS

When a user clicks on a malicious link, submits a form, or enters a malicious site, the script is injected into the site of the attacker. The Web server will inject scripts, such as an error message, search results, and so on, back to the user’s browser. Because the browser thinks the response is from a “trusted” server, it executes the script.

  • DOM based XSS

By modifying the original client code, the DOM environment of the victim’s browser changes, causing the payload to execute. That is, the page itself did not change, but because the DOM environment was maliciously modified, client code was included in the page and accidentally executed.

XSS attacks websites by modifying HTML nodes or executing JS code

  • Modify HTML, for example, by retrieving parameters from a URL

Your url:

http://www.domain.com?name=<script>alert(1)</script>
Copy the code

Get url parameter from DOM:

<div>{{name}}</div>
Copy the code

Result: The above URL input might change the HTML to

, which would create an executable script out of thin air on the page. This type of attack is reflective attack, or DOM-based attack.

  • Execute JS code, such as a piece of code contained in a published article

Alert (1) This type of attack is storage attack, which can also be said to be DOM-based attack, and this attack is broader.

How do I defend against XSS attacks

  • The most common approach is to escape input and output, such as quotes, Angle brackets, and slashes
function escape(str) {
  str = str.replace(/&/g.'& ')
  str = str.replace(/</g.'< ')
  str = str.replace(/>/g.'> ')
  str = str.replace(/"/g.'&quto; ')
  str = str.replace(/'/g.'& # 39; ')
  str = str.replace(/`/g.'the & # 96; ')
  str = str.replace(/\//g.'/ ')
  return str
}
Copy the code
  • For displaying rich text, it is not possible to escape all characters as this would filter out the required format. In this case, whitelist filtering is usually adopted, and of course, blacklist filtering is also possible

CSRF

Cross-site request forgery (CSRF) is an attack that impersonates a trusted user to send an unexpected request to a server. For example, these unexpected requests might be done by adding malicious parameters to the URL after a jump link:

<img src="https://www.example.com/index.php?action=delete&id=123">
Copy the code

In thewww.example.comA user with access. ThisLabels will be correct without them even noticingwww.example.comPerform this operation even if the label is not therewww.example.comIn may.

To put it simply, CSRF uses a user’s login state to initiate a malicious request.

How to defend against CSRF

To prevent CSRF, comply with the following rules: 1. Data is not modified in Get requests. 2. Prevent third-party websites from accessing user cookies. 3. Prevent third-party websites from requesting interfaces. The request is accompanied by authentication information, such as a captcha or token

The comparison

XSS exploits the user’s trust in a given web site, while CSRF exploits the site’s trust in the user’s Web browser.