feat: updated configurations for the flat config format

.gitignore

@@ -2,3 +2,4 @@ node_modules
 yarn.lock
 .nyc_output/
 .vscode/
+.idea/

index.js

@@ -3,22 +3,53 @@
 const path = require('path');
 const importModules = require('import-modules');
 
-module.exports = {
+const plugin = {
+  meta: {
+    name: 'eslint-plugin-risxss',
+    version: '1.0.0'
+  },
   rules: importModules(path.resolve(__dirname, 'rules'), { camelize: false }),
-  configs: {
-    recommended: {
-      env: {
-        es6: true
-      },
-      parserOptions: {
-        ecmaVersion: 2019,
-        sourceType: 'module'
-      },
-      plugins: ['risxss'],
-      rules: {
-        'risxss/catch-potential-xss-react': 'error',
-        'risxss/catch-potential-xss-vue': 'error'
+  configs: {}
+};
+
+// Создаем конфигурацию для ESLint 9 (flat config)
+plugin.configs.recommended = {
+  name: 'risxss/recommended',
+  languageOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true
       }
     }
+  },
+  plugins: {
+    risxss: plugin
+  },
+  rules: {
+    'risxss/catch-potential-xss-react': 'error',
+    'risxss/catch-potential-xss-vue': 'error'
   }
 };
+
+// Для совместимости с ESLint 8 (legacy config)
+plugin.configs.legacy = {
+  env: {
+    es6: true
+  },
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  plugins: ['risxss'],
+  rules: {
+    'risxss/catch-potential-xss-react': 'error',
+    'risxss/catch-potential-xss-vue': 'error'
+  }
+};
+
+module.exports = plugin;

package.json

@@ -1,29 +1,35 @@
 {
-  "name": "eslint-plugin-risxss",
-  "version": "2.1.0",
+  "name": "eslint-plugin-risxss-flat",
+  "version": "2.2.0",
   "description": "Various XSS-hunter ESLint rules",
-  "author": {
-    "name": "Guillaume Klaus",
-    "email": "guillaumek@theodo.fr"
-  },
+  "author": "SergoDrovski",
   "scripts": {
     "test": "nyc ava",
     "lint": "xo",
     "integration": "./test/integration/test.js"
   },
+  "keywords": [
+    "eslint",
+    "eslintplugin",
+    "eslint-plugin",
+    "xss",
+    "security",
+    "react",
+    "vue"
+  ],
   "engines": {
-    "node": ">=6"
+    "node": ">=16.0.0"
   },
   "files": [
     "index.js",
     "rules"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/theodo/RisXSS"
+    "url": "https://github.com/SergoDrovski/RisXSS"
   },
   "dependencies": {
-    "import-modules": "^1.1.0",
+    "import-modules": "^2.1.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.union": "^4.6.0"
@@ -42,6 +48,9 @@
     "vue-eslint-parser": "^7.6.0",
     "xo": "^0.36.1"
   },
+  "peerDependencies": {
+    "eslint": ">=9.0.0"
+  },
   "ava": {
     "files": [
       "test/*.js"

readme.md

@@ -125,6 +125,102 @@ export const DesktopPostCard = ({ post }) => (
 );
 ```
 
+### ESLint 9 (Flat Config)
+
+### `risxss/catch-potential-xss-react`
+
+```javascript
+// 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
+
+```javascript
+// 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
+
+```vue
+<template>
+
+  <div v-html="userInput"></div>
+
+
+  <div v-html="someUntrustedVariable"></div>
+</template>
+```
+
+#### Examples of secure code
+
+```vue
+<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

rules/catch-potential-xss-react.js

@@ -28,45 +28,67 @@ const create = context => {
     options = context.options[0];
   }
   let isVariableTrusted = utils.defaultTrustedCall;
+
   return {
     Program(node) {
       try {
         isVariableTrusted = utils.checkProgramNode(node, isVariableTrusted, options);
       } catch (error) {
-        context.report(node, `${utils.ERROR_MESSAGE} \n ${error.stack}`);
+        context.report({
+          node,
+          message: `${utils.ERROR_MESSAGE} \n ${error.stack}`
+        });
       }
     },
     JSXAttribute(node) {
       try {
         if (isDangerouslySetInnerHTMLAttribute(node)) {
           if (get(node, 'value.type', '') !== 'JSXExpressionContainer') {
-            context.report(node, DANGEROUS_MESSAGE);
+            context.report({
+              node,
+              message: DANGEROUS_MESSAGE
+            });
             return;
           }
           const expression = get(node, 'value.expression', '');
           switch (expression.type) {
             case 'Literal':
-              context.report(node, DANGEROUS_MESSAGE);
+              context.report({
+                node,
+                message: DANGEROUS_MESSAGE
+              });
               break;
             case 'ObjectExpression':
               if (!isInnerHTMLObjectExpressionSafe(expression, isVariableTrusted)) {
-                context.report(node, DANGEROUS_MESSAGE);
+                context.report({
+                  node,
+                  message: DANGEROUS_MESSAGE
+                });
               }
               break;
             case 'CallExpression':
               if (!utils.isVariableSafe(utils.getNameFromExpression(expression), isVariableTrusted, [])) {
-                context.report(node, DANGEROUS_MESSAGE);
+                context.report({
+                  node,
+                  message: DANGEROUS_MESSAGE
+                });
               }
               break;
             default:
               const variableName = `${utils.getNameFromExpression(expression)}.__html`;
               if (!utils.isVariableSafe(variableName, isVariableTrusted, [])) {
-                context.report(node, DANGEROUS_MESSAGE);
+                context.report({
+                  node,
+                  message: DANGEROUS_MESSAGE
+                });
               }
           }
         }
       } catch (error) {
-        context.report(node, `${utils.ERROR_MESSAGE} \n ${error.stack}`);
+        context.report({
+          node,
+          message: `${utils.ERROR_MESSAGE} \n ${error.stack}`
+        });
       }
     },
   };
@@ -75,7 +97,26 @@ const create = context => {
 module.exports = {
   create,
   meta: {
-    type: 'suggestion',
-    fixable: 'code',
+    type: 'problem',
+    docs: {
+      description: 'Detect potential XSS vulnerabilities in React dangerouslySetInnerHTML',
+      category: 'Security',
+      recommended: true
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          trustedLibraries: {
+            type: 'array',
+            items: {
+              type: 'string'
+            }
+          }
+        },
+        additionalProperties: false
+      }
+    ]
   },
 };