Project Overview

Before i start never scan a site you don’t own or have explicit permission for.

Chapter 1: Why I Built WebShield

WebShield was my attempt to combine my backend experience, frontend skills, and curiosity around web security into one tool. I wanted something practical: a way to scan any website for vulnerabilities headers, cookies, XSS, exposed keys  and get actionable, detailed, and even AI-augmented reports.

Most security scanners I tried were either too technical for regular developers, too vague to trust, or locked behind paid tiers. So I built my own  one that’s free, detailed, and fast enough for everyday use. And I wanted it to feel professional, modern, and educational not just functional.

Chapter 2: What It Does

WebShield allows you to enter any public website and scan it for a wide range of common web security issues. It performs:

• Security header analysis (CSP, HSTS, X-XSS-Protection, etc.)
• XSS vulnerability checks
• TLS/SSL validation
• Insecure cookies (missing Secure, HttpOnly, or SameSite)
• Credentials over HTTP
• Exposed API keys / sensitive info in source
• CSP validation and misconfig detection
• Technology fingerprinting (CMS, JS libs, analytics, etc.)

Once the scan completes, you get a visual report with:

• Severity levels and exploit likelihood
• Real-world attack scenarios
• Exact vulnerable endpoints
• Remediation steps with code examples
• Optional AI-powered assistant for follow-up questions

It’s not just a scanner it’s a full learning tool and diagnostic dashboard.

Chapter 3: How It Works

1. The user enters a target URL in the frontend.
2. A Netlify function proxies the request to the Node.js backend.
3. The backend uses axios and cheerio to fetch and parse the website.
4. Multiple custom scans are performed: headers, HTML comments, cookie flags, TLS config, etc.
5. Optionally, results are enhanced with OpenAI for deeper insights.
6. The full structured result is returned and visualized on the frontend.
7. User can interact with the AI assistant to ask more about each issue.

All requests are stateless  nothing is stored permanently.

Chapter 4: Tech Stack Breakdown

Frontend (client/)

• React + TypeScript (SPA)
• Material-UI (component styling)
• Chart.js (data visualization)
• React Router (page routing)
• Axios (API requests)
• Context API (state sharing)
• Netlify Functions (proxying backend calls securely)

Backend (server/)

• Node.js + Express (API server)
• TypeScript
• Cheerio (HTML parsing)
• Helmet, CORS, Rate Limiting (security)
• Winston (logging)
• OpenAI API (optional AI assistant)
• Custom scanning logic for all checks

Deployment

• Netlify (frontend + serverless function)
• (backend server hosting)
• GitHub Actions (for CI/CD)

Chapter 5: Why It’s Unique

• ✅ AI-Powered Assistant: Ask “What’s wrong with my CSP?”  and get a contextual answer.
• ✅ Vulnerability Context: Real examples of how issues are exploited.
• ✅ Remediation-First Reports: Fix suggestions and sample patches, not just problem lists.
• ✅ Real-Time Scanning: No queues, no logins, no lag.
• ✅ Dev-Educational: It doesn’t just scan  it explains.
• ✅ Ethical by Design: Includes warnings and best practices to promote responsible usage.

Chapter 6: Ethics and Responsibility

WebShield is built for ethical testing and self-auditing only. The UI clearly warns users: never scan a site you don’t own or have explicit permission for. Unauthorized scanning may be illegal in some jurisdictions.

This project taught me how to walk the line between powerful automation and responsible tech  something every dev should learn when working in security.

✅ Final Words

WebShield is one of the most complete security-focused tools I’ve built solo. It’s not just a scanner  it’s an educational assistant, a diagnostic tool, and a mini security lab. Whether you’re a junior dev checking your portfolio site, or a senior auditing an enterprise app, WebShield gives you a fast, insightful breakdown of potential risks.

And I’m proud of how clean the UI feels. It’s fast. It’s visual. It’s built for people like me  and maybe for you too.

AGAIN never scan a site you don’t own or have explicit permission for.