A comprehensive, enterprise-grade security vulnerability scanner built with React, TypeScript, and TailwindCSS. This application performs extensive security assessments on websites, including SSL/TLS analysis, security header validation, sitemap scanning, XSS detection, and more.

• SSL/TLS Analysis: Certificate validation, expiration checks, and encryption protocol assessment with CVSS scoring
• Security Headers Audit: Comprehensive analysis of HSTS, CSP, X-Frame-Options, X-Content-Type-Options, and more
• Sitemap Discovery: Automatic sitemap.xml parsing with support for sitemap indexes
• Mixed Content Detection: Identifies HTTP resources on HTTPS pages (scripts, images, stylesheets)
• Cookie Security: Validates Secure, HttpOnly, and SameSite attributes with detailed remediation
• XSS Vulnerability Detection: Scans for cross-site scripting vectors including inline scripts and event handlers
• CSRF Protection: Checks forms for CSRF token implementation
• SQL Injection Testing: Detects potential SQL injection vulnerabilities and database error disclosure
• Outdated Library Detection: Identifies vulnerable JavaScript libraries (jQuery, React, Angular, Vue, Bootstrap, Lodash, Axios)
• Sensitive File Exposure: Checks for exposed .git, .env, config files, and admin directories
• Directory Listing: Detects enabled directory browsing vulnerabilities
• Information Disclosure: Detects server information leakage through headers

• Interactive Dashboard: Real-time visualization with charts and graphs
• Risk Scoring: Intelligent risk assessment (0-100 scale)
• Severity Classification: Critical, High, Medium, Low, and Info categories
• Detailed Findings: Each vulnerability includes:
  • Description and evidence
  • CWE (Common Weakness Enumeration) mapping
  • CVSS scores where applicable
  • Remediation recommendations
• PDF Report Generation: Comprehensive, professional PDF reports with:
  • Executive summary
  • Risk assessment
  • Detailed vulnerability listings
  • Remediation guidance

• Beautiful Modern Design: Gradient backgrounds, smooth animations, professional styling
• Responsive Layout: Works seamlessly on desktop, tablet, and mobile
• Real-time Progress: Live scan progress with detailed status messages
• Toast Notifications: User-friendly feedback for all operations
• Interactive Charts: Pie charts and bar graphs using Recharts
• Color-coded Severity: Visual indicators for quick risk identification

• Node.js 18+ and npm/yarn
• Modern web browser (Chrome, Firefox, Safari, Edge)

1. Clone or navigate to the project directory:

   cd /Users/macbook/Downloads/Group-18/security-scanner-webapp

2. Install dependencies:

   npm install

You need to run both the frontend and backend simultaneously:

npm run server

The backend will start on http://localhost:3001

npm run dev

The frontend will start on http://localhost:3000

Open your browser and navigate to: http://localhost:3000

1. Enter Target Domain

   • Type the website domain or URL in the input field
   • Examples: example.com, www.example.com, https://example.com
   • Click "Start Comprehensive Security Scan"

2. Monitor Scan Progress

   • Watch real-time progress updates
   • View current scanning stage
   • Progress bar shows completion percentage

3. Review Results

   • View executive summary with risk score
   • Analyze severity distribution via charts
   • Review detailed findings with evidence
   • Check scan coverage and performance metrics

4. Download Report

   • Click "Download Full Report" button
   • Receive professional PDF with all findings
   • Share with stakeholders or clients

security-scanner-webapp/
├── src/
│   ├── components/          # React components
│   │   ├── Header.tsx       # App header with branding
│   │   ├── ScanInput.tsx    # Domain input form
│   │   ├── ScanProgress.tsx # Progress indicator
│   │   └── ResultsDashboard.tsx # Results visualization
│   ├── services/
│   │   └── scanner.ts       # Core scanning logic
│   ├── types/
│   │   └── index.ts         # TypeScript type definitions
│   ├── utils/
│   │   └── pdfGenerator.ts  # PDF report generation
│   ├── App.tsx              # Main application component
│   ├── main.tsx             # Application entry point
│   └── index.css            # Global styles & Tailwind
├── server/
│   └── index.js             # Express.js backend API
├── public/                  # Static assets
├── package.json             # Dependencies and scripts
├── tsconfig.json            # TypeScript configuration
├── tailwind.config.js       # TailwindCSS configuration
├── vite.config.ts           # Vite build configuration
└── README.md                # This file

• Certificate validity and expiration
• Protocol version assessment
• HTTPS enforcement

• Strict-Transport-Security (HSTS)
• Content-Security-Policy (CSP)
• X-Frame-Options
• X-Content-Type-Options
• X-XSS-Protection
• Information disclosure headers

• Mixed content (HTTP on HTTPS)
• Inline JavaScript detection
• eval() and new Function() usage
• Unsafe iframe configurations

• Secure flag validation
• HttpOnly attribute check
• SameSite policy assessment

• XSS vulnerability vectors
• CSRF protection validation
• SQL injection entry points (basic)
• Form security assessment

• Outdated library detection
• Known vulnerability identification
• Version comparison against latest

• sitemap.xml discovery
• URL extraction
• Sitemap index handling

• React 18: Modern UI library
• TypeScript: Type-safe development
• TailwindCSS: Utility-first CSS framework
• Vite: Next-generation build tool
• Recharts: Data visualization
• Lucide React: Beautiful icon library
• jsPDF: PDF generation
• React Hot Toast: Notifications
• Axios: HTTP client

• Express.js: Web server framework
• CORS: Cross-origin support
• Cheerio: HTML parsing
• xml2js: XML parsing for sitemaps
• Node.js HTTPS/HTTP: Native protocols

The generated PDF report includes:

1. Title Page: Domain, scan date, report metadata
2. Executive Summary: Overall risk assessment and score
3. Summary Statistics: Vulnerability counts by severity
4. Scan Coverage: URLs discovered and scanned
5. Detailed Findings: Complete vulnerability documentation
   • Title and severity
   • Category and CWE mapping
   • Description and evidence
   • Remediation recommendations
6. Professional Formatting: Color-coded, well-structured, easy to read

The backend provides the following endpoints:

• POST /api/sitemap - Sitemap discovery and parsing
• POST /api/ssl-check - SSL/TLS certificate validation
• POST /api/headers - Security headers analysis
• POST /api/scan-page - Page content scanning
• POST /api/cookies - Cookie security validation
• POST /api/xss-check - XSS vulnerability detection
• POST /api/libraries - Library version checking

You can customize ports in:

• vite.config.ts - Frontend port (default: 3000)
• server/index.js - Backend port (default: 3001)

• Rate Limiting: Scans limited to 50 URLs from sitemap to prevent overwhelming target servers
• False Positives: Some findings may be false positives and require manual verification
• Network Access: Requires network access to scan external websites
• CORS: Backend proxy handles CORS limitations
• Legal: Only scan websites you own or have permission to test

This tool is designed for:

• Security audits of your own websites
• Penetration testing with proper authorization
• Educational purposes
• Compliance assessments

⚠️ Important: Always obtain proper authorization before scanning any website. Unauthorized security testing may be illegal.

• Ensure backend is running on port 3001
• Check for port conflicts
• Verify CORS configuration

• Check target website accessibility
• Verify network connectivity
• Some sites block automated scanning

• Check browser console for errors
• Ensure jsPDF library loaded correctly
• Try with smaller result sets

• Database integration for scan history
• User authentication and multi-tenancy
• Scheduled scanning capability
• Email report delivery
• API rate limiting
• Advanced SQL injection detection
• Directory traversal testing
• Subdomain enumeration
• Port scanning integration
• CVE database integration
• Custom scan templates
• Compliance frameworks (OWASP, PCI-DSS)

This project is for educational and authorized security testing purposes only.

For issues, questions, or contributions, please refer to your project documentation or contact your development team.

Built with ❤️ for Information Security Professionals