eslint-plugin-no-unsanitized

What is eslint-plugin-no-unsanitized?

eslint-plugin-no-unsanitized is an ESLint plugin that helps developers identify and prevent the use of unsanitized data in potentially dangerous contexts, such as when assigning to innerHTML or other DOM properties that can lead to cross-site scripting (XSS) vulnerabilities.

What are eslint-plugin-no-unsanitized's main functionalities?

Detecting unsanitized assignments to innerHTML

This feature detects when unsanitized data is assigned to the innerHTML property, which can lead to XSS vulnerabilities. The plugin will flag this line of code as an error.

/* eslint no-unsanitized/method: 'error' */
document.body.innerHTML = userInput;

Detecting unsanitized assignments to outerHTML

This feature flags unsanitized data assignments to the outerHTML property, helping to prevent XSS attacks by ensuring that data is properly sanitized before being used in this context.

/* eslint no-unsanitized/method: 'error' */
element.outerHTML = userInput;

Detecting unsanitized assignments to insertAdjacentHTML

This feature identifies when unsanitized data is passed to the insertAdjacentHTML method, which can introduce XSS vulnerabilities. The plugin will flag this usage as an error.

/* eslint no-unsanitized/method: 'error' */
element.insertAdjacentHTML('beforeend', userInput);

Other packages similar to eslint-plugin-no-unsanitized

eslint-plugin-security

eslint-plugin-security is an ESLint plugin that identifies potential security issues in JavaScript code, such as the use of eval, insecure randomness, and other common security pitfalls. While it covers a broader range of security issues compared to eslint-plugin-no-unsanitized, it does not focus specifically on unsanitized data in DOM assignments.

eslint-plugin-xss

eslint-plugin-xss is an ESLint plugin that helps prevent cross-site scripting (XSS) attacks by identifying potentially dangerous code patterns. It provides rules to detect unsanitized data usage in various contexts, similar to eslint-plugin-no-unsanitized, but with a broader focus on XSS prevention.

eslint-plugin-react

eslint-plugin-react is an ESLint plugin for React applications that includes rules to prevent common security issues, such as XSS vulnerabilities in JSX. While it is not solely focused on unsanitized data, it provides rules to ensure safe data handling in React components.

README

Disallow unsanitized code (no-unsanitized)

These rules disallow unsafe coding practices that may result into security vulnerabilities. We will disallow assignments (e.g., to innerHTML) as well as calls (e.g., to insertAdjacentHTML) without the use of a pre-defined escaping function. The escaping functions must be called with a template string. The function names are hardcoded as Sanitizer.escapeHTML and escapeHTML. The plugin also supports the Sanitizer API and calls to .setHTML() are also allowed by default.

This plugin is built for and used within Mozilla to maintain and improve the security of our products and services.

Rule Details

method

The method rule disallows certain function calls. E.g., document.write() or insertAdjacentHTML(). See docs/rules/method.md for more.

property

The property rule disallows certain assignment expressions, e.g., to innerHTML.

See docs/rules/property.md for more.

Examples

Here are a few examples of code that we do not want to allow:

foo.innerHTML = input.value;
bar.innerHTML = "<a href='"+url+"'>About</a>";

A few examples of allowed practices:

foo.innerHTML = 5;
bar.innerHTML = "<a href='/about.html'>About</a>";
bar.innerHTML = escapeHTML`<a href='${url}'>About</a>`;

Install

With yarn or npm:

$ yarn add -D eslint-plugin-no-unsanitized
$ npm install --save-dev eslint-plugin-no-unsanitized

Usage

In your .eslintrc.json file enable this rule with the following:

{
    "extends": ["plugin:no-unsanitized/DOM"]
}

Or:

{
    "plugins": ["no-unsanitized"],
    "rules": {
        "no-unsanitized/method": "error",
        "no-unsanitized/property": "error"
    }
}

Documentation

See docs/.