Package Exports

webpack-plugin-react-security
webpack-plugin-react-security/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-plugin-react-security) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

Check console output for specific issues
Fix security vulnerabilities in your code
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

react-security-scanner - CLI tool
vite-plugin-react-security-scanner - Vite plugin

License

MIT

Support

📧 Email: ereddate@gmail.com
🐛 Issues: GitHub Issues
📖 Docs: React Security Scanner

Contributing

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