[Blackwellcode]

Summary

WebUI part of the 2026-11-12 audit (01 runtime UI, 03 app design, 04 S2/S8), the approved restyle, the code-review fixes and the follow-ups to #12. Layout and wiring are kept; one CSP, one token layer, one confirmation dialog.

 request
   render template
+    csp_nonce()            -> nonce="..." on every inline <script>
+    |css_url               -> banner/hero url() only for /path or https:// (is_allowed_url)
   set_security_headers
-    Content-Security-Policy-Report-Only: script-src 'unsafe-inline' ...
+    Content-Security-Policy: script-src 'self' 'nonce-…' 'sha256-…' cdn; script-src-attr 'none'
+                             img-src https: ; connect-src … BTTV FFZ 7TV ivr.fi

 WEBUI/static/
 ├── css/
 │   ├── tokens.css          # the only token layer (was: 16 :root blocks in 3 files)
 │   ├── a11y.css            # linked last: focus ring, dialogs, targets, buttons
-│   └── ui-polish.css       # dead, never linked
 ├── style.css               # dead selectors + shadowed declarations removed
+├── sv_confirm.js           # data-confirm -> native <dialog>, strings via svT()
+├── overlay_audio.js        # header-authenticated audio as blob URL (TTS + alerts)
 ├── tts_overlay.js          # token from #token= (or ?token=), sent as X-TTS-Token
 └── alerts_overlay.js       # token from #token= (or ?token=), sent as X-Alert-Token

 inline onclick= / onsubmit= / confirm()   (≈180 handlers in 30 templates)
-  removed
+  addEventListener / data-* delegation
+  data-confirm (restart, maintenance, deletes, revoke, rename, logout everywhere)

Also: <dialog> modals with focus in/out and Escape, labels on every flagged field, skip link, heading order, bottom navigation with Log out / Log out everywhere below 768 px, zoom unlocked on the mobile templates, AA contrast tokens, 12 px minimum text, eager LCP images, sentence-case msgids, Sie-form German, 0 untranslated strings in all 11 catalogs, CHANGELOG and .env.example (VOD_CSP_ENFORCE=true).

Evidence

Screenshots (local demo): desktop dashboard · desktop confirm dialog · phone dashboard · phone bottom navigation

Measure (local demo, same scripts before/after)	Before (c5a142c)	After
CSP violations, strict policy, 9 pages	2–11 per page (Report-Only)	0, enforced
Lighthouse a11y desktop: dash/channels/search/admin/users/vod/streamer/storage/traffic	92/100/100/95/97/97/89/88/95	100 on all 9
LCP mobile dashboard, desktop UA (375 px, Slow 4G, CPU 4×)	6639 ms	4046 / 4049 ms
LCP mobile dashboard, iPhone UA	4858 / 4850 ms (at a3a1372)	4112 / 4094 ms, load delay 3270 → 99 ms
CSS bytes / !important / colour literal occurrences	603161 / 4861 / 1967	401477 / 3532 / 1022
Overlay API without token / with ?token= only / with header	–	401 / 401 / 200 (TTS + alerts)
POST /logout/all without / with CSRF; second session afterwards	–	403 / 302 → /login; 302 → /login

ui_baseline.py compare (dembrandt, baseline a3a1372 → after review fixes): login 0, index 0, channels 0 (2 changes), search 0 (2 changes), admin 1 (4 changes) → overall exit 1. The admin drift is intended: "Restart services" is now really the secondary style (the legacy body:is(.page-*) button rule had kept it blue), white button text → #f3f5fc, field edge #66789c from the new OBS URL fields.

Tests: python -m unittest discover -s tests -p "test_*.py" → Ran 323 tests … OK (skipped=20); uv run --no-project --with ruff==0.17.3 ruff check . → All checks passed!. New: tests/test_webui_frontend.py (css_url, chat-fallback escaping incl. node run, data-confirm rendering, no inline handlers or parallel confirm attributes, JS_MESSAGES, overlay token transport, logout-everywhere forms), ContentSecurityPolicyTests (every executable inline script carries the response nonce on six pages; only the hashed scripts from inject_mobile_app_head() are exempt; img-src https:).

Changed assertion, ClipEditorShareXssTests (CSP blocks inline handlers, so the Share button has no onclick any more):

-    def _share_onclick(self, clip_name):
+    def _share_clip_name(self, clip_name):
 ...
-                value = dict(attrs).get("onclick") or ""
-                if value.startswith("shareClip("):
-                    handlers.append(value)
+                attr_map = dict(attrs)
+                inline_handlers.extend(name for name in attr_map if name.startswith("on"))
+                if attr_map.get("id") == "btnShareClip":
+                    share_values.append(attr_map.get("data-clip-name"))
 ...
-        self.assertEqual(len(handlers), 1)
+        self.assertEqual(inline_handlers, [])
+        self.assertEqual(len(share_values), 1)
 ...
-                self.assertEqual(json.loads(match.group(1)), payload)
+                self.assertEqual(self._share_clip_name(payload), payload)

Same five payloads, same exact round-trip requirement; additionally the page must contain no inline handler at all.

Merge Danger

Door: two-way

Revert restores the old templates and CSS; VOD_CSP_ENFORCE=false switches the policy back to Report-Only without a revert.

Blast Radius: UI-wide

• Custom or forked templates with inline scripts or onclick= stop working under the enforced CSP until they use nonce="{{ csp_nonce() }}" / listeners.
• Visual restyle across all pages (palette, type and radius scales, removed dead CSS); checked at 375/768/1280/1920 on dashboard, VOD, admin, channels only.
• OBS overlays: existing ?token= URLs keep working client-side; the server only sees the header.
• Open: z-index scale and further !important reduction need cascade work; the backend PWA install banner overlaps the bottom navigation on phones.

🤖 Generated with Claude Code