Changeset 21522ae in Klonkt for src/routes

Timestamp:

05/20/2026 10:14:01 PM (4 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

353c39c

Parents:

46f23fd

git-author:

Robin Genis <roboburr@…> (05/20/2026 10:13:26 PM)

git-committer:

Robin Genis <roboburr@…> (05/20/2026 10:14:01 PM)

Message:

audio: Spotify-style blob playback + same-origin gate (fix playback loop)

Root cause of the "next-loops-but-never-plays after 4-5 songs" bug: every
track URL was HMAC-signed once at page-render time with a 10-min TTL. A whole
queue shared that single deadline, so tracks further down expired mid-session
-> /audio/stream returned 403 -> audio 'error' -> auto-skip -> next track also
expired -> infinite loop. The 3-strike guard never fired because the eager
'play' event reset the counter before each 403 landed.

Removed the expiring-token system entirely and replaced it with two
non-expiring layers:

• Client fetch()es track bytes and plays from a blob: object URL (no shareable URL, no "save audio as"); blobs revoked to avoid leaks; loadSeq guards fast prev/next; pre-seed is metadata-only (no auto-download).
• Server gates /audio/stream to same-origin browser fetches (X-Audio-Player header or Sec-Fetch-Site): blocks address-bar paste, hotlinks, curl.

Also: reset error counter on real 'playing' event (not eager 'play') so the
3-strike auto-skip-stop actually works; fix admin play-state detection to
compare logical currentTrack().url instead of the now-blob: audio.src; bump
audio-player.js cache-buster v5.

Co-Authored-By: Claude Opus 4.7 <noreply@…>

Location:

src/routes

Files:

• admin-audio.js (modified) (3 diffs)
• admin-playlists.js (modified) (1 diff)
• audio.js (modified) (3 diffs)
• posts.js (modified) (4 diffs)

src/routes/admin-audio.js

@@ -20 +20 @@
 import { requireGod } from '../middleware/auth.js';
 import { transcodeToMp3 } from '../services/AudioTranscoder.js';
-import { signUrl } from '../services/AudioStreamService.js';
+import { audioUrl } from '../services/AudioStreamService.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -80 +80 @@
   `).all(site.id);
 
-  // Sign each track's stream URL so admins can preview audio inline.
-  // Short TTL (default 10 min from AudioStreamService) means the URL on
-  // the page expires if it sits open too long; a refresh re-signs.
+  // Build each track's stream URL so admins can preview audio inline.
   const tracks = rows.map(t => ({
     ...t,
-    stream_url: t.filename ? signUrl(t.filename).url : null,
+    stream_url: t.filename ? audioUrl(t.filename) : null,
   }));
 
@@ -335 +333 @@
   `).get(req.params.id, site.id);
   if (!t) return res.status(404).json({ error: 'Track niet gevonden' });
-  // Sign the stream URL so the modal can render an inline preview player.
-  const stream_url = t.filename ? signUrl(t.filename).url : null;
+  // Stream URL so the modal can render an inline preview player.
+  const stream_url = t.filename ? audioUrl(t.filename) : null;
   res.json({ ok: true, track: { ...t, stream_url } });
 });

src/routes/admin-playlists.js

@@ -112 +112 @@
   if (!site) return res.status(404).json({ error: 'Site required' });
 
-  // Editor needs the raw track-id list (not signed URLs) — pass no signUrl.
+  // Editor needs the raw track-id list (not stream URLs) — pass no urlFor.
   const playlist = PlaylistService.get(site.id, req.params.id, null);
   if (!playlist) return res.status(404).json({ error: 'Playlist niet gevonden' });

src/routes/audio.js

@@ -1 +1 @@
 /**
- * Audio streaming routes — v9-style signed URL + byte-range support.
+ * Audio streaming routes — byte-range streaming.
  *
- * Files live in storage/media/audio/ and are NOT served by the static
- * /media handler — every fetch must go through this verified route.
+ * Files live in storage/audio/ and are NOT served by the static /media
+ * handler — every fetch goes through this route, which adds byte-range
+ * support so HTML5 <audio> can seek.
  *
- * GET /audio/stream/:filename?t=<hmac>&exp=<unix>
- *   Verifies the token. If valid, streams the file with byte-range support
- *   so HTML5 <audio> can seek. Anything invalid returns 403.
+ * GET /audio/stream/:filename
+ *   Streams the file with byte-range support.
+ *
+ * ANTI-THEFT (Spotify-flavoured, step 1 — 2026-05-20):
+ *   The player never exposes this URL to the user — it fetch()es the bytes
+ *   and plays from a blob: object URL (no shareable link, no "save audio as").
+ *   This route additionally refuses anything that isn't a same-origin browser
+ *   fetch, so the raw URL can't be pasted into the address bar, hotlinked from
+ *   another site, or pulled with curl/yt-dlp.
+ *
+ *   A request is allowed when EITHER:
+ *     - it carries the X-Audio-Player header (our fetch sets it), OR
+ *     - Sec-Fetch-Site is same-origin/same-site (covers the admin <audio>
+ *       preview, which can't set custom headers).
+ *   Address-bar paste sends Sec-Fetch-Site: none; hotlinks send cross-site;
+ *   curl/yt-dlp send neither signal → all rejected.
  */
 
@@ -14 +28 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { verifyToken } from '../services/AudioStreamService.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 // Audio files live OUTSIDE storage/media — the public /media static handler
-// cannot reach them. Every fetch must go through this signed route.
+// cannot reach them. Every fetch must go through this gated route.
 const AUDIO_DIR = path.resolve(
   process.env.AUDIO_PATH || path.join(__dirname, '..', '..', 'storage', 'audio')
@@ -39 +52 @@
 };
 
+// Access gate: allow only same-origin browser fetches / media loads.
+function isAllowedAudioRequest(req) {
+  if (req.get('X-Audio-Player') === '1') return true;  // our blob fetch
+  const site = req.get('Sec-Fetch-Site');              // set by modern browsers
+  return site === 'same-origin' || site === 'same-site';
+}
+
 router.get('/stream/:filename', (req, res) => {
   const { filename } = req.params;
-  const { t, exp } = req.query;
+
+  if (!isAllowedAudioRequest(req)) {
+    return res.status(403).send('Direct access not allowed');
+  }
 
   // Sanity: no path traversal, no slashes
   if (!filename || filename.includes('/') || filename.includes('\\') || filename.includes('..')) {
     return res.status(400).send('Bad filename');
-  }
-
-  if (!verifyToken(filename, t, exp)) {
-    return res.status(403).send('Invalid or expired token');
   }
 

src/routes/posts.js

@@ -13 +13 @@
 import AudioEmbedService from '../services/AudioEmbedService.js';
 import PlaylistService from '../services/PlaylistService.js';
-import { signUrl } from '../services/AudioStreamService.js';
+import { audioUrl } from '../services/AudioStreamService.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -419 +419 @@
           artist: r.artist,
           cover: r.cover_url,
-          url: signUrl(r.filename).url,
+          url: audioUrl(r.filename),
         };
       });
@@ -439 +439 @@
         if (!byAlbum.has(r.album)) byAlbum.set(r.album, []);
         byAlbum.get(r.album).push({
-          url: signUrl(r.filename).url,
+          url: audioUrl(r.filename),
           title: r.title || 'Untitled',
           artist: r.artist || '',
@@ -464 +464 @@
       const isAdmin = req.session?.user?.role === 'god';
       html = AudioEmbedService.embedPlaylistShortcodes(html, (id) => {
-        return PlaylistService.get(site.id, id, signUrl);
+        return PlaylistService.get(site.id, id, audioUrl);
       }, { isAdmin });
     }