Changeset 4c9f29a in Klonkt for src/services/AudioEmbedService.js

Timestamp:

06/15/2026 03:23:14 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

3e86f1c

Parents:

650b601

git-author:

roboburr <roboburr@…> (06/15/2026 03:22:47 AM)

git-committer:

roboburr <roboburr@…> (06/15/2026 03:23:14 AM)

Message:

feat: on-brand media embeds via the real player APIs

Replaces bare platform iframes with on-brand cards, powered by the
official JS APIs so play/pause/progress are in our own hands:

• YouTube (IFrame Player API) + SoundCloud (Widget API): fully custom controls, native chrome hidden.
• Spotify (iFrame API): our frame around it + controls (their player UI remains; restyling not possible without Premium+OAuth).
• Shared PlaybackRegistry: mutual exclusion -- only 1 thing plays at a time (incl. the site audio player). Replaces the focus/blur heuristic with real play events (blur stays as fallback for iframe-only embeds).
• Progressive enhancement: if an ad-blocker blocks the platform API, falls back seamlessly to the bare platform iframe (autoplay). The resting-state card is our brand for everyone.

AudioEmbedService now renders a placeholder div (data-embed-*) for YT/SC/
Spotify instead of an iframe; embed-player.js builds the card client-side.
CSP scriptSrc extended with the player API hosts.

Adversarial review (workflow) -> 6 bugs fixed: HTMX swap leak (poll timers/
adapters -> MutationObserver teardown + adapter.destroy()), javascript: URL XSS
(scheme guard in detectProvider + safeHref client-side), Spotify ended
misdetection (no more reset-to-0), ytId/server regex on exact 11, blur scope
limited to .folio-embed.

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

File:

• src/services/AudioEmbedService.js (modified) (5 diffs)

src/services/AudioEmbedService.js

@@ -16 +16 @@
     url = url.trim();
 
+    // Alleen http(s)-URL's embedden. De provider-regexes hieronder zijn NIET
+    // verankerd, dus zonder deze check zou bv. `javascript:alert(1)//youtu.be/x`
+    // matchen en als embed-URL belanden (stored XSS via een [[embed:...]]-
+    // shortcode — die tekst gaat niet langs de HTML-sanitizer omdat 'ie in een
+    // text-node zit). De scheme-guard sluit javascript:/data:/vbscript: enz. uit.
+    if (!/^https?:\/\//i.test(url)) return null;
+
     // Spotify
     if (/open\.spotify\.com\/(track|album|playlist|episode|show)\/([A-Za-z0-9]+)/i.test(url)) {
       const match = url.match(/\/(track|album|playlist|episode|show)\/([A-Za-z0-9]+)/i);
-      return { provider: 'spotify', type: match[1], id: match[2] };
+      return { provider: 'spotify', type: match[1], id: match[2], url };
     }
 
@@ -37 +44 @@
     }
 
-    // YouTube
-    if (/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([A-Za-z0-9_-]{6,20})/i.test(url)) {
-      const match = url.match(/(?:v=|youtu\.be\/|embed\/)([A-Za-z0-9_-]{6,20})/i);
-      return { provider: 'youtube', id: match[1] };
+    // YouTube — video-id is altijd exact 11 tekens (lijnt uit met de client-side
+    // ytId() in embed-player.js, die ook {11} verwacht).
+    if (/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/|youtube\.com\/live\/)([A-Za-z0-9_-]{11})/i.test(url)) {
+      const match = url.match(/(?:v=|youtu\.be\/|embed\/|shorts\/|live\/)([A-Za-z0-9_-]{11})/i);
+      return { provider: 'youtube', id: match[1], url };
     }
 
@@ -46 +54 @@
     if (/vimeo\.com\/(?:video\/)?(\d+)/i.test(url)) {
       const match = url.match(/\d+/);
-      return { provider: 'vimeo', id: match[0] };
+      return { provider: 'vimeo', id: match[0], url };
     }
 
@@ -54 +62 @@
   static generateIframe(provider, config) {
     switch (provider) {
+      // Eigen custom-spelers (client-side via embed-player.js + de echte
+      // platform-API's). We renderen een placeholder met data-attributen i.p.v.
+      // het kale platform-iframe, zodat de embed in ÓNZE huisstijl verschijnt.
+      case 'youtube':
+        return this.embedPlaceholder('youtube', config.id, 'video',
+          config.url || `https://youtu.be/${config.id}`);
+      case 'soundcloud':
+        return this.embedPlaceholder('soundcloud', config.url, 'track', config.url);
       case 'spotify':
-        return this.spotifyIframe(config);
+        return this.embedPlaceholder('spotify', `spotify:${config.type}:${config.id}`,
+          config.type, config.url || `https://open.spotify.com/${config.type}/${config.id}`);
+      // Geen JS-API (Bandcamp/Apple) of niet-prioritair (Vimeo): blijven een
+      // iframe; mutual-exclusion loopt voor deze via de blur-fallback.
       case 'bandcamp':
         return this.bandcampIframe(config);
-      case 'soundcloud':
-        return this.soundcloudIframe(config);
       case 'applemusic':
         return this.applemusicIframe(config);
-      case 'youtube':
-        return this.youtubeIframe(config);
       case 'vimeo':
         return this.vimeoIframe(config);
@@ -69 +84 @@
         return null;
     }
+  }
+
+  /**
+   * Placeholder voor een eigen custom-speler. embed-player.js pikt
+   * .folio-embed[data-embed-provider] op en bouwt de kaart + speler client-side.
+   * ALLE waarden via escape() — post.content_html wordt ongeescaped uitgevoerd.
+   */
+  static embedPlaceholder(provider, ref, type, url) {
+    const attrs = [
+      `data-embed-provider="${this.escape(provider)}"`,
+      `data-embed-ref="${this.escape(ref)}"`,
+      type ? `data-embed-type="${this.escape(type)}"` : '',
+      `data-embed-url="${this.escape(url)}"`,
+    ].filter(Boolean).join(' ');
+    return `<div class="folio-embed folio-embed--${this.escape(provider)} pcms-embed pcms-embed-card pcms-embed-loading" ${attrs}></div>`;
   }