webpack-plugin-react-security-scanner

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

Features

• 🔍 Automatic Scanning - Scans your React code during Webpack build
• 🚫 Fail on Error - Optionally fail 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 webpack-plugin-react-security-scanner --save-dev

Usage

Basic Usage

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

const ReactSecurityScannerWebpackPlugin = require('webpack-plugin-react-security-scanner');

module.exports = {
  plugins: [
    new ReactSecurityScannerWebpackPlugin()
  ]
};

TypeScript Usage

import { ReactSecurityScannerWebpackPlugin } from 'webpack-plugin-react-security-scanner';

export default {
  plugins: [
    new ReactSecurityScannerWebpackPlugin()
  ]
};

Advanced Configuration

const ReactSecurityScannerWebpackPlugin = require('webpack-plugin-react-security-scanner');

module.exports = {
  plugins: [
    new ReactSecurityScannerWebpackPlugin({
      // 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 build if security errors are found | | reportFormat | 'console' \| 'json' \| 'html' | 'console' | Output format for report | | reportPath | string | undefined | File path for JSON/HTML reports |

Example Output

Console Output

🔍 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 a 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

Jenkins

pipeline {
  agent any
  stages {
    stage('Build') {
      steps {
        sh 'npm install'
        sh 'npm run build'
      }
    }
  }
}

Troubleshooting

Build fails with security errors

If build fails due to security errors:

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

Too many false positives

Adjust severity option to only report errors:

new ReactSecurityScannerWebpackPlugin({
  severity: 'error'
})

Or exclude specific files:

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

Plugin not working

Make sure:

• Webpack version is >= 4.0.0
• Plugin is added to the plugins array
• Configuration is valid JavaScript/TypeScript

Related Packages

• react-security-scanner - CLI tool
• vite-plugin-react-security-scanner - Vite 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.