Changeset 16b0c00 in Klonkt

Timestamp:

06/20/2026 02:52:15 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

2873b30

Parents:

5f47671

Message:

fix(embed): Spotify API via CSP whitelist + faster fallback

Diagnosis (measured live): the loader open.spotify.com (200) loads the real
API bundle from embed-cdn.spotifycdn.com, which was NOT in our CSP scriptSrc
→ API never init → 8s wait before the bare iframe = "sluggish". Not an
ad-blocker issue.

• CSP: *.spotifycdn.com added to scriptSrc + connectSrc (+ *.scdn.co).
• Spotify API timeout 8s → 4s so the iframe fallback appears quickly if the API still doesn't initialise (CDN 503 / origin gating).

buster embed-player.js?v=5.

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

Location:

src

Files:

• assets/js/embed-player.js (modified) (1 diff)
• server.js (modified) (2 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/js/embed-player.js

@@ -101 +101 @@
       };
       loadScript('https://open.spotify.com/embed/iframe-api/v1').catch(reject);
-      setTimeout(() => reject(new Error('Spotify API timeout')), API_TIMEOUT);
+      // Korter dan API_TIMEOUT: Spotify's bundle initialiseert snel óf helemaal
+      // niet (CDN 503 / origin-gating). Niet 8s wachten vóór de iframe-fallback.
+      setTimeout(() => reject(new Error('Spotify API timeout')), 4000);
     });
     return scripts.sp;

src/server.js

@@ -93 +93 @@
         "https://s.ytimg.com",       // YouTube player-assets
         "https://w.soundcloud.com",  // SoundCloud Widget API (api.js)
-        "https://open.spotify.com",  // Spotify iFrame API
+        "https://open.spotify.com",  // Spotify iFrame API (loader)
+        "https://*.spotifycdn.com",  // Spotify iFrame API (echte bundle: embed-cdn.spotifycdn.com)
       ],
       // Helmet's default zet script-src-attr op 'none', wat ALLE inline event-
@@ -103 +104 @@
       styleSrc: ["'self'", "'unsafe-inline'"],
       imgSrc: ["'self'", "data:", "https:"],
-      connectSrc: ["'self'", "wss:", "ws:"],
+      connectSrc: ["'self'", "wss:", "ws:", "https://*.spotifycdn.com", "https://*.scdn.co"],
       // blob: is required for the audio player — it fetch()es track bytes and
       // plays from a blob: object URL (Spotify-style). Without blob: here the

src/views/shell.ejs

@@ -303 +303 @@
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) via de echte
      player-API's + gedeelde mutual-exclusion registry met de site-speler. -->
-<script src="/assets/js/embed-player.js?v=4" defer></script>
+<script src="/assets/js/embed-player.js?v=5" defer></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>