mirror of
https://github.com/momenbasel/keyFinder.git
synced 2026-07-25 14:10:49 +02:00
v2.2.0: ops-console UI redesign
- Popup + findings dashboard rebuilt as a dark ops console: radar-sweep brand mark, ARMED/PASSIVE status LEDs, scanline texture, mono chrome, amber (action) / teal (secret) semantic colors - Popup: count-up stats, numbered watchlist, command-prompt input, typed terminal status line with live counts - Dashboard: clickable severity stat filters, LATEST ticker, severity row edges, LED badges, click-to-copy match chips, relative times, skeleton rows, staggered first paint, radar empty state, / and Esc shortcuts, prefers-reduced-motion support - Fix severity sort (critical sorted last) and ticker hidden override - Add preview/ harness (stubbed chrome API) for headless UI screenshots
This commit is contained in:
momenbasel
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>KeyFinder</title>
|
||||
<link rel="stylesheet" href="../css/popup.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header-brand">
|
||||
<span class="radar" aria-hidden="true">
|
||||
<img src="../icons/icon48.png" alt="" class="header-icon">
|
||||
</span>
|
||||
<div class="brand-text">
|
||||
<h1>KEYFINDER<span class="version" id="versionLabel"></span></h1>
|
||||
<p class="header-tagline">passive secret discovery</p>
|
||||
</div>
|
||||
<span class="live-badge" title="Passive scanning is active"><span class="live-dot"></span>ARMED</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="stats" id="stats">
|
||||
<div class="stat-card stat-findings">
|
||||
<span class="stat-top"><span class="stat-led" aria-hidden="true"></span><span class="stat-label">Findings</span></span>
|
||||
<span class="stat-number" id="findingCount">–</span>
|
||||
</div>
|
||||
<div class="stat-card stat-keywords">
|
||||
<span class="stat-top"><span class="stat-led" aria-hidden="true"></span><span class="stat-label">Keywords</span></span>
|
||||
<span class="stat-number" id="keywordCount">–</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Watchlist<span class="section-sub">// custom keywords</span></h2>
|
||||
<form id="keywordForm" class="keyword-form">
|
||||
<span class="prompt" aria-hidden="true">›</span>
|
||||
<input
|
||||
type="text"
|
||||
id="keywordInput"
|
||||
placeholder="add keyword, e.g. api_key"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
>
|
||||
<button type="submit" id="addBtn">Add</button>
|
||||
</form>
|
||||
<div id="errorMsg" class="error-msg" hidden></div>
|
||||
<ul id="keywordList" class="keyword-list"></ul>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="term-line" aria-live="polite"><span class="term-text" id="termText"></span><span class="term-cursor" aria-hidden="true"></span></div>
|
||||
<a href="../results.html" target="_blank" id="resultsLink" class="results-btn">
|
||||
View Findings <span class="btn-arrow" aria-hidden="true">→</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="preview-stub.js"></script>
|
||||
<script src="../js/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
// Preview-only stub for the chrome.* extension API with realistic sample data.
|
||||
// Loaded before the real popup.js / results.js in preview/*.html files.
|
||||
// NOT shipped — build.sh only copies the explicit SHARED_FILES list.
|
||||
(function () {
|
||||
const NOW = Date.now();
|
||||
const MIN = 60 * 1000;
|
||||
const HOUR = 60 * MIN;
|
||||
const DAY = 24 * HOUR;
|
||||
|
||||
const SAMPLE_FINDINGS = [
|
||||
{ id: "f1", severity: "critical", provider: "AWS", patternName: "AWS Access Key ID", match: "AKIAIOSFODNN7EXAMPLE", type: "inline-script", domain: "dashboard.acme.io", url: "https://dashboard.acme.io/assets/app.js", pageUrl: "https://dashboard.acme.io/", timestamp: NOW - 4 * MIN },
|
||||
{ id: "f2", severity: "critical", provider: "Stripe", patternName: "Stripe Live Secret Key", match: "sk_live_4eC39HqLyj…T1zdp7dc", type: "network-response", domain: "api.shopfront.dev", url: "https://api.shopfront.dev/v2/config", pageUrl: "https://shopfront.dev/", timestamp: NOW - 26 * MIN },
|
||||
{ id: "f3", severity: "critical", provider: "OpenAI", patternName: "OpenAI API Key", match: "sk-proj-abc123def456ghi789jkl", type: "web-storage", domain: "playground.internal.tools", url: "https://playground.internal.tools/", pageUrl: "https://playground.internal.tools/", timestamp: NOW - 2 * HOUR },
|
||||
{ id: "f4", severity: "high", provider: "GitHub", patternName: "GitHub Personal Access Token", match: "ghp_16C7e42F292c6912E7710c838347Ae178B4a", type: "html-comment", domain: "gitmirror.example.org", url: "https://gitmirror.example.org/login", pageUrl: "https://gitmirror.example.org/", timestamp: NOW - 3 * HOUR },
|
||||
{ id: "f5", severity: "high", provider: "Slack", patternName: "Slack Bot Token", match: "xoxb-17653672481-19874698323-pdLjLl…CwXgE", type: "inline-script", domain: "status.teamchat.app", url: "https://status.teamchat.app/embed.js", pageUrl: "https://status.teamchat.app/", timestamp: NOW - 5 * HOUR },
|
||||
{ id: "f6", severity: "high", provider: "MongoDB", patternName: "MongoDB Connection String", match: "mongodb+srv://admin:p4ssw0rd@cluster0.mongodb.net/prod", type: "data-attribute", domain: "metrics.saasly.co", url: "https://metrics.saasly.co/", pageUrl: "https://metrics.saasly.co/", timestamp: NOW - 9 * HOUR },
|
||||
{ id: "f7", severity: "high", provider: "DOM Scan", patternName: "Sensitive Meta Tag", match: "csrf-token=9f8e7d6c5b4a3210", type: "meta-tag", domain: "legacy.corpnet.com", url: "https://legacy.corpnet.com/index.html", pageUrl: "https://legacy.corpnet.com/", timestamp: NOW - 14 * HOUR },
|
||||
{ id: "f8", severity: "medium", provider: "Generic", patternName: "JSON Web Token (JWT)", match: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U", type: "url-param", domain: "auth.redirectlab.net", url: "https://auth.redirectlab.net/callback?token=eyJhbGciOi...", pageUrl: "https://redirectlab.net/", timestamp: NOW - 20 * HOUR },
|
||||
{ id: "f9", severity: "medium", provider: "DOM Scan", patternName: "Hidden Form Field", match: "session_id=a8f5f167f44f4964e6c998dee827110c", type: "hidden-input", domain: "shop.example.com", url: "https://shop.example.com/checkout", pageUrl: "https://shop.example.com/", timestamp: NOW - 1 * DAY },
|
||||
{ id: "f10", severity: "medium", provider: "URL Scan", patternName: "High-Entropy URL Parameter", match: "sig=4c4f6e6f2d9a4b8c8d7e6f5a4b3c2d1e", type: "url-param", domain: "cdn.medialab.io", url: "https://cdn.medialab.io/v/assets?sig=4c4f6e...", pageUrl: "https://medialab.io/", timestamp: NOW - 2 * DAY },
|
||||
{ id: "f11", severity: "medium", provider: "Web Storage", patternName: "localStorage Secret", match: "refresh_token=def502001a2b3c4d5e6f", type: "web-storage", domain: "app.notesync.dev", url: "https://app.notesync.dev/", pageUrl: "https://app.notesync.dev/", timestamp: NOW - 3 * DAY },
|
||||
{ id: "f12", severity: "low", provider: "Generic", patternName: "Keyword: client_id", match: "client_id=Iv1.8a61f9b3a7aba766", type: "script-src", domain: "login.oauthflow.app", url: "https://login.oauthflow.app/js/oauth.js?client_id=Iv1.8a61f9b3a7aba766", pageUrl: "https://login.oauthflow.app/", timestamp: NOW - 4 * DAY },
|
||||
];
|
||||
|
||||
const SAMPLE_KEYWORDS = [
|
||||
"key", "api_key", "apikey", "api-key", "secret", "token",
|
||||
"access_token", "auth", "credential", "password", "client_id", "client_secret",
|
||||
];
|
||||
|
||||
window.chrome = {
|
||||
runtime: {
|
||||
getManifest: () => ({ version: "2.1.1" }),
|
||||
sendMessage: async (msg) => {
|
||||
switch (msg && msg.type) {
|
||||
case "getFindings": return { findings: SAMPLE_FINDINGS.slice() };
|
||||
case "getKeywords": return { keywords: SAMPLE_KEYWORDS.slice() };
|
||||
case "addKeyword": return { ok: true };
|
||||
case "removeKeyword": return { ok: true };
|
||||
case "removeFinding": return { ok: true };
|
||||
case "clearFindings": return { ok: true };
|
||||
default: return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>KeyFinder — Findings Console</title>
|
||||
<link rel="stylesheet" href="../css/results.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header-row">
|
||||
<div class="header-left">
|
||||
<span class="radar" aria-hidden="true">
|
||||
<img src="../icons/icon48.png" alt="" class="header-icon">
|
||||
</span>
|
||||
<div class="brand-text">
|
||||
<h1>KEYFINDER<span class="version" id="versionLabel"></span></h1>
|
||||
<p class="header-sub">findings console</p>
|
||||
</div>
|
||||
<span class="live-badge" title="Passive scanning is active"><span class="live-dot"></span>PASSIVE</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<div class="search-wrap">
|
||||
<span class="search-glyph" aria-hidden="true">⚲</span>
|
||||
<input type="text" id="searchBox" placeholder="search findings…" autocomplete="off" spellcheck="false">
|
||||
<kbd class="kbd" title="Press / to focus search">/</kbd>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="exportJsonBtn" class="btn btn-secondary" title="Download filtered findings as JSON">↓ JSON</button>
|
||||
<button id="exportCsvBtn" class="btn btn-secondary" title="Download filtered findings as CSV">↓ CSV</button>
|
||||
<button id="clearBtn" class="btn btn-danger" title="Remove all findings">× Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-row header-row-filters">
|
||||
<div class="filter-group">
|
||||
<label class="filter">
|
||||
<span class="filter-label">sev</span>
|
||||
<select id="severityFilter">
|
||||
<option value="all">all</option>
|
||||
<option value="critical">critical</option>
|
||||
<option value="high">high</option>
|
||||
<option value="medium">medium</option>
|
||||
<option value="low">low</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="filter">
|
||||
<span class="filter-label">type</span>
|
||||
<select id="typeFilter">
|
||||
<option value="all">all</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="filter">
|
||||
<span class="filter-label">provider</span>
|
||||
<select id="providerFilter">
|
||||
<option value="all">all</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="meta-line" id="metaLine"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stats-bar" id="statsBar"></div>
|
||||
|
||||
<div class="ticker" id="ticker" hidden>
|
||||
<span class="ticker-dot" aria-hidden="true"></span>
|
||||
<span class="ticker-label">LATEST</span>
|
||||
<span class="ticker-text" id="tickerText"></span>
|
||||
</div>
|
||||
|
||||
<main class="main">
|
||||
<div class="table-shell">
|
||||
<div class="shell-head">
|
||||
<span class="shell-title">findings.log</span>
|
||||
<span class="shell-meta" id="shellMeta"></span>
|
||||
</div>
|
||||
<table class="findings-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Severity</th>
|
||||
<th>Provider</th>
|
||||
<th>Pattern</th>
|
||||
<th>Match</th>
|
||||
<th>Type</th>
|
||||
<th>Domain</th>
|
||||
<th>Source</th>
|
||||
<th>Time</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="findingsBody"></tbody>
|
||||
</table>
|
||||
<div id="emptyState" class="empty-state" hidden>
|
||||
<svg class="empty-radar" viewBox="0 0 72 72" aria-hidden="true">
|
||||
<circle cx="36" cy="36" r="30" class="er-ring"/>
|
||||
<circle cx="36" cy="36" r="20" class="er-ring"/>
|
||||
<circle cx="36" cy="36" r="10" class="er-ring"/>
|
||||
<line x1="36" y1="6" x2="36" y2="66" class="er-cross"/>
|
||||
<line x1="6" y1="36" x2="66" y2="36" class="er-cross"/>
|
||||
<path d="M36 36 L36 6 A30 30 0 0 1 57.2 14.8 Z" class="er-sweep"/>
|
||||
<circle cx="36" cy="36" r="2.5" class="er-core"/>
|
||||
</svg>
|
||||
<p class="empty-title" id="emptyTitle">No findings yet</p>
|
||||
<p class="empty-copy" id="emptyCopy">KeyFinder passively scans every page you visit. Browse around — leaked keys, tokens and credentials will surface here.</p>
|
||||
<p class="empty-hint">tip · add custom keywords from the extension popup</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="page-footer">
|
||||
<span>local storage only</span>
|
||||
<span class="footer-sep">·</span>
|
||||
<span>5000-finding ring buffer</span>
|
||||
<span class="footer-sep">·</span>
|
||||
<span>no network egress</span>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script src="preview-stub.js"></script>
|
||||
<script src="../js/results.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
Reference in New Issue
Block a user