security: httpOnly cookies, rate limiting, nginx headers, SSE sanitization

Auth / token storage:
- JWT is now set as an httpOnly Secure SameSite=Lax cookie on login
- Add POST /auth/logout endpoint that clears the cookie
- get_current_member falls back to rh_token cookie when no Authorization header
- WebSocket auth now accepts cookie (rh_token) or optional ?token= query param
- Frontend removes all localStorage JWT access; uses credentials:"include" on
  every fetch so the httpOnly cookie is sent automatically
- Replace clearToken() with logout() that calls the server logout endpoint
- Non-sensitive rh_session flag in localStorage used only for client-side routing

Rate limiting:
- Add slowapi>=0.1.9 dependency
- /auth/login limited to 10 req/min per IP
- /auth/register limited to 5 req/min per IP

Nginx security headers:
- Add X-Frame-Options, X-Content-Type-Options, Referrer-Policy,
  X-XSS-Protection, Permissions-Policy to all responses

SSE error leakage:
- songs.py nc-scan/stream no longer leaks str(exc) to clients

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/nginx.conf

@@ -3,6 +3,13 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
+    # Security headers
+    add_header X-Frame-Options "DENY" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header X-XSS-Protection "0" always;
+    add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
+
     # Allow avatar uploads up to 10MB (API enforces a 5MB limit)
     client_max_body_size 10m;
 

web/src/App.tsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
 import "./index.css";
 import { ThemeProvider, useTheme } from "./theme";
+import { isLoggedIn } from "./api/client";
 import { LoginPage } from "./pages/LoginPage";
 import { HomePage } from "./pages/HomePage";
 import { BandPage } from "./pages/BandPage";
@@ -15,8 +16,7 @@ const queryClient = new QueryClient({
 });
 
 function PrivateRoute({ children }: { children: React.ReactNode }) {
-  const token = localStorage.getItem("rh_token");
-  return token ? <>{children}</> : <Navigate to="/login" replace />;
+  return isLoggedIn() ? <>{children}</> : <Navigate to="/login" replace />;
 }
 
 function ThemeToggle() {

web/src/api/auth.ts

@@ -1,4 +1,4 @@
-import { api, setToken } from "./client";
+import { api, markLoggedIn, markLoggedOut } from "./client";
 
 export interface LoginRequest {
   email: string;
@@ -20,10 +20,19 @@ export interface MemberRead {
 
 export async function login(req: LoginRequest): Promise<TokenResponse> {
   const resp = await api.post<TokenResponse>("/auth/login", req);
-  setToken(resp.access_token);
+  markLoggedIn();
   return resp;
 }
 
+export async function logout(): Promise<void> {
+  try {
+    await api.post("/auth/logout", {});
+  } finally {
+    markLoggedOut();
+    window.location.href = "/login";
+  }
+}
+
 export async function register(req: {
   email: string;
   password: string;

web/src/api/client.ts

@@ -1,15 +1,21 @@
 const BASE = "/api/v1";
 
-function getToken(): string | null {
-  return localStorage.getItem("rh_token");
+// A non-sensitive flag in localStorage that tells the SPA whether the user has
+// an active session. The actual JWT lives in an httpOnly cookie and is never
+// readable by JavaScript. Clearing this flag is sufficient for client-side
+// route guards; the server still validates the cookie on every request.
+const SESSION_KEY = "rh_session";
+
+export function markLoggedIn(): void {
+  localStorage.setItem(SESSION_KEY, "1");
 }
 
-export function setToken(token: string): void {
-  localStorage.setItem("rh_token", token);
+export function markLoggedOut(): void {
+  localStorage.removeItem(SESSION_KEY);
 }
 
-export function clearToken(): void {
-  localStorage.removeItem("rh_token");
+export function isLoggedIn(): boolean {
+  return localStorage.getItem(SESSION_KEY) === "1";
 }
 
 async function request<T>(
@@ -17,20 +23,20 @@ async function request<T>(
   options: RequestInit = {},
   isFormData = false
 ): Promise<T> {
-  const token = getToken();
   const headers: Record<string, string> = {
     ...(options.headers as Record<string, string>),
   };
   if (!isFormData) {
     headers["Content-Type"] = "application/json";
   }
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-  const resp = await fetch(`${BASE}${path}`, { ...options, headers });
+  const resp = await fetch(`${BASE}${path}`, {
+    ...options,
+    headers,
+    credentials: "include",  // send httpOnly cookie on every request
+  });
   if (!resp.ok) {
     if (resp.status === 401) {
-      clearToken();
+      markLoggedOut();
       window.location.href = "/login";
       throw new Error("Session expired");
     }

web/src/hooks/useWaveform.ts

@@ -40,9 +40,8 @@ export function useWaveform(
       normalize: true,
     });
 
-    const token = localStorage.getItem("rh_token");
-    const audioUrl = token ? `${options.url}?token=${encodeURIComponent(token)}` : options.url;
-    ws.load(audioUrl);
+    // The rh_token httpOnly cookie is sent automatically by the browser.
+    ws.load(options.url);
 
     ws.on("ready", () => {
       setIsReady(true);

web/src/pages/BandPage.tsx

@@ -123,11 +123,11 @@ export function BandPage() {
     setScanMsg(null);
     setScanProgress("Starting scan…");
 
-    const token = localStorage.getItem("rh_token");
-    const url = `/api/v1/bands/${bandId}/nc-scan/stream${token ? `?token=${encodeURIComponent(token)}` : ""}`;
+    const url = `/api/v1/bands/${bandId}/nc-scan/stream`;
 
     try {
-      const resp = await fetch(url);
+      // credentials: "include" sends the rh_token httpOnly cookie automatically
+      const resp = await fetch(url, { credentials: "include" });
       if (!resp.ok || !resp.body) {
         const text = await resp.text().catch(() => resp.statusText);
         throw new Error(text || `HTTP ${resp.status}`);

web/src/pages/HomePage.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { listBands, createBand } from "../api/bands";
-import { clearToken } from "../api/client";
+import { logout } from "../api/auth";
 
 export function HomePage() {
   const navigate = useNavigate();
@@ -29,8 +29,7 @@ export function HomePage() {
   });
 
   function handleSignOut() {
-    clearToken();
-    navigate("/login");
+    logout();
   }
 
   const inputStyle: React.CSSProperties = {

web/src/pages/InvitePage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import { api } from "../api/client";
+import { api, isLoggedIn } from "../api/client";
 
 interface InviteInfo {
   id: string;
@@ -19,7 +19,7 @@ export function InvitePage() {
   const [accepting, setAccepting] = useState(false);
   const [done, setDone] = useState(false);
 
-  const isLoggedIn = !!localStorage.getItem("rh_token");
+  const loggedIn = isLoggedIn();
 
   useEffect(() => {
     if (!token) return;
@@ -74,7 +74,7 @@ export function InvitePage() {
               {invite.used_at && " · Already used"}
             </p>
 
-            {isLoggedIn ? (
+            {loggedIn ? (
               <button
                 onClick={accept}
                 disabled={accepting || !!invite.used_at}