d4rtht3ll3ctus' root vault

XSS Prevention

3 min read

Front-end

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

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

Direct Input

Finally, we should always ensure that we never use user input directly within certain HTML tags, like:

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

In addition to this, 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

This can be achieved with Input and Output Sanitization and Validation, Server Configuration, and Back-end Tools that help prevent XSS vulnerabilities.

Input Validation

Input validation in the back-end is quite similar to the front-end, and it uses Regex or library functions to ensure that the input field is what is expected. If it does not match, then the back-end server will reject it and not display it.

 
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

 For a PHP back-end, we can use the htmlspecialchars or the htmlentities functions, which would encode certain special characters into their HTML codes (e.g. < into &lt;), so the browser will display them correctly, but they will not cause any injection of any sort:

htmlentities($_GET['email']);

For a NodeJS back-end, we can use any library that does HTML encoding, like html-entities, as follows:

import encode from 'html-entities';
encode('<'); // -> '&lt;'

Server Configuration

In addition to the above, there are certain back-end web server configurations that may help in preventing XSS attacks, such as:

  • Using HTTPS across the entire domain.
  • Using XSS prevention headers.
  • Using the appropriate Content-Type for the page, like X-Content-Type-Options=nosniff.
  • Using Content-Security-Policy options, like script-src 'self', which only allows locally hosted scripts.
  • Using the HttpOnly and Secure cookie flags to prevent JavaScript from reading cookies and only transport them over HTTPS.

In addition to the above, having a good Web Application Firewall (WAF) can significantly reduce the chances of XSS exploitation, as it will automatically detect any type of injection going through HTTP requests and will automatically reject such requests. Furthermore, some frameworks provide built-in XSS protection, like ASP.NET.

Graph View