eslint-plugin-risxss-flat

🛡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 :

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

If your project uses React/TypeScript :

module.exports = {
    env: {
        browser: true,
        es6: true
    },
    parser: '@typescript-eslint/parser',
    extends: 'eslint:recommended',
    parserOptions: {
        project: './tsconfig.json',
        ecmaFeatures: {
            jsx: true
        },
        ecmaVersion: 2018,
        sourceType: 'module'
    },
    plugins: ['risxss'],   //  <<< add risxss in plugins
    rules: {
        'risxss/catch-potential-xss-react': 'error'   //  <<< add this in rules
    }
};

If your project uses Vue.js

module.exports = {
    env: {
        browser: true
    },
    extends: ['plugin:vue/essential'],
    parserOptions: {
        parser: 'babel-eslint'
    },
    plugins: ['vue', 'risxss'],   //  <<< add risxss in plugins
    rules: {
        'risxss/catch-potential-xss-vue': 'error'   //  <<< add this in rules
    }
};

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:

module.exports = {
    env: {
        browser: true
    },
    extends: ['plugin:vue/essential'],
    parserOptions: {
        parser: 'babel-eslint'
    },
    plugins: ['vue', 'risxss'],   //  <<< add risxss in plugins
    rules: {
        'risxss/catch-potential-xss-vue': ['error', {
            trustedLibraries: ['xss'] //  <<< define your anti XSS function here.
        }]
    }
};

// in your file
import { sanitize } from 'xss';

export const DesktopPostCard = ({ post }) => (
  <div dangerouslySetInnerHTML={{ __html: sanitize(post.content) }} />
);

ESLint 9 (Flat Config)

risxss/catch-potential-xss-react

// eslint.config.js
import risxss from 'eslint-plugin-risxss-eslint9';

export default [
  {
    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
    plugins: {
      risxss
    },
    rules: {
      'risxss/catch-potential-xss-react': [
        'error',
        {
          trustedLibraries: ['@frontend/core/shared/lib/cleanHTML/safeHTML']
        }
      ],
      'risxss/catch-potential-xss-vue': 'error'
    },
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: 'module',
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        }
      }
    }
  }
];

Using a ready-made configuration

// eslint.config.js
import risxss from 'eslint-plugin-risxss-eslint9';

export default [
  risxss.configs.recommended,
  {
    rules: {
      'risxss/catch-potential-xss-react': [
        'error',
        {
          trustedLibraries: ['@frontend/core/shared/lib/cleanHTML/safeHTML']
        }
      ]
    }
  }
];

risxss/catch-potential-xss-vue

Examples of unsafe code

<template>

  <div v-html="userInput"></div>


  <div v-html="someUntrustedVariable"></div>
</template>

Examples of secure code

<template>

  <div v-html="sanitizeHtml(userInput)"></div>


  <div v-html="safeHTML(userInput)"></div>
</template>

<script>
import DOMPurify from 'dompurify';
import { safeHTML } from '@frontend/core/shared/lib/cleanHTML/safeHTML';

export default {
  methods: {
    sanitizeHtml(html) {
      return DOMPurify.sanitize(html);
    },
    safeHTML
  }
}
</script>

License

MIT