coxpit 4.8.0 → 5.0.1

package/src/icons.ts

@@ -19,7 +19,9 @@ export const ICON_SPRITE = `<svg style="position:absolute;width:0;height:0" aria
   <symbol id="i-image" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21"/></symbol>
   <symbol id="i-message" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></symbol>
   <symbol id="i-chevron" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></symbol>
+  <symbol id="i-chevron-down" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
   <symbol id="i-plus" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></symbol>
+  <symbol id="i-minus" viewBox="0 0 24 24"><path d="M5 12h14"/></symbol>
   <symbol id="i-pencil" viewBox="0 0 24 24"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></symbol>
   <symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></symbol>
   <symbol id="i-recycle" viewBox="0 0 24 24"><path d="M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5"/><path d="M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12"/><path d="m14 16-3 3 3 3"/><path d="M8.293 13.596 4.875 9.5 1.5 13.5"/><path d="m9 12 3-3-3-3"/><path d="M13.5 3.5 17 9.5l-3.5 2"/></symbol>
@@ -31,6 +33,10 @@ export const ICON_SPRITE = `<svg style="position:absolute;width:0;height:0" aria
   <symbol id="i-bell-off" viewBox="0 0 24 24"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"/><path d="m2 2 20 20"/><path d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"/></symbol>
   <symbol id="i-download" viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></symbol>
   <symbol id="i-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></symbol>
+  <symbol id="i-server" viewBox="0 0 24 24"><rect width="20" height="8" x="2" y="2" rx="2"/><rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 6h.01"/><path d="M6 18h.01"/></symbol>
+  <symbol id="i-layers" viewBox="0 0 24 24"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></symbol>
+  <symbol id="i-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></symbol>
+  <symbol id="i-archive" viewBox="0 0 24 24"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></symbol>
 </svg>`;
 
 /** .ic 아이콘 스타일(1em·currentColor 상속·stroke). board/login 공통. */

package/src/login.ts

@@ -1,11 +1,25 @@
 // 브랜디드 접근키 언락/셋업 페이지(단일 자가완결 HTML — 빌드 0, 보드 토큰 매치).
-// 브라우저 basic-auth 팝업을 대체한다. fetch 로 A2/A3 엔드포인트 POST → 성공 시 보드로 reload.
+// 브라우저 basic-auth 팝업을 대체한다.
+// ── Safari 쿠키 레이스 수정(v5.0) ──
+// 폼은 real navigation POST(urlencoded, hidden nav=1)로 /api/auth/{unlock,setup} 에 제출한다.
+// 서버는 성공 시 303 → GET /(브라우저가 그 응답의 Set-Cookie 를 커밋한 뒤 이동)로 답하므로,
+// fetch-then-location.replace 가 겪던 "쿠키 미커밋 → 다시 로그인" 레이스가 사라진다.
+// 실패는 서버가 이 페이지를 error 와 함께 다시 렌더한다(JS 없이도 동작). JSON API 는 그대로 유지.
 // setup=true → 첫 실행(키 설정, confirm 필드+토큰 힌트), false → 언락(키 1개).
 import { ICON_SPRITE, ICON_CSS } from './icons.js';
 
-/** login/setup 페이지 HTML. setup 이면 셋업(키+확인), 아니면 언락. */
-export function loginPageHTML(setup: boolean): string {
+/** HTML 속성 값 이스케이프(서버 렌더 에러 문자열 안전 주입용). */
+function escA(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+export interface LoginOpts { error?: string }
+
+/** login/setup 페이지 HTML. setup 이면 셋업(키+확인), 아니면 언락. opts.error 는 서버가 재렌더 시 주입. */
+export function loginPageHTML(setup: boolean, opts: LoginOpts = {}): string {
   const title = setup ? 'set an access key' : 'unlock';
+  const initialErr = opts.error ? escA(opts.error) : '';
+  const action = setup ? '/api/auth/setup' : '/api/auth/unlock';
   return /* html */ `<!doctype html>
 <html lang="en">
 <head>
@@ -25,8 +39,11 @@ export function loginPageHTML(setup: boolean): string {
   *{box-sizing:border-box}
   [hidden]{display:none !important}
   html,body{height:100%}
+  html{overscroll-behavior:none}
   body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
-    -webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;padding:24px}
+    -webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;
+    padding:24px;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
+    overflow-x:hidden}
   ::selection{background:var(--brand-dim)}
   .card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
     border-radius:var(--r-card);box-shadow:var(--shadow);padding:26px 24px 22px}
@@ -38,7 +55,7 @@ export function loginPageHTML(setup: boolean): string {
   .flabel{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
     color:var(--faint);margin:0 0 6px}
   input[type=password]{width:100%;background:#0e1118;border:1px solid var(--line);border-radius:var(--r-ctl);
-    color:var(--ink);font-family:var(--mono);font-size:14px;padding:10px 12px;outline:none}
+    color:var(--ink);font-family:var(--mono);font-size:16px;padding:10px 12px;outline:none}
   input[type=password]:focus{border-color:var(--brand)}
   input::placeholder{color:var(--faint)}
   .fld{margin-bottom:14px}
@@ -62,7 +79,8 @@ export function loginPageHTML(setup: boolean): string {
 </head>
 <body>
 ${ICON_SPRITE}
-  <form class="card" id="f" autocomplete="off">
+  <form class="card" id="f" method="post" action="${action}" autocomplete="off">
+    <input type="hidden" name="nav" value="1">
     <div class="mark"><svg class="ic"><use href="#i-lock"/></svg><span>coxpit</span></div>
     <h1>${setup ? 'Protect this coxpit' : 'Unlock this coxpit'}</h1>
     <p class="sub">${setup
@@ -71,14 +89,18 @@ ${ICON_SPRITE}
     ${setup ? `<div class="hint">To prove you own this machine, this first-time setup needs the one-time
       <code>setup token</code> printed in the daemon log &mdash; unless you&#39;re on
       <code>http://127.0.0.1</code> directly. Paste it below if asked.</div>` : ''}
-    <div class="err" id="err"></div>
+    <div class="err" id="err">${initialErr}</div>
     ${setup ? `<div class="fld"><label class="flabel" for="tok">setup token (from the daemon log)</label>
-      <input id="tok" type="password" placeholder="paste if not on localhost" autocomplete="off"></div>` : ''}
+      <input id="tok" name="token" type="password" placeholder="paste if not on localhost" autocomplete="off"
+        autocapitalize="none" autocorrect="off" spellcheck="false"></div>` : ''}
     <div class="fld"><label class="flabel" for="key">access key</label>
-      <input id="key" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;" autocomplete="${setup ? 'new-password' : 'current-password'}" autofocus></div>
+      <input id="key" name="key" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;"
+        autocomplete="${setup ? 'new-password' : 'current-password'}"
+        autocapitalize="none" autocorrect="off" spellcheck="false" autofocus></div>
     ${setup ? `<div class="fld"><label class="flabel" for="key2">confirm access key</label>
-      <input id="key2" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;" autocomplete="new-password"></div>` : ''}
-    <label class="row"><input id="rem" type="checkbox"${setup ? ' checked' : ''}><span>Remember this device</span></label>
+      <input id="key2" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;"
+        autocomplete="new-password" autocapitalize="none" autocorrect="off" spellcheck="false"></div>` : ''}
+    <label class="row"><input id="rem" name="remember" type="checkbox" value="on"${setup ? ' checked' : ''}><span>Remember this device</span></label>
     <button class="btn" id="go" type="submit"><svg class="ic"><use href="#i-${setup ? 'lock' : 'unlock'}"/></svg><span>${setup ? 'Set key &amp; enter' : 'Unlock'}</span></button>
     <div class="ft"><a href="https://github.com/hanmariyang/coxpit-oss#remote-access" target="_blank" rel="noopener">Fronting with Cloudflare Access / Tailscale? &rarr;</a></div>
   </form>
@@ -89,33 +111,18 @@ ${ICON_SPRITE}
   var err = document.getElementById('err');
   var go = document.getElementById('go');
   function show(m){ err.textContent = m || ''; }
+  // 폼은 native navigation POST 로 제출된다(Safari 가 응답의 Set-Cookie 를 커밋 → 303 GET /).
+  // 여기서는 클라이언트 사전검증만: 비면 막고, setup 이면 confirm/길이 확인. 통과 시 native 제출 진행.
   f.addEventListener('submit', function(ev){
-    ev.preventDefault();
-    show('');
     var key = document.getElementById('key').value;
-    var rem = document.getElementById('rem').checked;
-    if (!key){ show('access key required'); return; }
-    var body, url;
+    if (!key){ ev.preventDefault(); show('access key required'); return; }
     if (SETUP){
       var key2 = document.getElementById('key2').value;
-      if (key !== key2){ show('keys do not match'); return; }
-      if (key.length < 6){ show('use at least 6 characters'); return; }
-      url = '/api/auth/setup';
-      body = { key: key, token: document.getElementById('tok').value, remember: rem };
-    } else {
-      url = '/api/auth/unlock';
-      body = { key: key, remember: rem };
+      if (key !== key2){ ev.preventDefault(); show('keys do not match'); return; }
+      if (key.length < 6){ ev.preventDefault(); show('use at least 6 characters'); return; }
     }
-    go.disabled = true;
-    fetch(url, { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify(body) })
-      .then(function(r){ return r.json().then(function(j){ return { s:r.status, j:j }; }); })
-      .then(function(res){
-        if (res.s >= 200 && res.s < 300 && res.j && res.j.ok){ location.replace('/'); return; }
-        go.disabled = false;
-        var m = (res.j && (res.j.detail || res.j.error)) || ('error ' + res.s);
-        show(m);
-      })
-      .catch(function(){ go.disabled = false; show('network error'); });
+    show('');
+    go.disabled = true;           // 네비게이션 진행 중 중복 제출 방지(네이티브 제출은 계속)
   });
 })();
 </script>

package/src/server.ts

@@ -8,6 +8,7 @@ import Fastify, { type FastifyInstance, type FastifyReply } from 'fastify';
 import websocket from '@fastify/websocket';
 import { eq, inArray, and, like, desc } from 'drizzle-orm';
 import { authGate } from './auth';
+import { loginPageHTML } from './login';
 import {
   authMode, authIsOpen, verifyKey, storeKey, signSession, SESSION_COOKIE,
   clientKey, rateCheck, rateFail, rateReset, setupAllowed,
@@ -179,6 +180,20 @@ function sharePageHTML(
 export async function buildServer(): Promise<FastifyInstance> {
   const app = Fastify({ logger: true });
   await app.register(websocket);
+  // urlencoded 본문 파서(deps 0) — login/setup 폼이 real navigation POST 를 보내면
+  // 브라우저가 그 응답의 Set-Cookie 를 확정 커밋한다(Safari fetch-then-replace 레이스 회피).
+  app.addContentTypeParser(
+    'application/x-www-form-urlencoded',
+    { parseAs: 'string' },
+    (_req, body, done) => {
+      try {
+        const out: Record<string, string> = {};
+        const p = new URLSearchParams(body as string);
+        for (const [k, v] of p.entries()) out[k] = v;
+        done(null, out);
+      } catch (e) { done(e as Error, undefined); }
+    },
+  );
   app.addHook('onRequest', authGate);
 
   // 무인증 헬스(외부 감시용)
@@ -210,45 +225,71 @@ export async function buildServer(): Promise<FastifyInstance> {
   };
   const socketIp = (req: { socket?: { remoteAddress?: string } }): string =>
     String(req.socket?.remoteAddress ?? '');
+  // real form navigation POST(urlencoded + nav flag) 인가 — 그러면 JSON 대신 303/HTML 로 답한다.
+  // 이 경로는 브라우저가 응답의 Set-Cookie 를 커밋한 뒤 GET / 로 이동하므로 Safari 쿠키 레이스가 없다.
+  const isFormNav = (req: { body?: unknown; headers: Record<string, unknown> }): boolean => {
+    const ct = String(req.headers['content-type'] ?? '');
+    const b = (req.body ?? {}) as { nav?: unknown };
+    return ct.includes('application/x-www-form-urlencoded') || b.nav != null;
+  };
+  const truthy = (v: unknown): boolean =>
+    v === true || v === 'true' || v === 'on' || v === '1' || v === 1;
 
   // 첫 실행 셋업(anti-claim) — 셋업 토큰 일치 OR 진짜 로컬(loopback+no-fwd)만 허용.
   // 키가 이미 있으면 409(단발). 성공 시 해시 저장 + 세션 쿠키.
   app.post('/api/auth/setup', async (req, reply) => {
-    if (authMode().mode !== 'setup') return reply.code(409).send({ error: 'already configured' });
-    const b = (req.body ?? {}) as { key?: string; token?: string; remember?: boolean };
+    const nav = isFormNav(req);
+    // form-nav 실패는 로그인 페이지를 에러와 함께 다시 렌더(JSON 자동화는 아래처럼 JSON 유지).
+    const fail = (code: number, detail: string): FastifyReply => {
+      if (nav) return reply.type('text/html').code(code).send(loginPageHTML(true, { error: detail }));
+      return reply.code(code).send({ error: 'setup', detail });
+    };
+    if (authMode().mode !== 'setup') return fail(409, 'already configured');
+    const b = (req.body ?? {}) as { key?: string; token?: string; remember?: unknown };
     const key = String(b.key ?? '');
-    if (key.length < 6) return reply.code(400).send({ error: 'key too short', detail: 'use at least 6 characters' });
+    if (key.length < 6) return fail(400, 'use at least 6 characters');
     const gate = setupAllowed(req.headers as Record<string, unknown>, socketIp(req), String(b.token ?? ''));
     if (!gate.ok) {
-      return reply.code(403).send({ error: 'setup not allowed', detail: 'paste the one-time setup token from the daemon log (this request is not local)' });
+      return fail(403, 'paste the one-time setup token from the daemon log (this request is not local)');
     }
     storeKey(key); // 평문 키는 절대 로그하지 않음
-    setSessionCookie(reply, req, b.remember === true);
+    setSessionCookie(reply, req, truthy(b.remember));
+    // form-nav → 303 redirect to /(브라우저가 Set-Cookie 커밋 후 이동). JSON → 201.
+    if (nav) return reply.code(303).header('location', '/').send();
     return reply.code(201).send({ ok: true });
   });
 
   // 언락 — 상수시간 검증 + per-client 레이트리밋(백오프). 성공 시 세션 쿠키.
   app.post('/api/auth/unlock', async (req, reply) => {
+    const nav = isFormNav(req);
+    const fail = (code: number, detail: string): FastifyReply => {
+      if (nav) return reply.type('text/html').code(code).send(loginPageHTML(false, { error: detail }));
+      return reply.code(code).send({ error: 'unlock', detail });
+    };
     const m = authMode();
-    if (m.mode === 'disabled') return reply.send({ ok: true });
-    if (m.mode === 'setup') return reply.code(409).send({ error: 'not configured', detail: 'set an access key first' });
+    if (m.mode === 'disabled') {
+      if (nav) return reply.code(303).header('location', '/').send();
+      return reply.send({ ok: true });
+    }
+    if (m.mode === 'setup') return fail(409, 'set an access key first');
     const id = clientKey(req.headers as Record<string, unknown>, socketIp(req));
     const rc = rateCheck(id);
     if (rc.blocked) {
       const secs = Math.ceil(rc.retryMs / 1000);
-      return reply.code(429).send({ error: 'too many attempts', detail: `try again in ${secs}s` });
+      return fail(429, `too many attempts — try again in ${secs}s`);
     }
-    const b = (req.body ?? {}) as { key?: string; remember?: boolean };
+    const b = (req.body ?? {}) as { key?: string; remember?: unknown };
     if (verifyKey(String(b.key ?? ''), m)) {
       rateReset(id);
-      setSessionCookie(reply, req, b.remember === true);
+      setSessionCookie(reply, req, truthy(b.remember));
+      if (nav) return reply.code(303).header('location', '/').send();
       return reply.send({ ok: true });
     }
     const after = rateFail(id);
     const detail = after.retryMs > 0
       ? `wrong key — try again in ${Math.ceil(after.retryMs / 1000)}s`
       : `wrong key — ${after.attemptsLeft} attempt(s) left`;
-    return reply.code(401).send({ error: 'wrong key', detail });
+    return fail(401, detail);
   });
 
   // 로그아웃 — 쿠키 제거(Max-Age=0).