XSS in Comments: A Fix

TL;DR

Someone can inject malicious JavaScript code into your website through comments if you don’t properly handle user input. This guide shows how to prevent that by escaping special characters.

Understanding the Problem

Cross-Site Scripting (XSS) happens when an attacker inserts harmful scripts into websites viewed by other users. In this case, comments are a common entry point. If your website displays comment content without cleaning it first, attackers can run JavaScript code in visitors’ browsers.

Fixing the Problem: Escaping Special Characters

The core solution is to escape special characters that have meaning in HTML and JavaScript. This means replacing them with their equivalent HTML entities. Here’s how:

1. Identify Special Characters: The most important characters to escape are:
   • < (less than) becomes <
   • > (greater than) becomes >
   • " (double quote) becomes "
   • ' (single quote/apostrophe) becomes ' or '
   • / (forward slash) becomes /
2. Escape Before Displaying: You must escape the comment content *before* you show it on your website. This is usually done in your server-side code (e.g., PHP, Python, Ruby, Node.js).

Example Solutions

Here are examples of how to do this in a few common languages:

PHP

<?php
$comment = $_POST['comment']; // Get the comment from the form
$escaped_comment = htmlspecialchars($comment, ENT_QUOTES, 'UTF-8');
echo $escaped_comment;
?>

htmlspecialchars() is your friend here. ENT_QUOTES escapes both single and double quotes. Always specify the character encoding (UTF-8 is a good default).

Python (using Flask)

from flask import escape

@app.route('/comment', methods=['POST'])
def comment():
    comment = request.form['comment']
escaped_comment = escape(comment)
    return render_template('your_template.html', comment=escaped_comment)

Flask’s escape() function handles the escaping for you.

JavaScript (Client-Side – Use with Caution!)

Important: Client-side escaping is generally not enough. Attackers can bypass it. Always escape on the server-side first! However, if you need to do some client-side sanitization as an extra layer:

function escapeHtml(unsafe) {
  return unsafe
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "'")
    .replace(///g, "/");
}

let comment = document.getElementById('commentInput').value;
let escapedComment = escapeHtml(comment);
document.getElementById('commentDisplay').innerHTML = escapedComment;

Testing Your Fix

1. Try Simple Attacks: Enter basic XSS payloads like <script>alert('XSS')</script>. The alert box should *not* appear. Instead, you should see the literal text <script>alert('XSS')</script> on your page.
2. Try More Complex Attacks: Look for XSS cheat sheets online to test more sophisticated payloads.

Additional Security Measures

• Content Security Policy (CSP): Implement a CSP header to control which sources your browser is allowed to load resources from. This can significantly reduce the impact of XSS attacks even if they succeed in injecting code.
• Input Validation: Limit the length and types of characters allowed in comments.