👨‍💻👾👨‍💻👾👨‍💻👾

f-XSS Prevention

2 min read

XSS vulnerability is mainly linked to two parts of the web app:

  • Source - such as user input field
  • Sink - displays the input data

Front-end

Sanitize and validate the user input on the front-end using JavaScript.

Input Validation

e.g email field won’t accept input if the email format is invalid:

function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test($("#login input[name=email]").val());
}

Input Sanitization

We should always ensure that we do not allow any input with JavaScript code in it.

We can utilize the DOMPurify JavaScript library, as follows:

<script type="text/javascript" src="dist/purify.min.js"></script>
let clean = DOMPurify.sanitize( dirty );

This will escape any special characters with a \.

Direct Input

Never let user input directly with certain HTML tags:

  1. JavaScript code <script></script>
  2. CSS Style Code <style></style>
  3. Tag/Attribute Fields <div name='INPUT'></div>
  4. HTML Comments <!-- -->

We should avoid using JavaScript functions that allow changing raw text of HTML fields like:

  • DOM.innerHTML
  • DOM.outerHTML
  • document.write()
  • document.writeln()
  • document.domain

And the following jQuery functions:

  • html()
  • parseHTML()
  • add()
  • append()
  • prepend()
  • after()
  • insertAfter()
  • before()
  • insertBefore()
  • replaceAll()
  • replaceWith()

Back-end

Input Validation

An example of E-Mail validation on a PHP back-end is the following:

if (filter_var($_GET['email'], FILTER_VALIDATE_EMAIL)) {
    // do task
} else {
    // reject input - do not display it
}

Input Sanitization

For example, for a PHP back-end, we can use the addslashes function to sanitize user input by escaping special characters with a backslash:

addslashes($_GET['email'])

For a NodeJS back-end, we can also use the DOMPurify library as we did with the front-end, as follows:

import DOMPurify from 'dompurify';
var clean = DOMPurify.sanitize(dirty);

Output HTML Encoding

We have to encode any special characters into their HTML codes, which is helpful if we need to display the entire user input without introducing XSS vulnerability.

Graph View