vite-plugin-react-security-scanner

Vite plugin for React Security Scanner - Automatically scan your React code for security vulnerabilities during build.

Features

• 🔍 Automatic Scanning - Scans your React code during Vite build
• 🚫 Fail on Error - Optionally fail the build if security errors are found
• 📊 Multiple Report Formats - Console, JSON, or HTML reports
• ⚙️ Configurable - Customize include/exclude patterns and severity levels
• 🎯 45+ Security Rules - Covers XSS, injection attacks, data leaks, and more

Installation

npm install vite-plugin-react-security-scanner --save-dev

Usage

Basic Usage

Add the plugin to your vite.config.js or vite.config.ts:

import { defineConfig } from 'vite';
import reactSecurityScannerPlugin from 'vite-plugin-react-security-scanner';

export default defineConfig({
  plugins: [
    reactSecurityScannerPlugin()
  ]
});

Advanced Configuration

import { defineConfig } from 'vite';
import reactSecurityScannerPlugin from 'vite-plugin-react-security-scanner';

export default defineConfig({
  plugins: [
    reactSecurityScannerPlugin({
      // Files to include (default: ['src/**/*.{js,jsx,ts,tsx}'])
      include: ['src/**/*.{js,jsx,ts,tsx}'],
      
      // Files to exclude (default: ['node_modules/**', 'dist/**', 'build/**'])
      exclude: ['node_modules/**', 'dist/**', 'build/**', 'tests/**'],
      
      // Severity level to report (default: 'all')
      severity: 'error', // 'error' | 'warning' | 'info' | 'all'
      
      // Fail build on security errors (default: true)
      failOnError: true,
      
      // Report format (default: 'console')
      reportFormat: 'json', // 'console' | 'json' | 'html'
      
      // Report file path (required for json/html formats)
      reportPath: './security-report.json'
    })
  ]
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | include | string[] | ['src/**/*.{js,jsx,ts,tsx}'] | Glob patterns for files to include | | exclude | string[] | ['node_modules/**', 'dist/**', 'build/**'] | Glob patterns for files to exclude | | severity | 'error' \| 'warning' \| 'info' \| 'all' | 'all' | Minimum severity level to report | | failOnError | boolean | true | Fail the build if security errors are found | | reportFormat | 'console' \| 'json' \| 'html' | 'console' | Output format for the report | | reportPath | string | undefined | File path for JSON/HTML reports |

Example Output

Console Output

🔍 React Security Scanner plugin loaded

🔍 Starting React Security Scan...

📊 Scan Summary:
   Total Files Scanned: 15
   Total Issues: 23
   Errors: 5
   Warnings: 18

⚠️  Security issues found. Please review them.

JSON Report

{
  "summary": {
    "totalFiles": 15,
    "filesWithIssues": 8,
    "totalIssues": 23,
    "errors": 5,
    "warnings": 18,
    "info": 0
  },
  "results": [...]
}

Security Rules

This plugin uses React Security Scanner which includes 45+ security rules across 22 categories:

• XSS (Cross-Site Scripting)
• Code Injection
• Secrets & Credentials
• Data Storage
• Cryptography
• Authentication
• Transport Security
• Open Redirect
• Injection Attacks
• File Operations
• Cookies
• CSRF
• Information Disclosure
• Input Validation
• Error Handling
• JSON
• Regular Expressions
• Network
• Security Headers
• XML Security
• CORS
• WebSocket
• Clickjacking
• Timing Attacks
• Prototype Pollution
• React Props

See React Security Scanner documentation for the complete list of rules.

CI/CD Integration

GitHub Actions

name: Build

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npm run build

GitLab CI

build:
  script:
    - npm install
    - npm run build

Troubleshooting

Build fails with security errors

If the build fails due to security errors:

1. Check the console output for specific issues
2. Fix the security vulnerabilities in your code
3. Re-run the build

Too many false positives

Adjust the severity option to only report errors:

reactSecurityScannerPlugin({
  severity: 'error'
})

Or exclude specific files:

reactSecurityScannerPlugin({
  exclude: ['src/safe-file.js', 'tests/**']
})

Related Packages

• react-security-scanner - CLI tool
• webpack-plugin-react-security-scanner - Webpack plugin

License

MIT

Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Docs: React Security Scanner

Contributing

Contributions are welcome! Please open an issue or pull request on GitHub.