118 lines
5.1 KiB
HTML
118 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>MITM Certificate Search</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container search-container">
|
|
<!-- Header -->
|
|
<div class="search-header">
|
|
<h1>MITM Certificate Search</h1>
|
|
<div style="display:flex;align-items:center;gap:12px">
|
|
<a href="/dashboard" class="back-link">← Dashboard</a>
|
|
<button class="theme-toggle" id="themeToggle" title="Toggle theme">
|
|
<span class="theme-toggle-icon">☾</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Summary -->
|
|
<div class="stats-summary" id="statsSummary">
|
|
<div class="stat-card">
|
|
<div class="lbl">Total Detections</div>
|
|
<div class="val red" id="totalDetections">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="lbl">Unique Certificates</div>
|
|
<div class="val yel" id="uniqueCerts">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="lbl">Unique Organizations</div>
|
|
<div class="val cyn" id="uniqueOrgs">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="lbl">Affected Proxies</div>
|
|
<div class="val blu" id="uniqueProxies">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Box -->
|
|
<div class="search-box">
|
|
<span class="search-icon">🔍</span>
|
|
<input type="text" class="search-input" id="searchInput"
|
|
placeholder="Search certificates, organizations, proxies..."
|
|
autocomplete="off" spellcheck="false">
|
|
<button class="search-clear" id="searchClear" title="Clear search">×</button>
|
|
<div class="suggestions" id="suggestions"></div>
|
|
</div>
|
|
|
|
<!-- Help Box -->
|
|
<div class="help-box" id="helpBox">
|
|
<div class="help-header" onclick="toggleHelp()">
|
|
<div class="help-title">Search Syntax Help</div>
|
|
<span class="help-toggle">▼</span>
|
|
</div>
|
|
<div class="help-content">
|
|
<div class="help-section">
|
|
<div class="help-section-title">Field Filters</div>
|
|
<div class="help-examples">
|
|
<div class="help-example"><code>org:Cloudflare</code> <span>organization name</span></div>
|
|
<div class="help-example"><code>issuer:DigiCert</code> <span>certificate issuer</span></div>
|
|
<div class="help-example"><code>cn:*.example.com</code> <span>common name</span></div>
|
|
<div class="help-example"><code>proxy:192.168.1</code> <span>proxy IP address</span></div>
|
|
<div class="help-example"><code>fp:a1b2c3</code> <span>fingerprint prefix</span></div>
|
|
<div class="help-example"><code>serial:12345</code> <span>serial number</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="help-section">
|
|
<div class="help-section-title">Date Filters</div>
|
|
<div class="help-examples">
|
|
<div class="help-example"><code>expires:2024</code> <span>expiration year</span></div>
|
|
<div class="help-example"><code>expired:yes</code> <span>show expired certs</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="help-section">
|
|
<div class="help-section-title">General Search</div>
|
|
<div class="help-examples">
|
|
<div class="help-example"><code>cloudflare</code> <span>search all fields</span></div>
|
|
<div class="help-example"><code>"security proxy"</code> <span>exact phrase</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Area -->
|
|
<div class="results-container" id="resultsContainer">
|
|
<div class="results-empty" id="resultsEmpty">
|
|
<div class="results-empty-icon">🔒</div>
|
|
<div class="results-empty-text">Start typing to search MITM certificates</div>
|
|
<div class="results-empty-hint">Use field filters like <code>org:</code> or <code>proxy:</code> for precise results</div>
|
|
</div>
|
|
<div class="results-loading" id="resultsLoading" style="display:none">Searching</div>
|
|
<div id="resultsList" style="display:none">
|
|
<div class="results-header">
|
|
<div class="results-count"><strong id="resultsCount">0</strong> results found</div>
|
|
</div>
|
|
<div id="resultsContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- No Data State (shown when no MITM data exists) -->
|
|
<div class="no-data" id="noDataState" style="display:none">
|
|
<div class="no-data-icon">🛡</div>
|
|
<div class="no-data-title">No MITM Certificates Detected</div>
|
|
<div class="no-data-text">
|
|
MITM certificates are captured when proxies attempt SSL interception.
|
|
As the system validates proxies with SSL enabled, any detected MITM
|
|
certificates will appear here.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/mitm.js"></script>
|
|
</body>
|
|
</html>
|