🛡RisXSS

Eradicate all XSS flaws of your React or Vue application using a single ESLint rule.

How to install RisXSS ?

• First, use your favorite package manager to add eslint-plugin-risxss in your devDependencies, for example with yarn :

yarn add eslint-plugin-risxss --dev

• Then, you just have to add the tailored rule for your projet (React or Vue) :

  • risxss/catch-potential-xss-react for React project
  • risxss/catch-potential-xss-vue for Vue project

To do so, add these lines in your eslint config, for instance if you use .eslintrc.js config file :

If your project uses React/Javascript :

1module.exports = {
2    env: {
3        browser: true,
4        es6: true
5    },
6    extends: 'eslint:recommended',
7    parserOptions: {
8        ecmaFeatures: {
9            jsx: true
10        },
11        ecmaVersion: 2018,
12        sourceType: 'module'
13    },
14    plugins: ['react', 'risxss'],      //  <<< add risxss in plugins
15    rules: {
16        'risxss/catch-potential-xss-react': 'error'  //  <<< add this in rules
17    }
18};

If your project uses React/TypeScript :

1module.exports = {
2    env: {
3        browser: true,
4        es6: true
5    },
6    parser: '@typescript-eslint/parser',
7    extends: 'eslint:recommended',
8    parserOptions: {
9        project: './tsconfig.json',
10        ecmaFeatures: {
11            jsx: true
12        },
13        ecmaVersion: 2018,
14        sourceType: 'module'
15    },
16    plugins: ['risxss'],   //  <<< add risxss in plugins
17    rules: {
18        'risxss/catch-potential-xss-react': 'error'   //  <<< add this in rules
19    }
20};

If your project uses Vue.js

1module.exports = {
2    env: {
3        browser: true
4    },
5    extends: ['plugin:vue/essential'],
6    parserOptions: {
7        parser: 'babel-eslint'
8    },
9    plugins: ['vue', 'risxss'],   //  <<< add risxss in plugins
10    rules: {
11        'risxss/catch-potential-xss-vue': 'error'   //  <<< add this in rules
12    }
13};

Rules

• catch-potential-xss-react - Enforce the use of dompurify when using dangerouslySetInnerHtml
• catch-potential-xss-vue - Enforce the use of dompurify when using v-html

Configuring the rules

Sometimes you have your own rules to prevent XSS and you don't use DOMPurify.sanitize on your inputs. You can add your own function name to the RisXSS whitelist by passing them as options.

:warning: We still recommend using DOMPurify to sanitize your inputs :warning:

1module.exports = {
2    env: {
3        browser: true
4    },
5    extends: ['plugin:vue/essential'],
6    parserOptions: {
7        parser: 'babel-eslint'
8    },
9    plugins: ['vue', 'risxss'],   //  <<< add risxss in plugins
10    rules: {
11        'risxss/catch-potential-xss-vue': ['error', {
12            trustedLibraries: ['xss'] //  <<< define your anti XSS function here.
13        }]
14    }
15};

1// in your file
2import { sanitize } from 'xss';
3
4export const DesktopPostCard = ({ post }) => (
5  <div dangerouslySetInnerHTML={{ __html: sanitize(post.content) }} />
6);

ESLint 9 (Flat Config)

risxss/catch-potential-xss-react

1// eslint.config.js
2import risxss from 'eslint-plugin-risxss-eslint9';
3
4export default [
5  {
6    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
7    plugins: {
8      risxss
9    },
10    rules: {
11      'risxss/catch-potential-xss-react': [
12        'error',
13        {
14          trustedLibraries: ['@frontend/core/shared/lib/cleanHTML/safeHTML']
15        }
16      ],
17      'risxss/catch-potential-xss-vue': 'error'
18    },
19    languageOptions: {
20      ecmaVersion: 2022,
21      sourceType: 'module',
22      parserOptions: {
23        ecmaFeatures: {
24          jsx: true
25        }
26      }
27    }
28  }
29];

Using a ready-made configuration

1// eslint.config.js
2import risxss from 'eslint-plugin-risxss-eslint9';
3
4export default [
5  risxss.configs.recommended,
6  {
7    rules: {
8      'risxss/catch-potential-xss-react': [
9        'error',
10        {
11          trustedLibraries: ['@frontend/core/shared/lib/cleanHTML/safeHTML']
12        }
13      ]
14    }
15  }
16];

risxss/catch-potential-xss-vue

Examples of unsafe code

1<template>
2
3  <div v-html="userInput"></div>
4
5
6  <div v-html="someUntrustedVariable"></div>
7</template>

Examples of secure code

1<template>
2
3  <div v-html="sanitizeHtml(userInput)"></div>
4
5
6  <div v-html="safeHTML(userInput)"></div>
7</template>
8
9<script>
10import DOMPurify from 'dompurify';
11import { safeHTML } from '@frontend/core/shared/lib/cleanHTML/safeHTML';
12
13export default {
14  methods: {
15    sanitizeHtml(html) {
16      return DOMPurify.sanitize(html);
17    },
18    safeHTML
19  }
20}
21</script>

License

MIT