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. Through these malicious scripts, attackers can obtain sensitive user information, such as cookies and sessions.

The acronym for Cross Site Scripting should be CSS, but since it is the same as our styling syntax CSS (Cascading Style Sheets), CSS has been changed to XSS.

Types mainly include:

  • Reflective XSS
  • Type stored XSS
  • The DOM model XSS

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
  • After receiving the response, the user’s browser parses and executes it, thus stealing user data and sending it to the attacker’s website, or impersonating the user’s behavior and invoking the data interface of the target website.

Common for functions that pass parameters through a URL, such as site search, jump, and so on

scenario

The client

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Reflective XSS</title>
</head>
<body>
  <form action="/" method="GET">
    <div>
      <label for="name">The input</label>
      <input type="text" id="name" name="keyword">
    </div>
    <button>search</button>
  </form>

  {{if keyword }}
    <div>{{@keyword}}</div>
    <ul>
      <li>Search result XXX</li>
      <li>Search result XXX</li>
      <li>Search result XXX</li>
    </ul>
  {{/if}}
</body>
</html>
Copy the code

The service side

const express = require('express')
const app = express()

app.engine('html'.require('express-art-template'))

app.get('/'.(req, res) = > {
  res.render('xss.html', {
    keyword: req.query.keyword
  })
})

app.listen(3000.() = > {
  console.log('Server started successfully: http://localhost:3000')})Copy the code

Attack process: front -> back -> front – end

Type stored XSS

  • The attacker submits malicious code to the database of the target website
  • When an attacker opens a target website, the website server takes the malicious code out of the database, splices it together into HTML and returns it to the browser
  • After receiving the response, the user’s browser parses and executes it, thus stealing user data and sending it to the attacker’s website, or impersonating the user’s behavior and invoking the data interface of the target website.
  • The main differences between stored XSS and reflective XSS are as follows: Stored XSS malicious code is stored in the database, while reflective XSS malicious code is stored in the URL

Common in comments, article details, etc. An attacker publishes article data containing malicious code and stores it in a database. This malicious code is triggered when other users access it

scenario

The client

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Type stored XSS</title>
</head>
<body>
  <h1>Article/comment content</h1>
  {{if title }}
    <div>{{ title }}</div>
    <div>{{@ content }}</div>
  {{/if}}
</body>
</html>
Copy the code

The service side

const express = require('express')
const app = express()

app.engine('html'.require('express-art-template'))

// // reflex type
// app.get('/', (req, res) => {
// res.render('xss.html', {
// keyword: req.query.keyword
/ /})
// })

// simulate the database
const db = [
  {
    id: 1.title: 'heading 1'.content: Content of the '1'
  },
  {
    id: 2.title: 'title 2'.content: Content 1 '}]/ / storage type
app.get('/:id'.(req, res) = > {
  const data = db[req.params.id] || {}
  res.render('xss2.html', data)
})

app.listen(3000.() = > {
  console.log('Server started successfully: http://localhost:3000')})Copy the code

Attack process: front -> back -> database -> back -> front – end

The attacker published article A, which was accessed by users

The DOM XSS

  • 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
  • Thus stealing user information to obtain impersonating user behavior

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

scenario

HTML attributes

<img src="xxx" onerror="alert('xss')" />

<body onload="alert('xss')"></body>

<a href="javascript:alert('xss')"></a>
Copy the code

XSS defenses

From the above XSS steps, we know that XSS attacks mainly come through two elements:

  • The attacker submits malicious code
  • The browser executes malicious code

Input filtering:

  • Filtering from the front end to the back end. The malicious code can be submitted if the attacker bypasses the front-end filtering and constructs the request directly
  • If filtered by the back end before writing to the database, for example10 < 20, which is escaped when entering the library10 &lt; 20. In this case, the output to the browser can be directly recognized, but if the output to other clients will be garbled.

Conclusion: It is not recommended to escape data on input, but on output

Defense against reflective XSS and storage XSS

Common methods:

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

Pure front-end rendering

  • Load a JavaScript script with static HTML
  • Ajax is requested through JavaScript scripts to load business data
  • Call the DOM API to update the data to the page

Setting content text (.innerText), setting attributes (.setAttribute), and setting styles (.style) using DOM apis. Pure front-end needs to be careful to avoid DOM-type XSS attacks (such as onload events, javascript:xx in href, etc.)

Escaped HTML

If concatenating HTML is necessary, you need to use an appropriate escape library to adequately escape the insertion points of the HTML template.

For example, characters such as & < > “‘/are escaped, but this is not perfect. So we need to use the escape library to perfect the escape.

For example, jS-xss is a common escape library in Node.js

Prevent DOM XSS attacks

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

Use.innerthml,.outerhtml, and document.write() with caution. Try to use.textContent and.setAttribute

CSP

Content-security-policy (CSP). Is an additional layer of security to detect and weaken specific attacks.