eslint-plugin-risxss

2.1.0 verified Sat Apr 25 auth: no javascript

An ESLint plugin that detects potential XSS vulnerabilities in React (dangerouslySetInnerHTML) and Vue (v-html) applications. Current stable version is 2.1.0, with irregular releases. It enforces the use of a sanitization function (like DOMPurify) on all dynamic HTML content. Compared to generic XSS scanners, RisXSS integrates directly into the linting pipeline, providing instant feedback during development. It supports both React and Vue, and allows configuration of trusted sanitization libraries.

Common errors

error Definition for rule 'risxss/catch-potential-xss-react' was not found. ↓

cause The plugin is not installed or not added to the plugins array in ESLint configuration.

fix

Run yarn add eslint-plugin-risxss --dev and add 'risxss' to the plugins array in your ESLint config.

error ESLint couldn't find the plugin "eslint-plugin-risxss". ↓

cause The plugin is not installed in the project's node_modules.

fix

Install the plugin: npm install eslint-plugin-risxss --save-dev or yarn add eslint-plugin-risxss --dev.

error Argument to HTML string interpolation must be sanitized. ↓

cause Detected use of `dangerouslySetInnerHTML` or `v-html` without a call to a trusted sanitization function.

fix

Wrap the value in DOMPurify.sanitize() or a custom function listed in trustedLibraries.

Warnings

breaking v2.0.0 removed the old `trustedCalls` option; use `trustedLibraries` instead. ↓

fix Replace any usage of `trustedCalls` option with `trustedLibraries` array of function names.

deprecated Default trusted library is assumed to be `DOMPurify.sanitize`. If you do not use DOMPurify, you must specify your own trusted library via the `trustedLibraries` option. ↓

fix Add `trustedLibraries: ['yourSanitizer']` to the rule options.

gotcha The plugin only lints static code; dynamic or indirect calls to `dangerouslySetInnerHTML` may not be caught. ↓

fix Define any dynamic HTML generation in a function that uses a trusted sanitizer and is called with known arguments.

gotcha The plugin does not check the content of the HTML passed to `dangerouslySetInnerHTML`; it only ensures a sanitization function is used in the same expression. ↓

fix Always wrap the HTML in a call to a trusted sanitizer like `DOMPurify.sanitize`.

gotcha For Vue projects, the rule only applies to `v-html`; it does not cover other potential XSS vectors like `:innerHTML` or dynamic component rendering. ↓

fix Consider using additional linting rules or manual reviews for other XSS vectors.

Install

npm install eslint-plugin-risxss

yarn add eslint-plugin-risxss

pnpm add eslint-plugin-risxss

Imports

catch-potential-xss-react
wrong
```
rules: { 'risxss/catch-potential-xss-react': 2 }
```
correct
```
rules: { 'risxss/catch-potential-xss-react': 'error' }
```
Rule is configured via ESLint rules object; severity can be 'error', 'warn', or 2.

catch-potential-xss-vue

wrong

rules: { 'risxss/catch-potential-xss-vue': 'error' } without options when needed

correct

rules: { 'risxss/catch-potential-xss-vue': ['error', { trustedLibraries: ['xss'] }] }

Options object with trustedLibraries array is optional.

Quickstart

Demonstrates installing the plugin, configuring the React XSS rule, and a component that triggers the lint error with the fix using DOMPurify.sanitize.

// Install plugin
yarn add eslint-plugin-risxss --dev

// .eslintrc.js
module.exports = {
  env: { browser: true, es6: true },
  extends: 'eslint:recommended',
  parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 2018, sourceType: 'module' },
  plugins: ['react', 'risxss'],
  rules: { 'risxss/catch-potential-xss-react': 'error' }
};

// Component with potential XSS
import React from 'react';
import DOMPurify from 'dompurify';

const MyComponent = ({ html }) => {
  // This will trigger the rule because DOMPurify is not used
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
};

// To fix, sanitize the input:
const SafeComponent = ({ html }) => {
  return <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} />;
};