tamakyi
f345626840
用户反馈：「你不需要帮我处理 tunnel 这部分，也许我不是通过 tunnel 开放内网呢？ 你只需要给我一个填写开放的管理端链接的地方。」 之前把「Cloudflare Tunnel」当成既定方案写进了配置与文档，这是替用户做了假设。 现在改为：项目只提供一个填地址的地方，怎么暴露完全由使用者决定。 - 删除 edge/cloudflare/tunnel.yml 与全部 tunnel 相关文档 - 新增 settings.adminUrl：管理界面里填一个地址，公开面板页脚出现「管理」按钮 指向它；留空则完全不显示（默认，避免在公网面板暴露管理面位置） - 只接受 http/https，javascript: 等协议被服务端拒绝（会被渲染成 <a href>） - 设置落在 local.monitors.json（私有层），只有自己的面板会出现该按钮 - 面板启动时额外拉 /api/monitors 合并 settings：原先只读静态 monitors.json （公开层），导致私有层的设置面板看不到；纯静态部署无该接口时沿用公开配置 顺带修掉一个既存漏洞（与本轮改动无关，是引入私有层叠加机制时埋下的）： /api/monitors 无鉴权却回吐合并后的完整配置，包含私有层的 UptimeRobot API Key —— 只要配了 key，任何访客 curl /api/monitors 就能拿到。现在两侧（Node 与 Worker） 都对对外响应剥离 uptimeRobot.apiKey，保留 enabled 等非敏感字段供面板读取； 探针内部同步仍用完整配置，剥离只作用于 HTTP 出口。 测试：verify-worker 36→40 项（新增 [E] 配置接口密钥泄露 4 条）、 verify-security 20→25 项（新增 [D2] 密钥泄露 5 条）。全项目 8 套 314 项通过。
204 lines
9.4 KiB
HTML
204 lines
9.4 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="robots" content="noindex, nofollow">
|
||
<title>管理后台 · Shiroko Monitor</title>
|
||
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
|
||
<link rel="stylesheet" href="/assets/style.css">
|
||
<link rel="stylesheet" href="/assets/theme-shiroko.css">
|
||
<link rel="stylesheet" href="/assets/admin.css">
|
||
</head>
|
||
<body class="admin-body">
|
||
<header class="admin-topbar">
|
||
<div class="brand">
|
||
<span class="logo" aria-hidden="true"></span>
|
||
<div class="brand-text">
|
||
<h1>管理后台</h1>
|
||
<p>需绑定并通过 2FA 验证后才能进入</p>
|
||
</div>
|
||
</div>
|
||
<div class="admin-topbar-right">
|
||
<span class="admin-ver" id="admin-ver">–</span>
|
||
<a class="admin-link" href="/">← 返回面板</a>
|
||
<button type="button" class="admin-btn admin-btn-ghost" id="logout-btn" hidden>退出登录</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="admin-main">
|
||
<!-- 状态探测中 -->
|
||
<section class="admin-card" id="loading"><p class="admin-muted">正在检查 2FA 状态…</p></section>
|
||
|
||
<!-- ① 未绑定：先绑定 2FA -->
|
||
<section class="admin-card" id="bind-panel" hidden>
|
||
<h2>第一步：绑定 2FA</h2>
|
||
<p class="admin-muted">管理后台必须绑定两步验证后才能进入。请先在启动探针的环境里设置 <code>SHIROKO_ADMIN_SETUP_KEY</code>，然后在这里输入它以生成密钥。</p>
|
||
|
||
<div class="admin-step" id="step-key">
|
||
<label for="setup-key">绑定口令（SHIROKO_ADMIN_SETUP_KEY）</label>
|
||
<div class="admin-row">
|
||
<input type="password" id="setup-key" autocomplete="off" placeholder="环境变量里设置的那个值" inputmode="text">
|
||
<button type="button" class="admin-btn" id="setup-start">生成密钥</button>
|
||
</div>
|
||
<p class="admin-msg" id="setup-key-msg"></p>
|
||
</div>
|
||
|
||
<div class="admin-step" id="step-secret" hidden>
|
||
<h3>第二步：把密钥加入你的验证器 App</h3>
|
||
<ol class="admin-ol">
|
||
<li>用 Google Authenticator / Microsoft Authenticator / 1Password / Aegis 扫描二维码，或</li>
|
||
<li>手动输入下面的密钥（Base32）：</li>
|
||
</ol>
|
||
<div class="qr-box"><canvas id="qr" width="220" height="220" aria-label="2FA 绑定二维码"></canvas></div>
|
||
<div class="secret-box">
|
||
<code id="secret-text">–</code>
|
||
<button type="button" class="admin-btn admin-btn-sm" id="copy-secret">复制密钥</button>
|
||
</div>
|
||
<details class="admin-details">
|
||
<summary>扫码不方便？复制 otpauth 链接</summary>
|
||
<div class="secret-box"><code id="uri-text">–</code><button type="button" class="admin-btn admin-btn-sm" id="copy-uri">复制链接</button></div>
|
||
</details>
|
||
<h3>第三步：输入 App 显示的 6 位验证码完成绑定</h3>
|
||
<div class="admin-row">
|
||
<input type="text" id="confirm-code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="6 位数字">
|
||
<button type="button" class="admin-btn" id="confirm-btn">完成绑定</button>
|
||
</div>
|
||
<p class="admin-msg" id="confirm-msg"></p>
|
||
</div>
|
||
|
||
<div class="admin-step" id="step-recovery" hidden>
|
||
<h3>第四步：保存恢复码（只显示这一次）</h3>
|
||
<p class="admin-muted">每个恢复码只能用一次，用于手机丢失、验证器清库时登录。请离线保存，不要只存在这台机器上。</p>
|
||
<div class="recovery-box" id="recovery-list"></div>
|
||
<div class="admin-row">
|
||
<button type="button" class="admin-btn admin-btn-sm" id="copy-recovery">复制全部恢复码</button>
|
||
<button type="button" class="admin-btn admin-btn-primary" id="recovery-done">我已保存</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ② 已绑定未登录：输 2FA 码登录 -->
|
||
<section class="admin-card admin-card-narrow" id="login-panel" hidden>
|
||
<h2>两步验证</h2>
|
||
<p class="admin-muted">输入验证器 App 的 6 位动态码，或使用一枚未用过的恢复码。</p>
|
||
<div class="admin-row">
|
||
<input type="text" id="login-code" inputmode="numeric" autocomplete="one-time-code" placeholder="验证码 / 恢复码" autofocus>
|
||
<button type="button" class="admin-btn admin-btn-primary" id="login-btn">进入</button>
|
||
</div>
|
||
<p class="admin-msg" id="login-msg"></p>
|
||
<details class="admin-details">
|
||
<summary>验证码设备丢了？</summary>
|
||
<p class="admin-muted">用一枚未使用的恢复码登录；或用 <code>SHIROKO_ADMIN_SETUP_KEY</code> 重置 2FA（重置后需重新绑定）。</p>
|
||
<div class="admin-row">
|
||
<input type="password" id="reset-key" placeholder="SHIROKO_ADMIN_SETUP_KEY" autocomplete="off">
|
||
<button type="button" class="admin-btn admin-btn-danger" id="reset-btn">重置 2FA</button>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
<!-- ③ 已登录：管理面板 -->
|
||
<section id="console-panel" hidden>
|
||
<div class="admin-card" id="stat-card">
|
||
<h2>运行状态</h2>
|
||
<div class="admin-stats" id="admin-stats"></div>
|
||
<p class="admin-muted" id="updated-at">–</p>
|
||
</div>
|
||
|
||
<div class="admin-card">
|
||
<h2>口径与范围</h2>
|
||
<div class="admin-field">
|
||
<label for="probe-scope">探测范围</label>
|
||
<select id="probe-scope">
|
||
<option value="all">全部（自建 + UptimeRobot）</option>
|
||
<option value="config">仅自建配置</option>
|
||
<option value="uptimerobot">仅 UptimeRobot</option>
|
||
</select>
|
||
<p class="admin-hint">决定探针真正发请求的范围；改动立即生效并热重载配置。</p>
|
||
</div>
|
||
<div class="admin-field">
|
||
<label for="data-filter">展示口径</label>
|
||
<select id="data-filter">
|
||
<option value="both">全部</option>
|
||
<option value="config">仅自建配置</option>
|
||
<option value="uptimerobot">仅 UptimeRobot</option>
|
||
</select>
|
||
<p class="admin-hint">只影响面板展示哪些目标；与探测范围相互独立。</p>
|
||
</div>
|
||
<div class="admin-field">
|
||
<label for="admin-url">面板上的管理入口链接</label>
|
||
<input type="url" id="admin-url" placeholder="https://admin.example.com/admin" autocomplete="off">
|
||
<p class="admin-hint">
|
||
填了之后，公开面板页脚会出现一个「管理」按钮指向这里；<b>留空则不显示</b>。
|
||
地址由你自行决定怎么暴露（内网 IP、Tailscale、VPS 域名、隧道……都可以），
|
||
面板不做任何假设。
|
||
</p>
|
||
</div>
|
||
<div class="admin-row">
|
||
<button type="button" class="admin-btn" id="probe-now">立即重新探测</button>
|
||
<button type="button" class="admin-btn" id="notify-test">发送通知自检</button>
|
||
</div>
|
||
<p class="admin-msg" id="action-msg"></p>
|
||
</div>
|
||
|
||
<div class="admin-card">
|
||
<h2>维护窗口</h2>
|
||
<p class="admin-muted">窗口内的目标不计入可用率、也不发故障告警。</p>
|
||
<div class="admin-field-row">
|
||
<div class="admin-field">
|
||
<label for="mw-from">开始</label>
|
||
<input type="datetime-local" id="mw-from">
|
||
</div>
|
||
<div class="admin-field">
|
||
<label for="mw-to">结束</label>
|
||
<input type="datetime-local" id="mw-to">
|
||
</div>
|
||
</div>
|
||
<div class="admin-field-row">
|
||
<div class="admin-field">
|
||
<label for="mw-id">仅限目标（留空 = 全部）</label>
|
||
<select id="mw-id"><option value="">全部目标</option></select>
|
||
</div>
|
||
<div class="admin-field">
|
||
<label for="mw-note">备注</label>
|
||
<input type="text" id="mw-note" maxlength="200" placeholder="例如：升级数据库">
|
||
</div>
|
||
</div>
|
||
<div class="admin-row">
|
||
<button type="button" class="admin-btn admin-btn-primary" id="mw-add">新增窗口</button>
|
||
</div>
|
||
<div class="mw-list" id="mw-list"></div>
|
||
</div>
|
||
|
||
<div class="admin-card">
|
||
<h2>监控目标</h2>
|
||
<p class="admin-muted">当前配置中的目标（探测范围为 uptimerobot 时，本地目标不会被真正探测）。</p>
|
||
<div class="table-scroll">
|
||
<table class="admin-table">
|
||
<thead><tr><th>名称</th><th>分组</th><th>类型</th><th>目标</th><th>间隔</th></tr></thead>
|
||
<tbody id="monitor-list"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="admin-card">
|
||
<h2>最近事件</h2>
|
||
<div class="table-scroll">
|
||
<table class="admin-table ev-table">
|
||
<thead><tr><th>时间</th><th>类型</th><th>目标</th><th>详情</th></tr></thead>
|
||
<tbody id="event-list"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="admin-card">
|
||
<h2>安全</h2>
|
||
<p class="admin-muted" id="twofa-summary">–</p>
|
||
<p class="admin-muted">会话最长 2 小时，30 分钟无操作自动失效；进程重启会清空所有会话。</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script type="module" src="/assets/admin.js"></script>
|
||
</body>
|
||
</html> |