security(frontend): harden CSP and session token handling

- keep auth token session-persisted and migrate legacy localStorage token

- add abortable preview hydration to cancel stale in-flight polling

- tighten app security header expectations in specs

Author: gildesmarais

app.rb

@@ -41,9 +41,14 @@ def development? = self.class.development?
       use Rack::Cache, metastore: 'file:./tmp/rack-cache-meta', entitystore: 'file:./tmp/rack-cache-body',
                        verbose: development?
 
+      # rubocop:disable Metrics/BlockLength
       plugin :content_security_policy do |csp|
         csp.default_src :none
-        csp.style_src :self, "'unsafe-inline'"
+        if development?
+          csp.style_src :self, "'unsafe-inline'"
+        else
+          csp.style_src :self
+        end
         csp.script_src :self
         csp.connect_src :self
         csp.img_src :self
@@ -65,6 +70,7 @@ def development? = self.class.development?
         csp.block_all_mixed_content
         csp.upgrade_insecure_requests
       end
+      # rubocop:enable Metrics/BlockLength
 
       plugin :default_headers, {
         'X-Content-Type-Options' => 'nosniff',

frontend/src/__tests__/App.contract.test.tsx

@@ -14,7 +14,7 @@ describe('App contract', () => {
   });
 
   const authenticate = () => {
-    globalThis.localStorage.setItem('html2rss_access_token', token);
+    globalThis.sessionStorage.setItem('html2rss_access_token', token);
   };
 
   it('shows feed result when API responds with success', async () => {
@@ -168,6 +168,6 @@ describe('App contract', () => {
 
     expect(screen.getByText('Enter access token')).toBeInTheDocument();
     expect(screen.queryByText('Could not create feed link')).not.toBeInTheDocument();
-    expect(globalThis.localStorage.getItem('html2rss_access_token')).toBeNull();
+    expect(globalThis.sessionStorage.getItem('html2rss_access_token')).toBeNull();
   });
 });

frontend/src/__tests__/useAccessToken.test.ts

@@ -8,8 +8,8 @@ describe('useAccessToken', () => {
     globalThis.sessionStorage.clear();
   });
 
-  it('loads the persisted token from localStorage', async () => {
-    globalThis.localStorage.setItem('html2rss_access_token', 'persisted-token');
+  it('loads the persisted token from sessionStorage', async () => {
+    globalThis.sessionStorage.setItem('html2rss_access_token', 'persisted-token');
 
     const { result } = renderHook(() => useAccessToken());
 
@@ -19,18 +19,18 @@ describe('useAccessToken', () => {
     expect(result.current.error).toBeUndefined();
   });
 
-  it('migrates a legacy session token into localStorage', async () => {
-    globalThis.sessionStorage.setItem('html2rss_access_token', 'legacy-token');
+  it('migrates a legacy localStorage token into sessionStorage', async () => {
+    globalThis.localStorage.setItem('html2rss_access_token', 'legacy-token');
 
     const { result } = renderHook(() => useAccessToken());
 
     expect(result.current.isLoading).toBe(false);
     expect(result.current.token).toBe('legacy-token');
-    expect(globalThis.localStorage.getItem('html2rss_access_token')).toBe('legacy-token');
-    expect(globalThis.sessionStorage.getItem('html2rss_access_token')).toBeNull();
+    expect(globalThis.sessionStorage.getItem('html2rss_access_token')).toBe('legacy-token');
+    expect(globalThis.localStorage.getItem('html2rss_access_token')).toBeNull();
   });
 
-  it('saves new tokens to the persistent storage path', async () => {
+  it('saves new tokens to sessionStorage only', async () => {
     const { result } = renderHook(() => useAccessToken());
 
     await act(async () => {
@@ -39,13 +39,13 @@ describe('useAccessToken', () => {
 
     expect(result.current.token).toBe('new-token');
     expect(result.current.hasToken).toBe(true);
-    expect(globalThis.localStorage.getItem('html2rss_access_token')).toBe('new-token');
-    expect(globalThis.sessionStorage.getItem('html2rss_access_token')).toBeNull();
+    expect(globalThis.sessionStorage.getItem('html2rss_access_token')).toBe('new-token');
+    expect(globalThis.localStorage.getItem('html2rss_access_token')).toBeNull();
   });
 
-  it('clears both persistent and legacy token copies', async () => {
-    globalThis.localStorage.setItem('html2rss_access_token', 'persisted-token');
-    globalThis.sessionStorage.setItem('html2rss_access_token', 'legacy-token');
+  it('clears both session and legacy local token copies', async () => {
+    globalThis.sessionStorage.setItem('html2rss_access_token', 'persisted-token');
+    globalThis.localStorage.setItem('html2rss_access_token', 'legacy-token');
 
     const { result } = renderHook(() => useAccessToken());
 

frontend/src/hooks/useAccessToken.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'preact/hooks';
-import { getPersistentStorage } from '../utils/persistentStorage';
 
 const ACCESS_TOKEN_KEY = 'html2rss_access_token';
+let inMemoryToken = '';
 
 interface AccessTokenState {
   token?: string;
@@ -19,33 +19,66 @@ const clearLegacySessionToken = () => {
   }
 };
 
+const clearLegacyLocalToken = () => {
+  if (globalThis.window === undefined) return;
+
+  try {
+    globalThis.localStorage?.removeItem(ACCESS_TOKEN_KEY);
+  } catch {
+    // Ignore restricted localStorage access (privacy mode, sandboxed contexts).
+  }
+};
+
+const readSessionToken = (): string => {
+  if (globalThis.window === undefined) return inMemoryToken;
+
+  try {
+    return globalThis.sessionStorage?.getItem(ACCESS_TOKEN_KEY)?.trim() ?? '';
+  } catch {
+    return inMemoryToken;
+  }
+};
+
+const writeSessionToken = (token: string) => {
+  inMemoryToken = token;
+  if (globalThis.window === undefined) return;
+
+  try {
+    if (token) {
+      globalThis.sessionStorage?.setItem(ACCESS_TOKEN_KEY, token);
+    } else {
+      globalThis.sessionStorage?.removeItem(ACCESS_TOKEN_KEY);
+    }
+  } catch {
+    // Keep in-memory fallback only when sessionStorage is unavailable.
+  }
+};
+
 export function useAccessToken() {
   const [state, setState] = useState<AccessTokenState>({
     isLoading: true,
   });
 
   useEffect(() => {
-    const storage = getPersistentStorage();
-
     try {
-      const token = storage.getItem(ACCESS_TOKEN_KEY)?.trim() ?? '';
-      let legacyToken = '';
+      const token = readSessionToken();
+      let legacyLocalToken = '';
       if (!token && globalThis.window !== undefined) {
         try {
-          legacyToken = globalThis.sessionStorage?.getItem(ACCESS_TOKEN_KEY)?.trim() ?? '';
+          legacyLocalToken = globalThis.localStorage?.getItem(ACCESS_TOKEN_KEY)?.trim() ?? '';
         } catch {
-          // Treat restricted sessionStorage access as no legacy token.
-          legacyToken = '';
+          // Treat restricted localStorage access as no legacy token.
+          legacyLocalToken = '';
         }
       }
 
-      if (!token && legacyToken) {
-        storage.setItem(ACCESS_TOKEN_KEY, legacyToken);
-        clearLegacySessionToken();
+      if (!token && legacyLocalToken) {
+        writeSessionToken(legacyLocalToken);
+        clearLegacyLocalToken();
       }
 
       setState({
-        token: token || legacyToken || undefined,
+        token: token || legacyLocalToken || undefined,
         isLoading: false,
       });
     } catch {
@@ -60,8 +93,8 @@ export function useAccessToken() {
     const normalized = token.trim();
     if (!normalized) throw new Error('Access token is required');
 
-    const storage = getPersistentStorage();
-    storage.setItem(ACCESS_TOKEN_KEY, normalized);
+    writeSessionToken(normalized);
+    clearLegacyLocalToken();
     clearLegacySessionToken();
 
     setState({
@@ -71,8 +104,8 @@ export function useAccessToken() {
   };
 
   const clearToken = () => {
-    const storage = getPersistentStorage();
-    storage.removeItem(ACCESS_TOKEN_KEY);
+    writeSessionToken('');
+    clearLegacyLocalToken();
     clearLegacySessionToken();
 
     setState({