fix(web-ui): security hardening, SPA nav, and modularization
Ship the in-progress ES-module refactor of the web-ui (new static/modules/ layout, Usage/Settings pages, uplot-based dashboard) alongside a round of security and UX fixes: - main.go: add CSP + X-Frame-Options: DENY + X-Content-Type-Options: nosniff + Referrer-Policy middleware on every response; WS CheckOrigin now requires Origin host to match Host (blocks cross-site WebSocket hijacking); upgrade client before dialing upstream so origin check runs first; fatal on unparseable AGENTMON_QUERY_BASE. - app.js: delegated click handler intercepts same-origin <a> clicks for SPA navigation (prev. every nav link caused a full page reload, dropping WS + in-memory state); delegated .copy-btn[data-copy] handler replaces inline onclick=; removed window.navigate / window.copyToClipboard globals and the duplicated handleGlobalSearch. - modules/nav-signal.js: per-route AbortController so in-flight fetches are cancelled when the user navigates away, preventing stale toasts and wasted renders. - modules/api.js: honours the nav signal by default; AbortError is silent. - modules/router.js: resets the nav controller on every route; dropped the fixed 80ms transition delay; breadcrumbs no longer emit inline onclick= (delegated handler picks them up). - modules/utils.js: renderCopyButton emits data-copy=\"...\" instead of nesting a JS string inside an HTML attribute — fixes an XSS where values containing ' broke out via ' decoding. Verified: go build clean; `node --check` clean on all modified modules; manual curl probes confirm security headers present on every response and WS upgrade returns 403 for cross-origin/missing Origin while 101 for same-origin. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
William Valentin
+243
-36
@@ -447,6 +447,20 @@ tr:last-child td { border-bottom: none; }
|
||||
|
||||
tr.clickable { cursor: pointer; }
|
||||
|
||||
th.sortable { cursor: pointer; user-select: none; }
|
||||
th.sortable:hover { color: var(--text-bright); }
|
||||
th.sortable.sort-asc .sort-icon::after { content: ' ↑'; }
|
||||
th.sortable.sort-desc .sort-icon::after { content: ' ↓'; }
|
||||
.sort-icon { color: var(--accent); font-size: 0.7rem; }
|
||||
|
||||
.pagination-info {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
tr.clickable:hover td {
|
||||
background: var(--surface-2);
|
||||
color: var(--text-bright);
|
||||
@@ -623,8 +637,9 @@ tr:hover .copy-btn,
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||||
transform: translateY(1rem);
|
||||
opacity: 0;
|
||||
transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), opacity 0.2s;
|
||||
transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), opacity 0.2s, bottom 0.2s ease;
|
||||
pointer-events: none;
|
||||
max-width: min(420px, calc(100vw - 2rem));
|
||||
}
|
||||
|
||||
.toast.visible {
|
||||
@@ -796,6 +811,32 @@ tr:hover .copy-btn,
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-dim);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
padding: 0.35rem 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
||||
}
|
||||
.refresh-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
|
||||
.refresh-btn:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
.page-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.page-header-row h2 { margin-bottom: 0; }
|
||||
|
||||
/* ── Span expand ───────────────────────────────────────────── */
|
||||
.expandable { cursor: pointer; }
|
||||
|
||||
@@ -2046,6 +2087,13 @@ tr.expandable:hover .expand-icon::before {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.meta-tile-sub {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-dim);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
/* ── VM card divider ──────────────────────────────────────── */
|
||||
.vm-card-divider {
|
||||
height: 1px;
|
||||
@@ -2966,6 +3014,22 @@ tr.clickable.active-session td:first-child {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.error-count-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
background: rgba(248, 113, 113, 0.15);
|
||||
color: var(--error);
|
||||
border: 1px solid rgba(248, 113, 113, 0.25);
|
||||
border-radius: 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Span kind badge ──────────────────────────────────────── */
|
||||
.span-kind-badge {
|
||||
display: inline-flex;
|
||||
@@ -3580,41 +3644,6 @@ tr.clickable.active-session td:first-child {
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Toast notifications ──────────────────────────────── */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(1rem);
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
padding: 0.65rem 1.25rem;
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
pointer-events: none;
|
||||
max-width: 480px;
|
||||
text-align: center;
|
||||
}
|
||||
.toast.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
.toast-error {
|
||||
border-color: var(--error);
|
||||
background: rgba(248, 113, 113, 0.12);
|
||||
}
|
||||
.toast-info {
|
||||
border-color: var(--accent);
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
}
|
||||
|
||||
/* ── 404 page ─────────────────────────────────────────── */
|
||||
.not-found {
|
||||
text-align: center;
|
||||
@@ -3631,6 +3660,31 @@ tr.clickable.active-session td:first-child {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.error-boundary {
|
||||
padding: 3rem 2rem;
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.error-boundary h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.4rem;
|
||||
color: var(--error);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.error-boundary p { color: var(--text-dim); margin-bottom: 1rem; }
|
||||
.error-boundary-detail {
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.75rem 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--code-text);
|
||||
margin-bottom: 1.25rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ── Infrastructure Uptime & Freshness ────────────────────────────────── */
|
||||
.uptime-badge {
|
||||
display: inline-block;
|
||||
@@ -3717,6 +3771,159 @@ tr.run-span-row[tabindex="0"]:focus-visible {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Span Waterfall ──────────────────────────────────────── */
|
||||
.waterfall {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.waterfall-header,
|
||||
.waterfall-row {
|
||||
display: grid;
|
||||
grid-template-columns: 240px 1fr;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 0.4rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
.waterfall-header { background: var(--surface-2); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
|
||||
.waterfall-row:hover { background: var(--surface-2); }
|
||||
.waterfall-name-col { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
|
||||
.waterfall-name { font-size: 0.8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.waterfall-bar-col { position: relative; }
|
||||
.waterfall-bar-track { position: relative; height: 20px; background: var(--surface-2); border-radius: 3px; }
|
||||
.waterfall-bar {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
background: var(--accent);
|
||||
opacity: 0.7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.waterfall-bar:hover { opacity: 1; }
|
||||
.waterfall-bar.wf-error { background: var(--error); }
|
||||
.waterfall-bar.wf-success { background: var(--success); }
|
||||
.waterfall-bar-label { font-family: var(--font-mono); font-size: 0.6rem; padding: 0 4px; color: #fff; white-space: nowrap; }
|
||||
.waterfall-timescale { position: relative; height: 16px; }
|
||||
.waterfall-timescale span { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); }
|
||||
|
||||
/* ── Usage Page ──────────────────────────────────────────── */
|
||||
.usage-summary-tiles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.usage-section-row {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.usage-panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.25rem 1.5rem;
|
||||
flex: 1 1 300px;
|
||||
min-width: 260px;
|
||||
}
|
||||
.usage-7d-tiles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.usage-7d-tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.usage-7d-label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.usage-7d-tile strong {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
.usage-loading { color: var(--text-dim); padding: 2rem; font-size: 0.9rem; }
|
||||
|
||||
/* ── Settings Page ───────────────────────────────────────── */
|
||||
.settings-section {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 640px;
|
||||
}
|
||||
.settings-section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.settings-section-desc {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 1.25rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.settings-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.settings-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.settings-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.settings-input {
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.88rem;
|
||||
width: 80px;
|
||||
outline: none;
|
||||
}
|
||||
.settings-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
|
||||
.settings-input-suffix { font-size: 0.82rem; color: var(--text-dim); }
|
||||
.settings-btn {
|
||||
background: var(--accent-dim);
|
||||
border: 1px solid var(--accent-glow);
|
||||
border-radius: var(--radius);
|
||||
color: var(--accent);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
padding: 0.45rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.settings-btn:hover { background: rgba(34, 211, 238, 0.15); border-color: var(--accent); }
|
||||
.settings-btn:disabled { opacity: 0.5; cursor: default; }
|
||||
.settings-result { margin-top: 0.75rem; font-size: 0.82rem; }
|
||||
.settings-result-ok { color: var(--success); }
|
||||
|
||||
/* ── Polish: Focus Rings ─────────────────────────────────── */
|
||||
a:focus-visible,
|
||||
button:focus-visible,
|
||||
|
||||
Reference in New Issue
Block a user