Add customer file browser, configurable WebDAV URL and harden both

- /u/:token/files lists files in the customer folder, /u/:token/file
  streams a download. Iterative walker with depth limit; symlinks are
  rejected at enumeration and via realpath containment on download;
  Content-Disposition filename is sanitized with an RFC 5987 fallback
- New "Private WebDAV-URL" field in admin settings, displayed under
  the customer table. Served via authenticated /status (not public
  /branding) so it does not leak to upload visitors

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

public/admin/index.html

@@ -404,7 +404,11 @@
         <form id="settingsForm">
           <div class="field"><label>Öffentliche Basis-URL</label>
             <input name="public_base_url" placeholder="z. B. https://upload.example.com" />
-            <p class="small" style="margin:.35rem 0 0">Leer lassen, um aus jedem Request die aktuelle URL zu nutzen.</p>
+            <p class="small" style="margin:.35rem 0 0">Wird in den Kunden-Upload-Links eingesetzt. Leer lassen = aus dem Request abgeleitet.</p>
+          </div>
+          <div class="field"><label>Private WebDAV-URL</label>
+            <input name="webdav_url" placeholder="z. B. webdav://upload.example.com:1900/" />
+            <p class="small" style="margin:.35rem 0 0">Wird im Adminportal unter der Kundenliste angezeigt. Leer lassen = <code>webdav://&lt;host&gt;:1900/</code>.</p>
           </div>
           <div class="field"><label>Cron-Intervall (Minuten)</label>
             <input name="janitor_interval_minutes" type="number" min="1" style="max-width: 8rem" />
@@ -547,7 +551,8 @@ async function bootstrap() {
   } else {
     document.getElementById('createCustomerCard').style.display = '';
   }
-  document.getElementById('webdavUrl').textContent = `webdav://${location.hostname}:1900/`;
+  document.getElementById('webdavUrl').textContent =
+    (status.webdav_url || '').trim() || `webdav://${location.hostname}:1900/`;
   show('view-app');
   loadCustomers();
 }
@@ -754,6 +759,7 @@ async function loadSettings() {
   const s = await api.get('/settings');
   const form = document.getElementById('settingsForm');
   form.public_base_url.value = s.public_base_url || '';
+  form.webdav_url.value = s.webdav_url || '';
   form.janitor_interval_minutes.value = s.janitor_interval_minutes || 30;
   setSlider('logoWidth', s.logo_width_px || 0);
   setSlider('logoHeight', s.logo_height_px || 0);
@@ -806,10 +812,14 @@ document.getElementById('settingsForm').addEventListener('submit', async (e) =>
   try {
     await api.send('PUT', '/settings', {
       public_base_url: fd.get('public_base_url') || '',
+      webdav_url: fd.get('webdav_url') || '',
       janitor_interval_minutes: parseInt(fd.get('janitor_interval_minutes') || '30', 10),
       logo_width_px: getSlider('logoWidth'),
       logo_height_px: getSlider('logoHeight'),
     });
+    // Refresh main view in case the WebDAV-URL display needs an update.
+    document.getElementById('webdavUrl').textContent =
+      (fd.get('webdav_url') || '').trim() || `webdav://${location.hostname}:1900/`;
     const msg = document.getElementById('settingsMsg');
     msg.textContent = '✓ Gespeichert';
     setTimeout(() => msg.textContent = '', 2000);

public/upload.html

@@ -122,6 +122,22 @@
     padding: .15rem .55rem; border-radius: 999px; font-size: .75rem;
     color: var(--text-muted); border: 1px solid var(--border-strong); }
 
+  .browser { margin-top: 2rem; }
+  .browser h2 { font-size: 1rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
+  .browser .count { color: var(--text-muted); font-size: .85rem; font-weight: normal; }
+  .browser .empty { color: var(--text-muted); font-size: .9rem; padding: 1rem; text-align: center;
+    border: 1px dashed var(--border); border-radius: var(--radius-sm); }
+  .browser .row {
+    display: grid; grid-template-columns: auto 1fr auto auto; gap: .75rem;
+    align-items: center; padding: .55rem .75rem; border: 1px solid var(--border);
+    background: var(--bg); border-radius: var(--radius-sm); margin-bottom: .35rem;
+    font-size: .88rem;
+  }
+  .browser .row .icon { font-size: 1rem; opacity: .7; }
+  .browser .row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .browser .row .meta { color: var(--text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
+  .browser .row .dl { padding: .3rem .65rem; font-size: .8rem; }
+
   footer { margin-top: 2rem; color: var(--text-dim); font-size: .8rem; }
 </style>
 </head>
@@ -159,6 +175,11 @@
       </div>
     </div>
     <div id="list"></div>
+
+    <div class="browser">
+      <h2>Bisher hochgeladene Dateien <span class="count" id="fileCount"></span></h2>
+      <div id="fileBrowser"><div class="empty">– wird geladen –</div></div>
+    </div>
   </div>
 </div>
 
@@ -205,9 +226,65 @@ async function init() {
     info.textContent = 'Lade Dateien oder ganze Ordner hoch — die Ordnerstruktur bleibt erhalten.';
   }
   if (data.has_password) gate.style.display = 'block';
-  else main.style.display = 'block';
+  else { main.style.display = 'block'; loadFiles(); }
 }
 
+function authHeaders() {
+  return password ? { 'X-Upload-Password': password } : {};
+}
+
+async function loadFiles() {
+  const browser = document.getElementById('fileBrowser');
+  const count = document.getElementById('fileCount');
+  try {
+    const r = await fetch(`/u/${token}/files`, { headers: authHeaders() });
+    if (!r.ok) { browser.innerHTML = '<div class="empty">Konnte Dateien nicht laden.</div>'; count.textContent = ''; return; }
+    const files = await r.json();
+    count.textContent = files.length ? `(${files.length})` : '';
+    if (!files.length) {
+      browser.innerHTML = '<div class="empty">Noch keine Dateien hochgeladen.</div>';
+      return;
+    }
+    browser.innerHTML = files.map(f => {
+      const name = f.path.replace(/[<>&"]/g, c => ({'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c]));
+      const date = new Date(f.mtime).toLocaleString();
+      return `
+        <div class="row">
+          <div class="icon">📄</div>
+          <div>
+            <div class="name" title="${name}">${name}</div>
+            <div class="meta">${date}</div>
+          </div>
+          <div class="meta">${fmtSize(f.size)}</div>
+          <button type="button" class="btn dl" data-path="${name}">⬇ Download</button>
+        </div>`;
+    }).join('');
+  } catch (e) {
+    browser.innerHTML = '<div class="empty">Fehler beim Laden.</div>';
+  }
+}
+
+document.getElementById('fileBrowser').addEventListener('click', async (e) => {
+  const btn = e.target.closest('button[data-path]');
+  if (!btn) return;
+  const filePath = btn.dataset.path;
+  btn.disabled = true; const orig = btn.textContent; btn.textContent = '… lädt';
+  try {
+    const r = await fetch(`/u/${token}/file?path=${encodeURIComponent(filePath)}`, { headers: authHeaders() });
+    if (!r.ok) throw new Error(`HTTP ${r.status}`);
+    const blob = await r.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url; a.download = filePath.split('/').pop();
+    document.body.appendChild(a); a.click(); a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  } catch (ex) {
+    alert('Download fehlgeschlagen: ' + ex.message);
+  } finally {
+    btn.disabled = false; btn.textContent = orig;
+  }
+});
+
 document.getElementById('pwBtn').onclick = async () => {
   const pw = document.getElementById('pw').value;
   const r = await fetch(`/u/${token}/auth`, {
@@ -215,7 +292,7 @@ document.getElementById('pwBtn').onclick = async () => {
     body: JSON.stringify({ password: pw }),
   });
   const j = await r.json();
-  if (j.ok) { password = pw; gate.style.display='none'; main.style.display='block'; }
+  if (j.ok) { password = pw; gate.style.display='none'; main.style.display='block'; loadFiles(); }
   else document.getElementById('pwErr').style.display='block';
 };
 
@@ -272,6 +349,7 @@ async function uploadOne(file, relPath) {
 
 async function uploadFiles(items) {
   for (const { file, path } of items) await uploadOne(file, path);
+  loadFiles();
 }
 
 document.getElementById('fileInput').onchange = (e) => {

src/server.js

@@ -138,11 +138,14 @@ publicApi.get('/branding', (req, res) => {
 
 publicApi.get('/status', (req, res) => {
   const u = auth.getSessionUser(req);
-  res.json({
+  const payload = {
     setup_required: !auth.hasAnyUser(),
     authenticated: !!u,
     user: u ? { id: u.id, username: u.username, role: u.role } : null,
-  });
+  };
+  // WebDAV URL is internal infra info — only expose it to authenticated users.
+  if (u) payload.webdav_url = settings.get('webdav_url', '');
+  res.json(payload);
 });
 
 publicApi.post('/setup', loginLimiter, async (req, res) => {
@@ -261,6 +264,7 @@ api.post('/me/password', loginLimiter, auth.requireAuth, async (req, res) => {
 api.get('/settings', auth.requireAdmin, (req, res) => {
   res.json({
     public_base_url: settings.get('public_base_url', ''),
+    webdav_url: settings.get('webdav_url', ''),
     janitor_interval_minutes: parseInt(settings.get('janitor_interval_minutes', '30'), 10),
     logo_filename: settings.get('logo_filename', ''),
     logo_width_px: parseInt(settings.get('logo_width_px', '0'), 10),
@@ -281,6 +285,9 @@ api.put('/settings', auth.requireAdmin, (req, res) => {
   if (b.public_base_url !== undefined) {
     settings.set('public_base_url', String(b.public_base_url || '').trim().replace(/\/+$/, ''));
   }
+  if (b.webdav_url !== undefined) {
+    settings.set('webdav_url', String(b.webdav_url || '').trim().replace(/\/+$/, ''));
+  }
   if (b.janitor_interval_minutes !== undefined) {
     const n = Math.max(1, parseInt(b.janitor_interval_minutes, 10) || 30);
     settings.set('janitor_interval_minutes', String(n));
@@ -591,6 +598,75 @@ function uploadAuth(req, res, next) {
   }
 }
 
+const MAX_WALK_DEPTH = 20;
+
+// Iterative walk with depth limit. Symlinks (file or directory) are skipped
+// so a malicious WebDAV upload cannot point out of the customer directory.
+function listCustomerFiles(baseDir) {
+  const out = [];
+  const queue = [{ dir: baseDir, depth: 0 }];
+  while (queue.length) {
+    const { dir, depth } = queue.shift();
+    if (depth > MAX_WALK_DEPTH) continue;
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { continue; }
+    for (const e of entries) {
+      if (e.isSymbolicLink()) continue;
+      const abs = path.join(dir, e.name);
+      if (e.isDirectory()) {
+        queue.push({ dir: abs, depth: depth + 1 });
+      } else if (e.isFile()) {
+        try {
+          const st = fs.lstatSync(abs);
+          if (!st.isFile()) continue;
+          out.push({
+            path: path.relative(baseDir, abs).split(path.sep).join('/'),
+            size: st.size,
+            mtime: st.mtimeMs,
+          });
+        } catch {}
+      }
+    }
+  }
+  return out.sort((a, b) => b.mtime - a.mtime);
+}
+
+// Strip control chars / CRLF / quotes for Content-Disposition.
+// Anything non-ASCII-safe is replaced with "_"; the original is offered
+// via RFC 5987 filename* so international names still work in modern clients.
+function cdFilename(name) {
+  const safe = String(name).replace(/[\x00-\x1f\x7f"\\]+/g, '_').slice(0, 200) || 'download';
+  const encoded = encodeURIComponent(name);
+  return `attachment; filename="${safe}"; filename*=UTF-8''${encoded}`;
+}
+
+app.get('/u/:token/files', uploadAuth, (req, res) => {
+  const c = req._customer;
+  res.json(listCustomerFiles(customerDir(c.slug)));
+});
+
+app.get('/u/:token/file', uploadAuth, (req, res) => {
+  const c = req._customer;
+  const base = customerDir(c.slug);
+  const rel = sanitizeRelPath(req.query.path || '');
+  if (!rel) return res.status(400).end();
+  let abs;
+  try { abs = safeJoin(base, rel); } catch { return res.status(400).end(); }
+  // Defeat symlinks: resolve the real path and re-check containment.
+  let real;
+  try { real = fs.realpathSync(abs); } catch { return res.status(404).end(); }
+  const baseReal = fs.realpathSync(base);
+  if (real !== baseReal && !real.startsWith(baseReal + path.sep)) {
+    return res.status(404).end();
+  }
+  let st;
+  try { st = fs.lstatSync(real); } catch { return res.status(404).end(); }
+  if (!st.isFile()) return res.status(404).end();
+  res.setHeader('Content-Disposition', cdFilename(path.basename(real)));
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.sendFile(real);
+});
+
 app.post('/u/:token/upload', uploadAuth, upload.single('file'), (req, res) => {
   const c = req._customer;
   const f = req.file;