From 57f8c907697973810e9465da214aa012486379e2 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@chovy.com>
Date: Sat, 29 Aug 2026 07:04:09 +0000
Subject: [PATCH] fix(csp): let recordings play on the site, not just in the
 embed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

media-src only allowed a remote origin on /embed/*, so every past live was
CSP-blocked on pairux.com's own replay pages. The <video> rendered with the
right src and the MP4 served fine — Chrome just refused the load with
"MEDIA_ELEMENT_ERROR: Media load rejected by URL safety check", visible
only in the console, so the player looked broken for no reason.

Allow the Supabase Storage origin on every page instead, derived from the
same NEXT_PUBLIC_SUPABASE_URL that builds the playback URLs. This is also
narrower than what /embed/* had: a specific origin rather than all https:.

Verified against prod /l/TER8XG in headless Chrome — blocked before the
change; after it the recording loads (126.6s, 1280x720) and plays with no
CSP violations. Adds the first CSP tests for the middleware, covering the
media-src/embed divergence that let this through.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WFLwZtXE6iBJyJSgrsWqRM
---
 apps/web/src/middleware.test.ts | 29 +++++++++++++++++++++++++++++
 apps/web/src/middleware.ts      | 20 ++++++++++++++++++--
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/middleware.test.ts b/apps/web/src/middleware.test.ts
index 8276c0e4..41f5c613 100644
--- a/apps/web/src/middleware.test.ts
+++ b/apps/web/src/middleware.test.ts
@@ -18,6 +18,35 @@ describe('middleware', () => {
     vi.clearAllMocks();
   });
 
+  describe('Content-Security-Policy', () => {
+    async function cspFor(path: string): Promise<string> {
+      const { NextResponse } = await import('next/server');
+      vi.mocked(updateSession).mockResolvedValue(NextResponse.next());
+      const response = await middleware(createNextRequest(path));
+      return response.headers.get('content-security-policy') ?? '';
+    }
+
+    function mediaSrc(csp: string): string {
+      return csp.split('; ').find((d) => d.startsWith('media-src ')) ?? '';
+    }
+
+    // Regression: media-src allowed a remote origin only on /embed/*, so a
+    // recording played in the embeddable player but was blocked on the site's
+    // own replay pages — a silent, console-only failure.
+    it('allows the recording storage origin on replay pages', async () => {
+      expect(mediaSrc(await cspFor('/l/TER8XG'))).toContain('supabase');
+    });
+
+    it('allows the same media origins on /embed/* as on the site', async () => {
+      expect(mediaSrc(await cspFor('/embed/TER8XG'))).toBe(mediaSrc(await cspFor('/l/TER8XG')));
+    });
+
+    it('still restricts frame-ancestors off the embed player', async () => {
+      expect(await cspFor('/l/TER8XG')).toContain("frame-ancestors 'self' chrome-extension:");
+      expect(await cspFor('/embed/TER8XG')).toContain('frame-ancestors *');
+    });
+  });
+
   describe('CORS preflight', () => {
     it('returns 204 with CORS headers for OPTIONS on /api/ routes', async () => {
       const request = createNextRequest('/api/sessions/123/signal/stream', 'OPTIONS');
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index ebb6e3ea..54b29e27 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -6,14 +6,30 @@ import { CORS_HEADERS } from '@/lib/cors';
 // can carry a fresh script nonce — that lets us drop 'unsafe-inline' from
 // script-src. Next.js reads the nonce from the request's CSP header and applies
 // it to its inline bootstrap scripts; our own inline <script>s read x-nonce.
+
+// Session recordings are uploaded to Supabase Storage and streamed straight
+// from there by /l/<code> and the embeddable player, so that origin has to be
+// in media-src on EVERY page — scoping it to /embed/* left the site's own
+// replay pages silently blocking their <video> (nothing plays, console-only
+// error). Derived from the same env var that builds the playback URLs, with
+// the project wildcard as a fallback so a missing var can't re-break replay.
+function mediaOrigin(): string {
+  const base = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  if (!base) return 'https://*.supabase.co';
+  try {
+    return new URL(base).origin;
+  } catch {
+    return 'https://*.supabase.co';
+  }
+}
+
 function buildCsp(nonce: string, embeddable: boolean): string {
   return [
     "default-src 'self'",
     `script-src 'self' 'nonce-${nonce}' 'wasm-unsafe-eval' https://crawlproof.com https://datafa.st https://feedback.profullstack.com`,
     "style-src 'self' 'unsafe-inline'",
     "img-src 'self' data: blob: https:",
-    // The embeddable player streams recordings from Supabase Storage over https.
-    embeddable ? "media-src 'self' blob: https:" : "media-src 'self' blob:",
+    `media-src 'self' blob: ${mediaOrigin()}`,
     "connect-src 'self' https: wss: https://crawlproof.com",
     // /embed/* is the public player — any site may frame it. That is the whole
     // point of the surface, and it is safe because the page is read-only: it