vue-security-scanner

Vue Security Scanner

A comprehensive, modular security scanning tool for Vue.js projects that identifies potential vulnerabilities and security issues.

🚀 Quick Start

Installation

# Global installation
npm install -g vue-security-scanner

# Or run directly without installation
npx vue-security-scanner [project-path]

Basic Usage

# Scan current directory
vue-security-scanner .

# Scan with detailed output
vue-security-scanner . --level detailed

# Scan and save report
vue-security-scanner . --output json --report security-report.json

✨ Key Features

Core Security

• 100+ Security Rules: Comprehensive coverage including XSS, injection, authentication, and more
• Advanced Semantic Analysis: AST-based code analysis with user input tracking
• Dynamic Application Security Testing (DAST): Runtime vulnerability scanning
• Enhanced Dependency Security: npm audit integration with built-in vulnerability database

Vue Support

• Vue 2.x: Full support for Options API and Vue 2 features
• Vue 3.x: Complete support for Composition API and Vue 3 features
• Vue 3.5+: Enhanced support for defineModel, defineAsyncComponent, v-memo, defineOptions
• Vue 3.6+: Support for Vapor mode and latest optimizations

Enterprise Features

• Distributed Scanning: Scalable architecture supporting 10,000+ files
• Visualization Dashboard: Interactive web dashboard with live statistics
• Advanced Reporting: Trend analysis, compliance reports, vulnerability distribution
• Trae CN Integration: Automated vulnerability reporting and tracking

Performance

• Performance Profiles: Fast, balanced, and thorough scanning modes
• Caching System: Comprehensive caching for improved performance
• Incremental Scanning: Only scan modified files for faster subsequent scans
• Parallel Processing: Automatic CPU core detection and optimal worker count
• GPU Acceleration: GPU-accelerated regex matching with automatic CPU fallback

Compliance

• China-Specific Standards: GB/T series, Cybersecurity Law, Data Security Law, PIPL, Cryptography Law
• OWASP Top 10 2021: Full coverage of OWASP Top 10
• CWE Mapping: Common Weakness Enumeration references
• Multiple Report Formats: JSON, HTML, Text, XML, SARIF

Integrations

• VSCode Extension: Real-time security feedback in editor
• Vite Plugin: Compile-time security scanning
• Webpack Plugin: Build-time security scanning
• Nuxt.js Module: SSR and static generation support
• Docker Integration: Containerized scanning environment
• Jenkins Plugin: CI/CD automation
• CI/CD Platforms: GitHub Actions, GitLab CI/CD, Azure DevOps, Bitbucket Pipelines, CircleCI, Travis CI

Cross-Framework Support

• uni-app: Security analysis for uni-app projects
• Taro: Security analysis for Taro framework
• WeChat Mini Program: Security scanning for WeChat Mini Program code
• Baidu Smart Program: Security scanning for Baidu Smart Programs
• ByteDance Mini Program: Security scanning for ByteDance Mini Programs
• QQ Mini Program: Security scanning for QQ Mini Programs

Threat Intelligence

• CNCERT/CC: Access to CNCERT/CC threat intelligence
• CNNVD: Access to CNNVD vulnerability database
• CNVD: Access to CNVD vulnerability database
• NVD: Access to NIST National Vulnerability Database
• CVE: Access to CVE vulnerability database
• OWASP: Access to OWASP threat intelligence

AI-Assisted Security

• Vue Security MCP: Real-time security feedback during AI-assisted development
• AI Coding Assistant Integration: Integration with popular AI coding assistants
• Batch Processing: Batch processing capabilities for multiple code snippets
• Memory Optimization: Memory optimization for large-scale scanning

📚 Documentation

Comprehensive documentation is available to help you get started and make the most of Vue Security Scanner:

Quick Start

• Installation Guide - System requirements, installation methods, and configuration
• Usage Tutorial - Command-line options, scanning modes, and advanced features

Core Features

• Rule Documentation - Complete reference for all security rule modules
• API Reference - Programming interface for scanner integration
• Performance Optimization - Performance tuning and best practices

Advanced Features

• Configuration Guide - Configuration options and customization
• Ecosystem Integration - Integration with various tools and platforms
• Features Guide - Detailed feature descriptions and capabilities
• Vue Features Guide - Vue-specific security features and coverage
• Security Coverage - Comprehensive security vulnerability coverage

Development & Testing

• Development Guide - Development setup and contribution guide
• Testing Guide - Testing strategies and examples

Compliance & Threat Intelligence

• Compliance Guide - Compliance requirements and reporting (China laws, GB/T standards, etc.)
• Threat Intelligence Integration - Threat intelligence sources and configuration

Community

• Contributing Guide - How to contribute to the project
• FAQ - Frequently asked questions and troubleshooting
• Release Notes - Version history and changelog

🌐 Ecosystem & Environment Integrations

Vite Plugin

npm install --save-dev vite-plugin-vue-security

Webpack Plugin

npm install --save-dev webpack-plugin-vue-security

Nuxt.js Module

npm install --save-dev @vue-security/nuxt

Docker Integration

# Build and run scanner container
docker build -t vue-security-scanner .
docker run -v $(pwd):/workspace/project vue-security-scanner /workspace/project --level detailed

Jenkins Plugin

Install through Jenkins plugin manager or manually deploy the .hpi file.

Trae CN Integration

Seamless integration with Trae CN for automated vulnerability reporting and tracking:

// Vite
vueSecurity({
  enableTraeCN: true,
  traeCNApiKey: 'your-api-key',
  traeCNProjectId: 'your-project-id',
  traeCNAutoReport: true,
  traeCNRealtimePush: true
})

VSCode Extension

1. Download the packaged extension (.vsix file)
2. In VSCode, press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
3. Type "Extensions: Install from VSIX..."
4. Select the downloaded .vsix file

🏢 Enterprise Features

Distributed Scanning

For large-scale projects, use distributed scanning to distribute work across multiple workers:

# Start a distributed worker
vue-security-distributed worker --port 3001 --worker-id worker-1

# Run distributed scan
vue-security-distributed scan /path/to/vue-project \
  --workers workers.json \
  --batch-size 10 \
  --output json \
  --report distributed-scan.json \
  --save-results

Visualization Dashboard

Start the web-based dashboard for real-time security monitoring:

# Start the dashboard server
npm run dashboard

# Or using vue-security-distributed command
vue-security-distributed dashboard

# With custom port
vue-security-distributed dashboard --port 8080

Then open your browser to http://localhost:3000 (or custom port) to view:

• Real-time vulnerability statistics
• 30-day vulnerability trends
• Severity distribution charts
• Recent scan history
• Project-level security tracking

For detailed information on distributed scanning and dashboard features, see Distributed Scanning Guide and Dashboard Guide.

Rule Engine

The scanner uses a powerful rule-based engine for security detection. You can extend security rules by creating custom rule files:

// src/rules/my-custom-rules.js
const myCustomRules = [
  {
    id: 'my-rule',
    name: 'My Security Rule',
    severity: 'High',
    description: 'Detects my security issue',
    recommendation: 'Fix recommendation',
    patterns: [
      { key: 'my-pattern', pattern: 'your-regex-pattern' }
    ]
  }
];

module.exports = myCustomRules;

For detailed information on creating custom rules, see Rule Extension Guide and Quickstart: Custom Rules.

Ignore Rules

Create a .vue-security-ignore file in your project root to ignore specific files, directories, or vulnerabilities:

# Ignore directories
node_modules/
dist/
build/

# Ignore file patterns
**/*.min.js
**/vendor/**

# Ignore specific vulnerability types
type:XSS
type:Memory Leak

# Ignore specific rules
rule:custom-api-key
rule:hardcoded-password

# Ignore by severity
severity:low

For more ignore options and detailed instructions, see Ignore Guide

⚙️ Configuration

Create a vue-security-scanner.config.json file to customize scanning behavior:

{
  "rules": {
    "xss": { 
      "enabled": true,
      "severity": "high"
    },
    "dependencies": { 
      "enabled": true,
      "severity": "high"
    }
  },
  "scan": {
    "maxSize": 10,
    "maxDepth": 10,
    "ignoreDirs": [
      "node_modules",
      "dist",
      "build",
      ".git"
    ]
  },
  "output": {
    "showProgress": true,
    "format": "json",
    "showDetails": true,
    "maxIssuesToShow": 100,
    "advancedReport": true,
    "reportPath": "security-report.json"
  },
  "performance": {
    "maxConcurrentFiles": 10,
    "timeout": 30000,
    "enableSemanticAnalysis": true,
    "enableNpmAudit": true,
    "enableVulnerabilityDB": true
  },
  "reportHistory": {
    "enabled": true,
    "path": ".vue-security-reports",
    "maxSize": 100
  },
  "compliance": {
    "enabled": true,
    "standards": ["OWASP", "GDPR", "HIPAA", "PCI-DSS", "SOX"]
  }
}

For detailed configuration options, see Configuration Guide.

🛠️ Development

Setting Up the Project

# Clone the repository
git clone <repository-url>
cd vue-security-scanner

# Install dependencies
npm install

# Run the scanner
node bin/vue-security-scanner.js [project-path]

For detailed development information, see Development Guide.

📊 Output Formats

The scanner can output results in multiple formats:

• JSON: Detailed structured data for integration with other tools
• Console: Human-readable output for quick analysis
• HTML: Formatted reports for sharing with stakeholders
• Text: Plain text format for simple reporting
• XML: Structured XML format for integration
• SARIF: Static Analysis Results Interchange Format for tool integration

🧪 Test Examples & Vulnerability Coverage

The Vue Security Scanner includes comprehensive test examples covering 1000+ vulnerability scenarios across 36 test files:

Test Coverage

• Test Files: 41 files
• Vulnerability Examples: 1000+ examples
• Security Rules: 220+ rules
• Vue-Specific Coverage: 95%+
• General Security Coverage: 90%+

For detailed test examples and vulnerability coverage, see Testing Guide and Security Coverage.

🛡️ Security Coverage

The tool addresses the OWASP Top 10 and other security standards:

• Injection flaws
• Broken Authentication
• Sensitive Data Exposure
• XML External Entities (XXE)
• Security Misconfigurations
• Vulnerable Components
• Insufficient Logging & Monitoring

For comprehensive security coverage information, see Security Coverage Guide.

Vue-Specific Feature Verification

Our scanner provides comprehensive verification of Vue.js-specific features:

Vue 2/3 Component System

• Component Definition Security
• Props Validation
• Event System Security
• Lifecycle Hooks Security

Vue Template System

• Directive Security (v-html, v-text, v-bind, v-for, etc.)
• Custom Directives Security

Vue Reactive System

• Data Binding Security
• Computed Properties Security
• Watchers Security

Vue 2 Features

• Options API Security
• Filters Security
• Mixins Security
• Plugin System Security

Vue 3 Features

• Composition API Security (ref, reactive, computed, watch, provide/inject)
• Teleport Security
• Suspense Security

Vue Router Security

• Route Definition Security
• Route Parameters Security
• Route Guards Security
• Dynamic Routes Security

State Management Security

• Vuex Security
• Pinia Security
• Dynamic Modules Security

For detailed Vue-specific security information, see Vue Features Guide.

🆕 New Features

1. Advanced Semantic Analysis

AST-based code analysis that significantly improves detection accuracy:

• Reduced False Positives
• User Input Tracking
• Confidence Scoring
• Smart Merging

2. Enhanced Dependency Security

Comprehensive dependency vulnerability scanning:

• npm Audit Integration
• Built-in Vulnerability Database
• Outdated Dependency Detection
• License Compliance

3. Advanced Reporting

Enterprise-grade reporting with comprehensive analysis:

• Trend Analysis
• Compliance Reports
• Vulnerability Distribution
• CWE Mapping
• OWASP Top 10 Mapping

4. CI/CD Integration

Seamless integration with major CI/CD platforms:

• GitHub Actions
• GitLab CI/CD
• Jenkins
• Azure DevOps
• Bitbucket Pipelines
• CircleCI
• Travis CI

For detailed information on new features, see Features Guide and Release Notes.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on how to:

• Submit bug reports
• Propose new features
• Contribute code
• Improve documentation

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support, please open an issue in the GitHub repository or contact the maintainers.

Built with ❤️ for the Vue.js community