Spaces:

mugdhav
/

security_auditor

Running

MugdhaV

Initial deployment: Gradio frontend with Modal backend - Multi-language security scanner with parallel processing

e1e9580 about 1 month ago

23.6 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Security Auditor - Help Guide</title>
	<style>
	:root {
	--bg: #faf9f6;
	--text: #131314;
	--accent: #d97757;
	--accent-hover: #cc6944;
	--gray: #6b7280;
	--light-gray: #9ca3af;
	--border: #e5e7eb;
	--card-bg: #ffffff;
	--critical: #dc2626;
	--critical-bg: #fef2f2;
	--critical-border: #fca5a5;
	--high: #ea580c;
	--high-bg: #fff7ed;
	--high-border: #fdba74;
	--medium: #d97706;
	--medium-bg: #fffbeb;
	--medium-border: #fcd34d;
	--low: #0d9488;
	--low-bg: #f0fdfa;
	--low-border: #5eead4;
	--info-color: #6b7280;
	--info-bg: #f9fafb;
	--info-border: #d1d5db;
	}

	* { margin: 0; padding: 0; box-sizing: border-box; }

	body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.7;
	max-width: 920px;
	margin: 0 auto;
	padding: 40px 24px 60px;
	}

	/* Header */
	.header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 32px;
	}
	.header-icon {
	width: 44px;
	height: 44px;
	background: var(--text);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	}
	.header-icon svg { width: 24px; height: 24px; stroke: white; fill: none; }
	.header-title { font-size: 24px; font-weight: 700; }
	.header-subtitle { font-size: 14px; color: var(--gray); margin-top: 2px; }

	/* Headings */
	h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 48px 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--border);
	display: flex;
	align-items: center;
	gap: 10px;
	}
	h2 .h-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--accent);
	color: white;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
	}
	h3 {
	font-size: 17px;
	font-weight: 600;
	margin: 28px 0 12px;
	color: var(--text);
	}

	/* Paragraphs and lists */
	p { margin: 0 0 14px; color: var(--text); }
	ul, ol { margin: 0 0 16px; padding-left: 24px; }
	li { margin: 6px 0; }

	/* Links */
	a { color: var(--accent); text-decoration: none; }
	a:hover { color: var(--accent-hover); text-decoration: underline; }

	/* Table of Contents */
	.toc {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 24px 28px;
	margin: 0 0 40px;
	}
	.toc-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--text);
	}
	.toc ol { padding-left: 20px; margin: 0; }
	.toc li { margin: 7px 0; font-size: 15px; }
	.toc a { color: var(--accent); font-weight: 500; }

	/* Cards */
	.card {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 20px 24px;
	margin: 16px 0;
	}
	.card-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gray);
	margin-bottom: 6px;
	}

	/* Steps */
	.steps { counter-reset: step; list-style: none; padding-left: 0; }
	.steps li {
	counter-increment: step;
	position: relative;
	padding-left: 40px;
	margin: 14px 0;
	}
	.steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 1px;
	width: 26px;
	height: 26px;
	background: var(--accent);
	color: white;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	/* Severity badges */
	.severity-sample {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	border: 2px solid;
	margin: 4px 4px 4px 0;
	}

	/* Severity table */
	.severity-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
	.severity-table th {
	text-align: left;
	padding: 12px 16px;
	background: var(--bg);
	border-bottom: 2px solid var(--border);
	font-size: 13px;
	font-weight: 600;
	color: var(--gray);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}
	.severity-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
	font-size: 14px;
	}
	.severity-table tr:last-child td { border-bottom: none; }
	.severity-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	}

	/* Screenshots */
	.screenshot {
	display: block;
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: 10px;
	margin: 20px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}
	.screenshot-caption {
	font-size: 13px;
	color: var(--gray);
	text-align: center;
	margin: -10px 0 20px;
	font-style: italic;
	}

	/* Tip / Note boxes */
	.tip {
	background: var(--high-bg);
	border-left: 4px solid var(--accent);
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
	margin: 16px 0;
	font-size: 14px;
	}
	.tip-label {
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 4px;
	}

	/* Footer */
	.footer {
	margin-top: 60px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
	text-align: center;
	color: var(--gray);
	font-size: 13px;
	}

	/* Keyboard shortcut styling */
	kbd {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 13px;
	font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace;
	}

	/* Print */
	@media print {
	body { background: white; max-width: 100%; padding: 20px; }
	.toc { break-after: page; }
	.card, .severity-table tr { break-inside: avoid; }
	.screenshot { max-width: 80%; margin: 12px auto; }
	a { color: var(--text); }
	h2 { break-after: avoid; }
	}

	/* Responsive */
	@media (max-width: 640px) {
	body { padding: 20px 16px 40px; }
	.header-title { font-size: 20px; }
	h2 { font-size: 19px; }
	.severity-table th, .severity-table td { padding: 10px 10px; font-size: 13px; }
	}
	</style>
	</head>
	<body>

	<!-- Header -->
	<div class="header">
	<div class="header-icon">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
	<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
	<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
	</svg>
	</div>
	<div>
	<div class="header-title">Security Auditor</div>
	<div class="header-subtitle">Help Guide</div>
	</div>
	</div>

	<!-- Table of Contents -->
	<nav class="toc">
	<div class="toc-title">Contents</div>
	<ol>
	<li><a href="#getting-started">Getting Started</a></li>
	<li><a href="#local-scan">Scanning a Local Directory</a></li>
	<li><a href="#remote-scan">Scanning a Remote URL</a></li>
	<li><a href="#understanding-results">Understanding Your Results</a></li>
	<li><a href="#nvd-enrichment">National Vulnerability Database (NVD) Enrichment</a> <a href="https://nvd.nist.gov/general/cve-process" target="_blank" rel="noopener noreferrer">NVD CVE Process</a></li>
	<li><a href="#severity-guide">Severity Levels Guide</a></li>
	</ol>
	</nav>

	<!-- Section 1: Getting Started -->
	<h2 id="getting-started"><span class="h-num">1</span> Getting Started</h2>

	<p>
	Security Auditor is a combined <strong>Static Application Security Testing (SAST)</strong> and
	<strong>Dynamic Application Security Testing (DAST)</strong> platform that identifies security
	vulnerabilities in your application code and web deployments. It performs <strong>40+ security checks</strong>
	across two scanning modes.
	</p>

	<p>
	The checks this tool performs overlap with the <strong><a href="https://owasp.org/www-project-top-ten/" target="_blank" rel="noopener noreferrer">Open Web Application Security Project (OWASP)</a></strong> Top Ten; many checks map to common OWASP categories such as Injection, Cross-Site Scripting (XSS), Broken Authentication, and Security Misconfiguration.
	</p>

	<div class="card">
	<div class="card-label">Two Scanning Modes</div>
	<ul>
	<li><strong>Local Directory</strong> — Upload source code files or specify a directory path. The SAST engine scans your code for 28+ vulnerability patterns including SQL injection, XSS, command injection, hardcoded credentials, and more.</li>
	<li><strong>Remote URL</strong> — Enter a web application URL. The DAST engine checks HTTP security headers, probes for exposed sensitive paths, verifies HTTPS configuration, and scans response content for information leaks.</li>
	</ul>
	</div>

	<img src="/helpimg/NewGradioScreenshot_landingPage.png"
	alt="Security Auditor landing page showing Local Directory mode selected"
	class="screenshot" />
	<p class="screenshot-caption">The Security Auditor landing page with Local Directory mode selected.</p>

	<p>
	<strong>Supported file types for local scanning:</strong><br />
	<code>.py, .js, .ts, .java, .php, .go, .rb, .c, .cpp, .cs, .swift, .kt, .scala, .rs, .jsx, .tsx</code>
	</p>

	<!-- Section 2: Local Directory Scan -->
	<h2 id="local-scan"><span class="h-num">2</span> Scanning a Local Directory</h2>

	<p>Use this mode to scan application source code files for security vulnerabilities using static analysis.</p>

	<ol class="steps">
	<li>Select <strong>Local Directory</strong> in the Analysis Mode panel on the left sidebar.</li>
	<li>Provide your code using one of two methods:
	<ul>
	<li><strong>Upload files</strong> — Drag and drop or click the upload area (total size maximum 25 MB).</li>
	<li><strong>Enter a directory path</strong> — Type the full path to a local directory, e.g. <kbd>C:/Projects/my-application</kbd>.</li>
	</ul>
	</li>
	<li>Optionally toggle <strong>NVD Enriched Scan Results</strong> on or off (see <a href="#nvd-enrichment">Section 5</a>).</li>
	<li>Click the <strong>Analyze</strong> button.</li>
	<li>Wait for the scan to complete. A progress indicator shows the current status.</li>
	</ol>

	<div class="tip">
	<div class="tip-label">Tip</div>
	When uploading files, you can select multiple files at once. The scanner analyses all uploaded files together, detecting cross-file vulnerability patterns.
	</div>

	<img src="/helpimg/NewGradioScreenshot_LocalAppResult.png"
	alt="Local directory scan results showing Analysis Summary and Security Findings"
	class="screenshot" />
	<p class="screenshot-caption">Results from a local directory scan showing the Analysis Summary, severity badges, and individual finding cards.</p>

	<!-- Section 3: Remote URL Scan -->
	<h2 id="remote-scan"><span class="h-num">3</span> Scanning a Remote URL</h2>

	<p>Use this mode to dynamically test a running web application for security misconfigurations and vulnerabilities.</p>

	<ol class="steps">
	<li>Select <strong>Remote URL</strong> in the Analysis Mode panel.</li>
	<li>Enter the target web application URL in the <strong>Web Application URL</strong> field, e.g. <kbd>https://your-app.example.com</kbd>.</li>
	<li>Click the <strong>Analyze</strong> button.</li>
	</ol>

	<h3>What Gets Checked</h3>
	<div class="card">
	<ul>
	<li><strong>HTTP Security Headers</strong> — Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, X-XSS-Protection, Strict-Transport-Security, Referrer-Policy, Permissions-Policy.</li>
	<li><strong>Sensitive Path Exposure</strong> — Probes for common exposed paths such as <code>/.env</code>, <code>/.git/config</code>, <code>/admin</code>, <code>/phpinfo.php</code>, <code>/swagger.json</code>, and 15+ other paths.</li>
	<li><strong>HTTPS Configuration</strong> — Verifies the application uses HTTPS rather than unencrypted HTTP.</li>
	<li><strong>Response Content Analysis</strong> — Scans HTML responses for database error messages, stack trace disclosures, debug mode indicators, and sensitive data in comments.</li>
	<li><strong>Server Version Disclosure</strong> — Detects if the server reveals its software version in response headers.</li>
	</ul>
	</div>

	<img src="/helpimg/NewGradioScreenshot_RemoteURLResult.png"
	alt="Remote URL scan results showing missing security headers and other findings"
	class="screenshot" />
	<p class="screenshot-caption">Results from a remote URL scan showing missing security headers and insecure HTTP connection findings.</p>

	<!-- Section 4: Understanding Results -->
	<h2 id="understanding-results"><span class="h-num">4</span> Understanding Your Results</h2>

	<h3>Analysis Summary</h3>
	<p>
	After a scan completes, the <strong>Analysis Summary</strong> section appears at the top of the results. It
	displays metadata about the scan and a count of findings grouped by severity level.
	</p>
	<div class="card">
	<ul>
	<li><strong>Target</strong> — The directory path or URL that was scanned.</li>
	<li><strong>Files Analyzed</strong> — Number of source code files processed (local scans only).</li>
	<li><strong>Total Findings</strong> — Total number of security issues detected.</li>
	<li><strong>Analysis Type</strong> — Either <em>Local</em> (SAST) or <em>Web</em> (DAST).</li>
	</ul>
	</div>

	<h3>Severity Badges</h3>
	<p>
	Below the metadata, colour-coded severity badges show how many findings fall into each severity level:
	</p>
	<p>
	<span class="severity-sample" style="background: var(--critical-bg); color: var(--critical); border-color: var(--critical-border);">Critical</span>
	<span class="severity-sample" style="background: var(--high-bg); color: var(--high); border-color: var(--high-border);">High</span>
	<span class="severity-sample" style="background: var(--medium-bg); color: var(--medium); border-color: var(--medium-border);">Medium</span>
	<span class="severity-sample" style="background: var(--low-bg); color: var(--low); border-color: var(--low-border);">Low</span>
	<span class="severity-sample" style="background: var(--info-bg); color: var(--info-color); border-color: var(--info-border);">Info</span>
	</p>

	<h3>Finding Cards</h3>
	<p>Each detected vulnerability is displayed as a finding card containing the following information:</p>
	<div class="card">
	<ul>
	<li><strong>Vulnerability Name</strong> — The type of security issue (e.g. "SQL Injection", "Missing Security Header: Content-Security-Policy").</li>
	<li><strong>Severity Tag</strong> — A colour-coded badge showing CRITICAL, HIGH, MEDIUM, LOW, or INFO.</li>
	<li><strong>Common Weakness Enumeration (CWE) Reference</strong> — The identifier (e.g. CWE-89).</li>
	<li><strong>CVE References</strong> — Related Common Vulnerabilities and Exposures entries (when NVD enrichment is enabled).</li>
	<li><strong>File Path & Line Number</strong> — Exact location in the source code (local scans) or the target URL (remote scans).</li>
	<li><strong>Description</strong> — Explanation of the vulnerability and its potential impact.</li>
	<li><strong>Remediation Guidance</strong> — Click the expandable section to view recommended fixes and best practices.</li>
	</ul>
	</div>

	<h3>Exporting Reports</h3>
	<p>
	At the bottom of the results, two export options are available:
	</p>
	<ul>
	<li><strong>Export JSON Report</strong> — Downloads a structured JSON file containing all scan data, suitable for integration with CI/CD pipelines or other security tools.</li>
	<li><strong>Export Markdown Report</strong> — Downloads a Markdown report with findings grouped by severity, including file locations, code snippets, and remediation guidance. Ideal for pasting into vibe-coding platforms (Cursor, Lovable, Bolt, etc.) to fix identified issues.</li>
	</ul>

	<!-- Section 5: NVD Enrichment -->
	<h2 id="nvd-enrichment"><span class="h-num">5</span> NVD Enrichment</h2>

	<p>
	The <strong>NVD Enriched Scan Results</strong> toggle in the sidebar controls whether scan findings are
	enriched with data from the <strong><a href="https://nvd.nist.gov/general/cve-process" target="_blank" rel="noopener noreferrer">NVD</a></strong>, maintained by the <strong><a href="https://www.nist.gov/" target="_blank" rel="noopener noreferrer">National Institute of Standards and Technology (NIST)</a></strong>.
	</p>

	<div class="card">
	<div class="card-label">What NVD Enrichment Adds</div>
	<ul>
	<li>Related <strong><a href="https://nvd.nist.gov/general/cve-process" target="_blank" rel="noopener noreferrer">Common Vulnerabilities and Exposures (CVE)</a></strong> references for each finding.</li>
	</div>

	<h3>When to Enable</h3>
	<ul>
	<li>Comprehensive security audits where you need full CVE context.</li>
	<li>Compliance reporting that requires specific vulnerability references.</li>
	<li>When you need detailed remediation guidance for each finding.</li>
	</ul>

	<h3>When to Disable</h3>
	<ul>
	<li>Quick scans where speed is the priority.</li>
	<li>Offline environments without internet access.</li>
	<li>When the NVD API is rate-limited or unavailable.</li>
	</ul>

	<div class="tip">
	<div class="tip-label">Note</div>
	NVD enrichment adds processing time to the scan. The toggle is enabled by default. You can disable it for faster scans and re-run with enrichment when needed.
	</div>

	<!-- Section 6: Severity Levels Guide -->
	<h2 id="severity-guide"><span class="h-num">6</span> Severity Levels Guide</h2>

	<p>
	Findings are classified into five severity levels. Use this guide to prioritise remediation efforts.
	</p>

	<table class="severity-table">
	<thead>
	<tr>
	<th style="width: 120px;">Severity</th>
	<th>Description</th>
	<th style="width: 200px;">Examples</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><span class="severity-tag" style="background: var(--critical-bg); color: var(--critical);">CRITICAL</span></td>
	<td>Immediate action required. These vulnerabilities can lead to full system compromise, data breaches, or remote code execution.</td>
	<td>SQL Injection, Command Injection, Hardcoded Credentials, Insecure Deserialization</td>
	</tr>
	<tr>
	<td><span class="severity-tag" style="background: var(--high-bg); color: var(--high);">HIGH</span></td>
	<td>Serious vulnerabilities requiring prompt attention. These can lead to significant data exposure or unauthorized access.</td>
	<td>Cross-Site Scripting (XSS), Path Traversal, SSRF, JWT Without Verification</td>
	</tr>
	<tr>
	<td><span class="severity-tag" style="background: var(--medium-bg); color: var(--medium);">MEDIUM</span></td>
	<td>Moderate risk requiring investigation. These may enable attacks under certain conditions or weaken security posture.</td>
	<td>CORS Misconfiguration, Weak Cryptographic Algorithm, Open Redirect, Missing Content-Security-Policy</td>
	</tr>
	<tr>
	<td><span class="severity-tag" style="background: var(--low-bg); color: var(--low);">LOW</span></td>
	<td>Minor issues with lower priority. These represent defence-in-depth concerns or best practice violations.</td>
	<td>Debug Mode Enabled, Missing Non-Critical Headers, Verbose Error Messages, Sensitive Data in Logs</td>
	</tr>
	<tr>
	<td><span class="severity-tag" style="background: var(--info-bg); color: var(--info-color);">INFO</span></td>
	<td>Informational findings with no direct security risk. These highlight areas for awareness or potential improvement.</td>
	<td>Technology Detection, Configuration Notes, Server Version Disclosure</td>
	</tr>
	</tbody>
	</table>

	<div class="tip">
	<div class="tip-label">Prioritisation Strategy</div>
	Address <strong>Critical</strong> and <strong>High</strong> findings first, as they pose the greatest risk. Medium findings should be reviewed and scheduled for remediation. Low and Info findings can be addressed as part of regular maintenance cycles.
	</div>

	<!-- Footer -->
	<div class="footer">
	Security Auditor · SAST + DAST Platform<br />
	</div>


	</body>
	</html>