Skip to main content

Express XSS Prevention

Cross-Site Scripting (XSS) attacks are one of the most common web vulnerabilities that can affect your Express.js applications. In this comprehensive guide, we'll explore what XSS is, why it's dangerous, and how to implement effective prevention techniques in your Express applications.

What is XSS?​

Cross-Site Scripting (XSS) occurs when an attacker injects malicious client-side scripts into web pages that are viewed by other users. When these scripts execute in a victim's browser, they can:

  • Steal session cookies and user credentials
  • Redirect users to malicious websites
  • Modify webpage content
  • Perform actions on behalf of the user

Types of XSS Attacks​

There are three main types of XSS attacks that can affect your Express applications:

  1. Reflected XSS - Malicious script is reflected off the web server, such as in search results or error messages
  2. Stored XSS - Malicious script is stored on the server (in a database, comment section, etc.) and later served to users
  3. DOM-based XSS - Vulnerability exists in client-side code rather than server-side

XSS Prevention in Express​

Let's explore the key techniques and libraries to protect your Express applications from XSS attacks.

1. Use the Helmet Middleware​

One of the easiest and most effective ways to add XSS protection to your Express app is by using the Helmet middleware package. Helmet helps secure Express apps by setting various HTTP headers, including those that help prevent XSS.

First, install Helmet:

bash
npm install helmet

Then, use it in your Express application:

javascript
const express = require('express');
const helmet = require('helmet');
const app = express();

// Use Helmet middleware
app.use(helmet());

// Your routes below
app.get('/', (req, res) => {
  res.send('Hello, secure world!');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Helmet sets the X-XSS-Protection header, which enables browser's built-in XSS filter, and the Content-Security-Policy header, which restricts the sources from which content can be loaded.

2. Sanitize User Input​

Never trust user input! Always sanitize any data that comes from users before displaying it back in your application or storing it in a database.

A popular library for sanitizing input is express-validator:

bash
npm install express-validator

Here's how to use it to validate and sanitize user input:

javascript
const { body, validationResult } = require('express-validator');

app.post('/comment', [
  // Sanitize and validate the 'comment' field
  body('comment').trim().escape()
], (req, res) => {
  // Check if there are validation errors
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array() });
  }
  
  // The input is now sanitized and safe to use
  const sanitizedComment = req.body.comment;
  
  // Process the comment (save to database, etc.)
  res.json({ success: true, comment: sanitizedComment });
});

3. Use Template Engines with Auto-Escaping​

Most modern template engines automatically escape output by default, which helps prevent XSS. If you're using EJS, Pug, Handlebars, or similar template engines, ensure auto-escaping is enabled.

For example, with EJS:

javascript
app.set('view engine', 'ejs');

In your EJS template, the following would automatically escape the userName variable:

ejs
<p>Welcome, <%= userName %></p>

If you need to render HTML intentionally (which should be rare), most template engines provide a way to do this explicitly:

ejs
<!-- Only use this when you're absolutely certain the content is safe -->
<div><%- safeHtmlContent %></div>

4. Implement Content Security Policy (CSP)​

Content Security Policy is a powerful defense against XSS attacks. It restricts the sources from which various types of content can be loaded.

While Helmet sets up a basic CSP, you might want to customize it:

javascript
app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "trusted-cdn.com"],
      styleSrc: ["'self'", "trusted-cdn.com", "'unsafe-inline'"],
      imgSrc: ["'self'", "data:", "trusted-cdn.com"],
      connectSrc: ["'self'", "api.example.com"],
      fontSrc: ["'self'", "trusted-cdn.com"],
      objectSrc: ["'none'"],
      upgradeInsecureRequests: [],
    },
  })
);

This configuration:

  • Allows scripts only from your own domain and trusted-cdn.com
  • Allows styles from your domain and trusted CDN (with inline styles)
  • Restricts image sources
  • Forbids object embeds entirely

5. Use HttpOnly and Secure Cookies​

Prevent client-side JavaScript from accessing cookies by setting the HttpOnly flag, and ensure cookies are only sent over HTTPS with the Secure flag:

javascript
const session = require('express-session');

app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true,
  cookie: {
    httpOnly: true,  // Prevents JavaScript from accessing the cookie
    secure: true,    // Requires HTTPS
    sameSite: 'strict'  // Controls when cookies are sent with cross-site requests
  }
}));

6. Sanitize HTML Output with DOMPurify​

If you need to allow some HTML input from users (e.g., for rich text editors), consider using DOMPurify to sanitize the HTML before rendering:

bash
npm install dompurify jsdom

Usage example:

javascript
const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

app.post('/article', (req, res) => {
  // Clean the HTML content
  const cleanHtml = DOMPurify.sanitize(req.body.content);
  
  // Store or display the cleaned HTML
  // ...
  
  res.json({ success: true });
});

Real-World Example: Comment System​

Let's build a simple but secure comment system using the techniques we've learned:

javascript
const express = require('express');
const helmet = require('helmet');
const { body, validationResult } = require('express-validator');
const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

// Initialize DOMPurify
const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

const app = express();

// Middleware setup
app.use(helmet());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

// In-memory comments store (use a database in production)
const comments = [];

// Render the comments page
app.get('/', (req, res) => {
  res.render('comments', { comments });
});

// Handle comment submission
app.post('/comment', [
  // Validate and sanitize
  body('username').trim().escape().isLength({ min: 1 }),
  body('comment').trim().isLength({ min: 1 }).escape(),
  // For rich text comments, use DOMPurify instead of escape()
], (req, res) => {
  // Check validation errors
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array() });
  }
  
  // Get sanitized inputs
  const username = req.body.username;
  const comment = req.body.comment;
  
  // Save the comment
  comments.push({
    username,
    comment,
    date: new Date()
  });
  
  // Redirect back to comments page
  res.redirect('/');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

And the corresponding EJS template (views/comments.ejs):

ejs
<!DOCTYPE html>
<html>
<head>
  <title>Secure Comment System</title>
</head>
<body>
  <h1>Comments</h1>
  
  <!-- Comment Form -->
  <form action="/comment" method="post">
    <div>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div>
      <label for="comment">Comment:</label>
      <textarea id="comment" name="comment" required></textarea>
    </div>
    <button type="submit">Submit Comment</button>
  </form>
  
  <!-- Display Comments -->
  <div class="comments">
    <% if (comments.length > 0) { %>
      <% comments.forEach(comment => { %>
        <div class="comment">
          <h3><%= comment.username %></h3>
          <p><%= comment.comment %></p>
          <small><%= comment.date.toLocaleString() %></small>
        </div>
      <% }) %>
    <% } else { %>
      <p>No comments yet.</p>
    <% } %>
  </div>
</body>
</html>

In this example:

  • We use Helmet to set secure HTTP headers
  • User input is sanitized with express-validator
  • The template engine automatically escapes output
  • The form uses POST (not GET) to prevent reflected XSS

Testing for XSS Vulnerabilities​

It's essential to test your application for XSS vulnerabilities. Here are some common test payloads:

<script>alert('XSS')</script>
<img src="x" onerror="alert('XSS')">
<div onmouseover="alert('XSS')">Hover me</div>
javascript:alert('XSS')
<a href="javascript:alert('XSS')">Click me</a>

If these scripts execute when submitted through your forms or URL parameters, your application is vulnerable to XSS.

Summary​

Protecting your Express applications from XSS attacks requires a layered approach:

  1. Use Helmet to set secure HTTP headers
  2. Sanitize all user inputs before processing them
  3. Utilize template engines with automatic escaping
  4. Implement a strong Content Security Policy
  5. Set HttpOnly and Secure flags on cookies
  6. Use DOMPurify when allowing rich HTML content

By implementing these security measures, you'll significantly reduce the risk of XSS attacks in your Express applications.

Additional Resources​

Exercises​

  1. Add XSS protection to an existing Express application using Helmet.
  2. Create a blog post form that accepts rich text and safely sanitizes it with DOMPurify.
  3. Implement a custom Content Security Policy for your Express application.
  4. Test your application with various XSS payloads and ensure they're properly neutralized.
  5. Create a secure user profile page that displays user-submitted information without XSS vulnerabilities.

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)