How to Sanitize User Input in JavaScript: Prevent XSS Attack

Sanitizing user input is important for the security of your website. It will help you to protect a website from malicious attacks like cross-site scripting (XSS).

It is very easy to validate user input and sanitize it using vanilla JavaScript. That means you don't need any third-party library.

Sanitizing user input means removing any potentially harmful code or characters from input value that can exploit a vulnerability in your website. So, anyone won't be able to inject any code through input fields into your website.

By implementing input sanitization in your website using JavaScript, you can significantly reduce the risk of XSS attacks and improve overall security.

There are several ways to perform input sanitization in JavaScript. You can use JavaScript DOM or RegEx to sanitize user input values. You will see the implementation of these 2 methods in this guide.

Also Read: How to Get The Text Input Value Using JavaScript Events

Sanitizing User Inputs Using JavaScript DOM

To sanitize user input values, you have to replace any special characters in the input with their corresponding HTML entities. You can do this by utilizing different JavaScript DOM properties and methods.

This means converting characters like '<', '>', and '&' to their respective HTML entities, preventing them from being interpreted as HTML code by the browser.

          const sanitize = (str) => {
    const div = document.createElement('div')
    div.textContent = str

    return div.innerHTML
}

const value = sanitize('<h2>Hello World!</h2> <script>alert("hello")</script>')

console.log(value)
// <h2>Hello World!</h2> <script>alert("hello")</script>
        

Create a function that accepts an input value as a string. Now you need to create a div element using the createElement() method from the document object.

Now set the string to your div element as a text using the textContent property. This will treat any HTML tags or special characters as plain text and ensure that they don't get interpreted as code.

Finally, return the value of div.innerHTML property from your sanitize() function.

If you call this function with a string that contains HTML code, it will replace characters like '<', '>', and '&' their HTML entities. For this reason, browsers will consider this string as plain text rather than HTML code.

Also Read: How to Sanitize HTML Using JavaScript: Prevent XSS Attacks

Using RegEx to Sanitize User Inputs in JavaScript

You can use RegEx with the JavaScript replace() method to sanitize user inputs. It is an alternative if you don't want to work with the DOM properties and methods.

You can call the replace() method with RegEx on your input value and convert all the special characters to respective HTML entities.

          const sanitize = (str) => {
    const map = {
        '&': '&',
        '<': '<',
        '>': '>',
        '"': '"',
        "'": ''',
    }

    const reg = /[&<>"']/gi

    return str.replace(reg, (match) => {
        return map[match]
    })
}

const value = sanitize('<h2>Hello World!</h2> <script>alert("hello")</script>')

console.log(value)
// <h2>Hello World!</h2> <script>alert("hello")</script>
        

Here, the sanitize() function takes an input value as an argument. You can store all the special characters that you want to replace and their HTML entities inside a map object.

The regular expression will match any character like ampersand (&), less-than sign (<), greater-than sign (>), double quote ("), and single quote (') from a string.

Call the replace() method with the regular expression on the str to convert the matched characters. The callback function of the replace() method will return the corresponding HTML entity for each matched character by calling the map object.

Now call the sanitize() function with a string. If that string contains any of those characters, it will replace them with their HTML entities.

Conclusion

As you already know, sanitizing user input is a critical step for protecting your website from cross-site scripting (XSS) attacks as well as other security vulnerabilities.

That's why I have shown you 2 different techniques to sanitize user input values using JavaScript. You can use either DOM properties and methods, or the replace() method with RegEx.

Both of these techniques will replace any special characters with their corresponding HTML entities so that browsers consider the input values as plain text rather than HTML code.