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
@@ -0,0 +1,412 @@
|
||||
import { app, isRouteCurrent } from '../router.js';
|
||||
import { api } from '../api.js';
|
||||
import {
|
||||
escapeHTML, relativeTime,
|
||||
getEnvelopeType, getEnvelopePayload, getEnvelopeTS,
|
||||
isCurrentPath, infrastructureSkeleton, formatBytes,
|
||||
} from '../utils.js';
|
||||
import { subscribeWS } from '../ws.js';
|
||||
import {
|
||||
openclawState, swarmState,
|
||||
mergeOpenClawEvents, mergeSwarmSnapshot, mergeSwarmServiceSnapshot,
|
||||
getK8sHomelabServices,
|
||||
} from '../state.js';
|
||||
|
||||
let infraUnsubscribe = null;
|
||||
let _infraTimerInterval = null;
|
||||
|
||||
export function cleanup() {
|
||||
if (infraUnsubscribe) { infraUnsubscribe(); infraUnsubscribe = null; }
|
||||
if (_infraTimerInterval) { clearInterval(_infraTimerInterval); _infraTimerInterval = null; }
|
||||
}
|
||||
|
||||
function handleInfraWS(msg) {
|
||||
if (msg.type !== 'message') return;
|
||||
|
||||
const eventType = getEnvelopeType(msg.data);
|
||||
|
||||
if (eventType === 'openclaw.snapshot') {
|
||||
mergeOpenClawEvents([msg.data]);
|
||||
if (isCurrentPath('/infrastructure')) renderInfraGrid();
|
||||
// Dead branch removed: if (isCurrentPath('/agents')) renderAgentVMStrip()
|
||||
return;
|
||||
}
|
||||
|
||||
if (eventType === 'swarm.snapshot') {
|
||||
mergeSwarmSnapshot(msg.data);
|
||||
if (isCurrentPath('/infrastructure')) renderInfraGrid();
|
||||
return;
|
||||
}
|
||||
|
||||
if (eventType === 'swarm.service.snapshot') {
|
||||
mergeSwarmServiceSnapshot(msg.data);
|
||||
if (isCurrentPath('/infrastructure')) renderInfraGrid();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadInfrastructureSnapshots() {
|
||||
const [ocData, swarmData, serviceData] = await Promise.all([
|
||||
api('/v1/events?event_type=openclaw.snapshot&limit=100'),
|
||||
api('/v1/events?event_type=swarm.snapshot&limit=10').catch(() => ({ events: [] })),
|
||||
api('/v1/events?event_type=swarm.service.snapshot&limit=100').catch(() => ({ events: [] })),
|
||||
]);
|
||||
|
||||
mergeOpenClawEvents(ocData.events || []);
|
||||
for (const evt of swarmData.events || []) mergeSwarmSnapshot(evt);
|
||||
for (const evt of serviceData.events || []) mergeSwarmServiceSnapshot(evt);
|
||||
}
|
||||
|
||||
// ── Infrastructure Uptime & Freshness ───────────────────
|
||||
function getUptimeBadge(uptimeSec) {
|
||||
if (!uptimeSec) return '';
|
||||
const hours = uptimeSec / 3600;
|
||||
const pct = Math.min(100, (hours / 24) * 100);
|
||||
const cls = pct >= 99 ? 'good' : pct >= 90 ? 'warn' : 'bad';
|
||||
return `<span class="uptime-badge ${cls}">${pct.toFixed(0)}% / 24h</span>`;
|
||||
}
|
||||
|
||||
function formatUptime(sec) {
|
||||
if (!sec) return '-';
|
||||
if (sec < 60) return sec + 's';
|
||||
if (sec < 3600) return Math.floor(sec / 60) + 'm';
|
||||
if (sec < 86400) return Math.floor(sec / 3600) + 'h ' + Math.floor((sec % 3600) / 60) + 'm';
|
||||
return Math.floor(sec / 86400) + 'd ' + Math.floor((sec % 86400) / 3600) + 'h';
|
||||
}
|
||||
|
||||
function serviceCardHeader(svc) {
|
||||
const uptimeBadge = getUptimeBadge(svc.uptime_sec);
|
||||
return `
|
||||
<div class="service-card-header">
|
||||
<div>
|
||||
<div class="service-card-name">${escapeHTML(svc.name)}${uptimeBadge ? ' ' + uptimeBadge : ''}</div>
|
||||
<div class="service-role-tag">${escapeHTML(svc.role || '')}</div>
|
||||
</div>
|
||||
<span class="service-badge ${escapeHTML(svc.status || 'down')}">${escapeHTML(svc.status || 'down')}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function serviceStatRow(label, value, valueClass) {
|
||||
return `
|
||||
<div class="service-stat-row">
|
||||
<span class="service-stat-label">${escapeHTML(label)}</span>
|
||||
<span class="service-stat-value${valueClass ? ' ' + valueClass : ''}">${value}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderVMCard(name) {
|
||||
const evt = openclawState.instances[name];
|
||||
const payload = getEnvelopePayload(evt);
|
||||
const inst = payload.instance || {};
|
||||
const host = payload.host || {};
|
||||
const guest = payload.guest;
|
||||
const issues = payload.issues;
|
||||
|
||||
return `
|
||||
<div class="vm-card">
|
||||
<div class="vm-card-header">
|
||||
<h3>${escapeHTML(inst.name || name)}</h3>
|
||||
<div class="vm-status ${host.state === 'running' ? 'running' : 'stopped'}">
|
||||
${host.state === 'running' ? 'Running' : 'Stopped'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="vm-updated"><span class="freshness-timer" data-ts="${escapeHTML(getEnvelopeTS(evt))}">Updated ${escapeHTML(relativeTime(getEnvelopeTS(evt)))}</span></div>
|
||||
<table class="vm-stats">
|
||||
<tr><td>Host</td><td>${escapeHTML(inst.host || '-')}</td></tr>
|
||||
<tr><td>Domain</td><td>${escapeHTML(inst.domain || '-')}</td></tr>
|
||||
<tr><td>vCPUs</td><td>${host.vcpus || '-'}</td></tr>
|
||||
<tr><td>Memory</td><td>${escapeHTML(formatBytes(host.memory_kib ? host.memory_kib * 1024 : 0) || '-')}</td></tr>
|
||||
<tr><td>Disk</td><td>${escapeHTML(formatBytes(host.disk_actual_bytes) || '-')}</td></tr>
|
||||
<tr><td>Autostart</td><td>${host.autostart ? 'Yes' : 'No'}</td></tr>
|
||||
</table>
|
||||
${guest ? `
|
||||
<div class="vm-card-divider"></div>
|
||||
<table class="vm-stats">
|
||||
<tr><td>Gateway</td><td style="${guest.service_active ? 'color:var(--success)' : 'color:var(--error)'}">${guest.service_active ? 'Active' : 'Inactive'}</td></tr>
|
||||
<tr><td>HTTP</td><td style="${guest.http_status === 200 ? 'color:var(--success)' : 'color:var(--error)'}">${guest.http_status || 'N/A'}</td></tr>
|
||||
<tr><td>Version</td><td>${escapeHTML(guest.version || '-')}</td></tr>
|
||||
<tr><td>Guest Mem</td><td>${guest.memory_percent !== undefined ? guest.memory_percent.toFixed(1) : '-'}%</td></tr>
|
||||
<tr><td>Guest Disk</td><td>${guest.disk_percent !== undefined ? guest.disk_percent.toFixed(1) : '-'}%</td></tr>
|
||||
<tr><td>Load</td><td>${guest.load_average !== undefined ? guest.load_average.toFixed(2) : '-'}</td></tr>
|
||||
<tr><td>Uptime</td><td>${escapeHTML(guest.service_uptime || '-')}</td></tr>
|
||||
</table>
|
||||
` : ''}
|
||||
${issues && Object.values(issues).some(Boolean) ? `
|
||||
<div class="vm-card-divider"></div>
|
||||
<div class="vm-issues-label">Issues</div>
|
||||
<div class="vm-issues">
|
||||
${Object.entries(issues).filter(([, value]) => value).map(([key]) => `
|
||||
<span class="issue ${escapeHTML(key)}">${escapeHTML(key.replace(/_/g, ' '))}</span>
|
||||
`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderLLMProxyCard(svc) {
|
||||
const extra = svc.extra || {};
|
||||
const modelCount = extra.model_count;
|
||||
const cooldowns = extra.cooldown_count || 0;
|
||||
const httpStatus = svc.http_status;
|
||||
const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
|
||||
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div style="display:flex;align-items:baseline;gap:0.5rem">
|
||||
<span class="llm-model-count">${modelCount !== undefined ? modelCount : '-'}</span>
|
||||
<span class="llm-model-label">models</span>
|
||||
</div>
|
||||
${cooldowns > 0 ? `<div class="llm-cooldown-banner">⚠ ${cooldowns} model${cooldowns > 1 ? 's' : ''} in cooldown</div>` : ''}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderDBCard(svc) {
|
||||
const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderSearchCard(svc) {
|
||||
const extra = svc.extra || {};
|
||||
const ms = extra.response_ms;
|
||||
const httpStatus = svc.http_status;
|
||||
const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
|
||||
${ms !== undefined ? serviceStatRow('Response', ms + 'ms', ms < 500 ? 'ok' : 'warn') : ''}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderMCPCard(svc) {
|
||||
const extra = svc.extra || {};
|
||||
const reachable = extra.port_reachable;
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${reachable !== undefined ? serviceStatRow('Port', reachable ? 'reachable' : 'unreachable', reachable ? 'ok' : 'bad') : ''}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderVoiceCard(svc) {
|
||||
const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderAutomationCard(svc) {
|
||||
const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderAPICard(svc) {
|
||||
const httpStatus = svc.http_status;
|
||||
const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderWorkerCard(svc) {
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderGenericServiceCard(svc) {
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
|
||||
${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderServiceCard(svc) {
|
||||
const role = svc.role || 'unknown';
|
||||
switch (role) {
|
||||
case 'llm-proxy': return renderLLMProxyCard(svc);
|
||||
case 'db': return renderDBCard(svc);
|
||||
case 'search': return renderSearchCard(svc);
|
||||
case 'mcp': return renderMCPCard(svc);
|
||||
case 'voice': return renderVoiceCard(svc);
|
||||
case 'automation':return renderAutomationCard(svc);
|
||||
case 'api':
|
||||
case 'web': return renderAPICard(svc);
|
||||
case 'worker':
|
||||
case 'queue': return renderWorkerCard(svc);
|
||||
default: return renderGenericServiceCard(svc);
|
||||
}
|
||||
}
|
||||
|
||||
function renderHomelabServiceCard(svc) {
|
||||
const httpClass = svc.httpStatus === 200 ? 'ok' : svc.httpStatus ? 'bad' : '';
|
||||
return `
|
||||
<div class="service-card">
|
||||
${serviceCardHeader(svc)}
|
||||
<div class="service-stats">
|
||||
${serviceStatRow('Endpoint', escapeHTML(svc.endpoint || '-'), '')}
|
||||
${serviceStatRow('Bucket', escapeHTML(svc.bucket ? `${svc.bucket}/${svc.prefix || ''}` : '-'), '')}
|
||||
${serviceStatRow('Usage', escapeHTML(formatBytes(svc.totalBytes) || '-'), '')}
|
||||
${serviceStatRow('Objects', escapeHTML(svc.objectCount !== undefined ? String(svc.objectCount) : '-'), '')}
|
||||
${serviceStatRow('HTTP', svc.httpStatus ? String(svc.httpStatus) : '-', httpClass)}
|
||||
${serviceStatRow('Source', escapeHTML(svc.sourceInstance || '-'), '')}
|
||||
${serviceStatRow('Latest', escapeHTML(svc.latestBackup ? relativeTime(svc.latestBackup) : '-'), '')}
|
||||
${svc.error ? serviceStatRow('Error', escapeHTML(svc.error), 'bad') : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderInfraGrid() {
|
||||
const vmNames = Object.keys(openclawState.instances).sort();
|
||||
const allServices = Object.values(swarmState.services);
|
||||
const agentmonServices = allServices.filter(s => s.group === 'agentmon');
|
||||
const swarmServices = allServices.filter(s => s.group !== 'agentmon');
|
||||
const homelabServices = getK8sHomelabServices();
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="page-header">
|
||||
<div class="page-header-row">
|
||||
<h2>Infrastructure <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
|
||||
<button class="refresh-btn" id="infra-refresh-btn" type="button" title="Refresh infrastructure data">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 2.5A7 7 0 1 0 14 9"/><polyline points="14 2.5 14 6 10.5 6"/></svg>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="infra-section">
|
||||
<p class="infra-section-title">VMs</p>
|
||||
${vmNames.length === 0
|
||||
? '<p class="empty-state">No VM data</p>'
|
||||
: `<div class="vm-grid">${vmNames.map(name => renderVMCard(name)).join('')}</div>`
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="infra-section">
|
||||
<p class="infra-section-title">Swarm Services</p>
|
||||
${swarmServices.length === 0
|
||||
? '<p class="empty-state">No swarm service data</p>'
|
||||
: `<div class="service-grid">${swarmServices.map(svc => renderServiceCard(svc)).join('')}</div>`
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="infra-section">
|
||||
<p class="infra-section-title">K8s Homelab</p>
|
||||
${homelabServices.length === 0
|
||||
? '<p class="empty-state">No k8s homelab service data</p>'
|
||||
: `<div class="service-grid">${homelabServices.map(svc => renderHomelabServiceCard(svc)).join('')}</div>`
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="infra-section">
|
||||
<p class="infra-section-title">Agentmon</p>
|
||||
${agentmonServices.length === 0
|
||||
? '<p class="empty-state">No agentmon service data</p>'
|
||||
: `<div class="service-grid">${agentmonServices.map(svc => renderServiceCard(svc)).join('')}</div>`
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Start freshness timer — update "Updated X ago" text every 10s
|
||||
if (_infraTimerInterval) clearInterval(_infraTimerInterval);
|
||||
_infraTimerInterval = setInterval(() => {
|
||||
document.querySelectorAll('.freshness-timer[data-ts]').forEach(el => {
|
||||
el.textContent = 'Updated ' + relativeTime(el.dataset.ts);
|
||||
});
|
||||
}, 10000);
|
||||
|
||||
// Manual refresh button
|
||||
document.getElementById('infra-refresh-btn')?.addEventListener('click', async () => {
|
||||
const btn = document.getElementById('infra-refresh-btn');
|
||||
if (btn) btn.disabled = true;
|
||||
try {
|
||||
await loadInfrastructureSnapshots();
|
||||
renderInfraGrid();
|
||||
} finally {
|
||||
const b = document.getElementById('infra-refresh-btn');
|
||||
if (b) b.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export async function renderInfrastructure(routeToken) {
|
||||
app.innerHTML = `<div class="page-header"><h2>Infrastructure</h2></div><div style="margin-top:1rem">${infrastructureSkeleton()}</div>`;
|
||||
|
||||
infraUnsubscribe = subscribeWS(handleInfraWS);
|
||||
|
||||
try {
|
||||
await loadInfrastructureSnapshots();
|
||||
if (routeToken && !isRouteCurrent(routeToken)) return;
|
||||
|
||||
if (isCurrentPath('/infrastructure')) {
|
||||
renderInfraGrid();
|
||||
}
|
||||
} catch (e) {
|
||||
if (isCurrentPath('/infrastructure')) {
|
||||
app.innerHTML = `<div class="page-header"><h2>Infrastructure</h2></div><p class="empty-state">Error: ${escapeHTML(e.message)}</p>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user