Fix YouTube embeds in migrated blog markdown

Author: gbtami

client/ublogMarkdown.ts

@@ -74,7 +74,12 @@ function toProxiedImageUrl(url: string): string {
     }
 }
 
-function safeIframeUrl(url: string): string | null {
+type SafeIframe = {
+    href: string;
+    isYouTubeEmbed: boolean;
+};
+
+function safeIframe(url: string): SafeIframe | null {
     const value = (url || '').trim();
     if (!value) return null;
     try {
@@ -92,7 +97,7 @@ function safeIframeUrl(url: string): string | null {
         ) && path.startsWith('/embed/');
 
         if (isLocal || isLichessStudyEmbed || isYouTubeEmbed) {
-            return parsed.href;
+            return { href: parsed.href, isYouTubeEmbed };
         }
         return null;
     } catch {
@@ -178,17 +183,20 @@ function sanitizeRenderedFragment(html: string): DocumentFragment {
         el.setAttribute('loading', 'lazy');
     });
 
-    fragment.querySelectorAll<HTMLIFrameElement>('iframe[src]').forEach((el) => {
-        const safe = safeIframeUrl(el.getAttribute('src') || '');
+    fragment.querySelectorAll<HTMLIFrameElement>('iframe').forEach((el) => {
+        const safe = safeIframe(el.getAttribute('src') || '');
         if (!safe) {
             el.remove();
             return;
         }
-        el.setAttribute('src', safe);
+        el.setAttribute('src', safe.href);
         sanitizePositiveIntAttr(el, 'width');
         sanitizePositiveIntAttr(el, 'height');
         el.setAttribute('loading', 'lazy');
-        el.setAttribute('referrerpolicy', 'no-referrer');
+        el.setAttribute(
+            'referrerpolicy',
+            safe.isYouTubeEmbed ? 'strict-origin-when-cross-origin' : 'no-referrer',
+        );
         if (!el.hasAttribute('allowfullscreen')) {
             el.setAttribute('allowfullscreen', '');
         }

tests/ublogMarkdown.test.ts

@@ -0,0 +1,27 @@
+import { initUblogMarkdown } from "../client/ublogMarkdown";
+
+function renderBlogMarkdown(markdown: string): HTMLElement {
+    document.body.innerHTML = `
+        <textarea id="ublog-markdown-source"></textarea>
+        <div id="ublog-markdown-render"></div>
+    `;
+    const source = document.getElementById("ublog-markdown-source") as HTMLTextAreaElement;
+    source.value = markdown;
+    initUblogMarkdown();
+    return document.getElementById("ublog-markdown-render") as HTMLElement;
+}
+
+test("keeps youtube iframe embeds playable", () => {
+    const root = renderBlogMarkdown(
+        '<iframe width="560" height="315" src="https://www.youtube.com/embed/rz3f5febUAU" frameborder="0" allowfullscreen></iframe>'
+    );
+    const iframe = root.querySelector("iframe");
+    expect(iframe).not.toBeNull();
+    expect(iframe?.getAttribute("src")).toBe("https://www.youtube.com/embed/rz3f5febUAU");
+    expect(iframe?.getAttribute("referrerpolicy")).toBe("strict-origin-when-cross-origin");
+});
+
+test("drops iframe embeds with unsafe src", () => {
+    const root = renderBlogMarkdown('<iframe src="javascript:alert(1)"></iframe>');
+    expect(root.querySelector("iframe")).toBeNull();
+});