feeds-fun 1.25.2 → 1.26.0

package/src/logic/iframeSanitizer.ts

@@ -0,0 +1,267 @@
+type PathMatcher = (url: URL) => boolean;
+
+type ProviderRule = {
+  hostname: string;
+  matchesPath: PathMatcher;
+  rewriteUrl?: (url: URL) => URL;
+};
+
+export const DOM_PURIFY_IFRAME_OPTIONS = {
+  ADD_TAGS: ["iframe"],
+  ADD_ATTR: ["src", "title"]
+};
+
+const GENERATED_IFRAME_ATTRIBUTES = {
+  loading: "lazy",
+  referrerpolicy: "strict-origin-when-cross-origin",
+  sandbox: "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox",
+  allow: "fullscreen; picture-in-picture; encrypted-media"
+} as const;
+
+const IFRAME_TITLE_DEFAULT = "Embedded media";
+
+const oneSegmentAfter = (prefix: string): PathMatcher => {
+  const expression = new RegExp(`^${prefix}/[^/]+$`);
+
+  return (url: URL) => expression.test(url.pathname);
+};
+
+const startsWithPath = (prefix: string): PathMatcher => {
+  const expression = new RegExp(`^${prefix}/.+$`);
+
+  return (url: URL) => expression.test(url.pathname);
+};
+
+function rewriteYoutubeToPrivacyEnhanced(url: URL) {
+  const rewritten = new URL(url.toString());
+  rewritten.hostname = "www.youtube-nocookie.com";
+  return rewritten;
+}
+
+function addVimeoDnt(url: URL) {
+  const rewritten = new URL(url.toString());
+  rewritten.searchParams.set("dnt", "1");
+  return rewritten;
+}
+
+function hasQueryParameter(url: URL, name: string, value?: string) {
+  if (!url.searchParams.has(name)) {
+    return false;
+  }
+
+  return value === undefined || url.searchParams.get(name) === value;
+}
+
+function isAbsoluteHttpsUrl(rawUrl: string) {
+  if (rawUrl.trim() !== rawUrl) {
+    return false;
+  }
+
+  try {
+    const url = new URL(rawUrl);
+    return url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function sanitizedUrl(rawUrl: string) {
+  if (!isAbsoluteHttpsUrl(rawUrl)) {
+    return null;
+  }
+
+  const url = new URL(rawUrl);
+  const rule = PROVIDER_RULES.find((candidate) => candidate.hostname === url.hostname);
+
+  if (rule === undefined || !rule.matchesPath(url)) {
+    return null;
+  }
+
+  url.username = "";
+  url.password = "";
+  url.hash = "";
+
+  const rewritten = rule.rewriteUrl?.(url) ?? url;
+
+  return rewritten.toString();
+}
+
+const PROVIDER_RULES: ProviderRule[] = [
+  {
+    hostname: "www.youtube-nocookie.com",
+    matchesPath: (url) => /^\/embed(\/[^/]+)?$/.test(url.pathname)
+  },
+  {
+    hostname: "www.youtube.com",
+    matchesPath: (url) => /^\/embed(\/[^/]+)?$/.test(url.pathname),
+    rewriteUrl: rewriteYoutubeToPrivacyEnhanced
+  },
+  {
+    hostname: "player.vimeo.com",
+    matchesPath: (url) => /^\/video\/\d+$/.test(url.pathname),
+    rewriteUrl: addVimeoDnt
+  },
+  {
+    hostname: "geo.dailymotion.com",
+    matchesPath: (url) => /^\/player(\/[^/]+\.html|\.html)$/.test(url.pathname)
+  },
+  {
+    hostname: "www.dailymotion.com",
+    matchesPath: (url) => /^\/embed\/video\/[^/]+$/.test(url.pathname)
+  },
+  {
+    hostname: "embed.ted.com",
+    matchesPath: oneSegmentAfter("/talks")
+  },
+  {
+    hostname: "www.ted.com",
+    matchesPath: startsWithPath("/embed")
+  },
+  {
+    hostname: "w.soundcloud.com",
+    matchesPath: (url) => url.pathname === "/player/"
+  },
+  {
+    hostname: "open.spotify.com",
+    matchesPath: (url) => /^\/embed\/[^/]+\/[^/]+$/.test(url.pathname)
+  },
+  {
+    hostname: "bandcamp.com",
+    matchesPath: startsWithPath("/EmbeddedPlayer")
+  },
+  {
+    hostname: "www.mixcloud.com",
+    matchesPath: (url) => url.pathname === "/widget/iframe/"
+  },
+  {
+    hostname: "embed.music.apple.com",
+    matchesPath: (url) => /^\/[a-z]{2}\/[^/]+\/.+$/.test(url.pathname)
+  },
+  {
+    hostname: "player.twitch.tv",
+    matchesPath: (url) => url.pathname === "/"
+  },
+  {
+    hostname: "clips.twitch.tv",
+    matchesPath: (url) => url.pathname === "/embed"
+  },
+  {
+    hostname: "player.bilibili.com",
+    matchesPath: (url) => url.pathname === "/player.html"
+  },
+  {
+    hostname: "archive.org",
+    matchesPath: oneSegmentAfter("/embed")
+  },
+  {
+    hostname: "framatube.org",
+    matchesPath: oneSegmentAfter("/videos/embed")
+  },
+  {
+    hostname: "videopress.com",
+    matchesPath: oneSegmentAfter("/v")
+  },
+  {
+    hostname: "www.openstreetmap.org",
+    matchesPath: (url) => url.pathname === "/export/embed.html"
+  },
+  {
+    hostname: "www.google.com",
+    matchesPath: (url) =>
+      /^\/maps\/embed\/v1\/[^/]+$/.test(url.pathname) ||
+      url.pathname === "/maps/embed" ||
+      url.pathname === "/maps/d/embed"
+  },
+  {
+    hostname: "maps.google.com",
+    matchesPath: (url) => url.pathname === "/maps" && hasQueryParameter(url, "output", "embed")
+  },
+  {
+    hostname: "umap.openstreetmap.fr",
+    matchesPath: (url) => /^\/([a-z]{2}\/)?map\/[^/]+_\d+$/.test(url.pathname)
+  },
+  {
+    hostname: "docs.google.com",
+    matchesPath: (url) =>
+      /^\/presentation\/d\/e\/[^/]+\/embed$/.test(url.pathname) ||
+      (/^\/document\/d\/e\/[^/]+\/pub$/.test(url.pathname) && hasQueryParameter(url, "embedded", "true")) ||
+      /^\/spreadsheets\/d\/e\/[^/]+\/pubhtml$/.test(url.pathname)
+  },
+  {
+    hostname: "speakerdeck.com",
+    matchesPath: oneSegmentAfter("/player")
+  },
+  {
+    hostname: "www.scribd.com",
+    matchesPath: (url) => /^\/embeds\/[^/]+\/content$/.test(url.pathname)
+  },
+  {
+    hostname: "www.slideshare.net",
+    matchesPath: startsWithPath("/slideshow/embed_code")
+  },
+  {
+    hostname: "www.canva.com",
+    matchesPath: (url) => /^\/design\/[^/]+\/view$/.test(url.pathname) && hasQueryParameter(url, "embed")
+  },
+  {
+    hostname: "view.officeapps.live.com",
+    matchesPath: (url) => {
+      const source = url.searchParams.get("src");
+
+      return (
+        url.pathname === "/op/embed.aspx" &&
+        source !== null &&
+        isAbsoluteHttpsUrl(source) &&
+        Array.from(url.searchParams.keys()).every((key) => key === "src")
+      );
+    }
+  }
+];
+
+function setGeneratedAttributes(iframe: HTMLIFrameElement, src: string, title: string | null) {
+  iframe.setAttribute("src", src);
+  iframe.setAttribute("title", title || IFRAME_TITLE_DEFAULT);
+  iframe.setAttribute("loading", GENERATED_IFRAME_ATTRIBUTES.loading);
+  iframe.setAttribute("referrerpolicy", GENERATED_IFRAME_ATTRIBUTES.referrerpolicy);
+  iframe.setAttribute("sandbox", GENERATED_IFRAME_ATTRIBUTES.sandbox);
+  iframe.setAttribute("allow", GENERATED_IFRAME_ATTRIBUTES.allow);
+  iframe.setAttribute("allowfullscreen", "");
+}
+
+function replacementForIframe(source: HTMLIFrameElement) {
+  const src = source.getAttribute("src");
+
+  if (src === null) {
+    return null;
+  }
+
+  const sanitizedSrc = sanitizedUrl(src);
+
+  if (sanitizedSrc === null) {
+    return null;
+  }
+
+  const iframe = source.ownerDocument.createElement("iframe");
+
+  setGeneratedAttributes(iframe, sanitizedSrc, source.getAttribute("title"));
+
+  return iframe;
+}
+
+export function sanitizeIframes(html: string) {
+  const parsed = new DOMParser().parseFromString(html, "text/html");
+  const iframes = parsed.body.querySelectorAll("iframe");
+
+  for (const iframe of iframes) {
+    const replacement = replacementForIframe(iframe);
+
+    if (replacement === null) {
+      iframe.remove();
+      continue;
+    }
+
+    iframe.replaceWith(replacement);
+  }
+
+  return parsed.body.innerHTML;
+}

package/src/logic/settings.ts

@@ -23,6 +23,7 @@ export const crmPrivacy = import.meta.env.VITE_FFUN_CRM_PRIVACY || null;
 export const crmImpressum = import.meta.env.VITE_FFUN_CRM_IMPRESSUM || null;
 
 export const hasCollections = import.meta.env.VITE_FFUN_HAS_COLLECTIONS == "true" || false;
+export const hasIntegrations = import.meta.env.VITE_FFUN_HAS_INTEGRATIONS == "true" || false;
 
 function jsonOrDefault<T>(value: string | undefined, defaultValue: T): T {
   if (!value) return defaultValue;

package/src/logic/tests/iframeSanitizer.test.ts

@@ -0,0 +1,111 @@
+import {describe, expect, it} from "vitest";
+import {sanitizeIframes} from "@/logic/iframeSanitizer";
+
+function iframeFor(src: string) {
+  const sanitized = sanitizeIframes(`<iframe src="${src}"></iframe>`);
+  const parsed = new DOMParser().parseFromString(sanitized, "text/html");
+  return parsed.body.querySelector("iframe");
+}
+
+describe("sanitizeIframes", () => {
+  it.each([
+    "https://www.youtube-nocookie.com/embed/video-id",
+    "https://www.youtube-nocookie.com/embed/videoseries?list=playlist-id",
+    "https://www.youtube-nocookie.com/embed",
+    "https://player.vimeo.com/video/12345",
+    "https://geo.dailymotion.com/player/player-id.html?video=video-id",
+    "https://geo.dailymotion.com/player.html?video=video-id",
+    "https://www.dailymotion.com/embed/video/video-id",
+    "https://embed.ted.com/talks/talk-slug",
+    "https://www.ted.com/embed/talks/talk-slug",
+    "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1",
+    "https://open.spotify.com/embed/track/track-id",
+    "https://bandcamp.com/EmbeddedPlayer/album=1/size=large",
+    "https://www.mixcloud.com/widget/iframe/?feed=%2Fshow%2F",
+    "https://embed.music.apple.com/us/album/album-name/12345",
+    "https://player.twitch.tv/?channel=channel&parent=feeds.fun",
+    "https://clips.twitch.tv/embed?clip=clip-id&parent=feeds.fun",
+    "https://player.bilibili.com/player.html?bvid=video-id",
+    "https://archive.org/embed/archive-id",
+    "https://framatube.org/videos/embed/video-id",
+    "https://videopress.com/v/video-id",
+    "https://www.openstreetmap.org/export/embed.html?bbox=1%2C2%2C3%2C4",
+    "https://www.google.com/maps/embed/v1/place?key=key&q=place",
+    "https://www.google.com/maps/embed?pb=map-data",
+    "https://www.google.com/maps/d/embed?mid=map-id",
+    "https://maps.google.com/maps?q=place&output=embed",
+    "https://umap.openstreetmap.fr/en/map/map-name_123",
+    "https://docs.google.com/presentation/d/e/presentation-id/embed",
+    "https://docs.google.com/document/d/e/document-id/pub?embedded=true",
+    "https://docs.google.com/spreadsheets/d/e/sheet-id/pubhtml",
+    "https://speakerdeck.com/player/deck-id",
+    "https://www.scribd.com/embeds/document-id/content",
+    "https://www.slideshare.net/slideshow/embed_code/key",
+    "https://www.canva.com/design/design-id/view?embed",
+    "https://view.officeapps.live.com/op/embed.aspx?src=https%3A%2F%2Fexample.com%2Fdocument.docx"
+  ])("allows provider embed URL %s", (src) => {
+    expect(iframeFor(src)).not.toBeNull();
+  });
+
+  it("rewrites YouTube embeds to the privacy-enhanced host", () => {
+    const iframe = iframeFor("https://www.youtube.com/embed/video-id?start=10#fragment");
+
+    expect(iframe?.getAttribute("src")).toBe("https://www.youtube-nocookie.com/embed/video-id?start=10");
+  });
+
+  it("adds Vimeo DNT parameter", () => {
+    const iframe = iframeFor("https://player.vimeo.com/video/12345?h=hash");
+
+    expect(iframe?.getAttribute("src")).toBe("https://player.vimeo.com/video/12345?h=hash&dnt=1");
+  });
+
+  it("removes iframes that do not satisfy source requirements", () => {
+    const sanitized = sanitizeIframes(`
+      <iframe></iframe>
+      <iframe src="http://www.youtube-nocookie.com/embed/video-id"></iframe>
+      <iframe src="https://www.youtube-nocookie.com.evil.example/embed/video-id"></iframe>
+      <iframe src="https://www.youtube-nocookie.com/watch?v=video-id"></iframe>
+      <iframe src="/embed/video-id"></iframe>
+    `);
+
+    expect(sanitized).not.toContain("<iframe");
+  });
+
+  it("rebuilds allowed iframes with only generated attributes and title", () => {
+    const sanitized = sanitizeIframes(`
+      <iframe
+        src="https://www.youtube-nocookie.com/embed/video-id"
+        width="560"
+        height="315"
+        title="Video title"
+        srcdoc="<p>HTML</p>"
+        loading="eager"
+        referrerpolicy="no-referrer"
+        sandbox="allow-top-navigation"
+        allow="camera"
+        allowfullscreen="false"
+        name="source-frame">
+      </iframe>
+    `);
+    const parsed = new DOMParser().parseFromString(sanitized, "text/html");
+    const iframe = parsed.body.querySelector("iframe");
+
+    expect(iframe?.getAttribute("src")).toBe("https://www.youtube-nocookie.com/embed/video-id");
+    expect(iframe?.getAttribute("title")).toBe("Video title");
+    expect(iframe?.getAttribute("loading")).toBe("lazy");
+    expect(iframe?.getAttribute("referrerpolicy")).toBe("strict-origin-when-cross-origin");
+    expect(iframe?.getAttribute("sandbox")).toBe(
+      "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+    );
+    expect(iframe?.getAttribute("allow")).toBe("fullscreen; picture-in-picture; encrypted-media");
+    expect(iframe?.hasAttribute("allowfullscreen")).toBe(true);
+    expect(iframe?.hasAttribute("width")).toBe(false);
+    expect(iframe?.hasAttribute("height")).toBe(false);
+    expect(iframe?.hasAttribute("srcdoc")).toBe(false);
+    expect(iframe?.hasAttribute("name")).toBe(false);
+  });
+
+  it("uses a fallback iframe title when source title is missing", () => {
+    expect(iframeFor("https://archive.org/embed/archive-id")?.getAttribute("title")).toBe("Embedded media");
+  });
+});

package/src/logic/tests/utils.test.ts

@@ -7,6 +7,73 @@ afterEach(() => {
 });
 
 describe("purifyBody", () => {
+  it("removes styling and page behavior attributes", () => {
+    const raw = `
+      <p aria-label="Summary" class="lead" data-id="42" dir="rtl" id="entry"
+         lang="en" onclick="alert()" slot="main" style="color: red" title="Title">Body</p>
+      <a href="https://example.com" class="link" download ping="https://tracker.example"
+         rel="nofollow" target="_self" type="text/html">Link</a>
+      <img alt="Chart" height="100" src="https://example.com/chart.png"
+           sizes="(max-width: 600px) 100vw, 600px"
+           srcset="https://example.com/chart-2x.png 2x" style="width: 100px"
+           width="100" />
+      <video controls poster="https://example.com/poster.png" style="width: 100%">
+        <source media="(min-width: 800px)" src="https://example.com/video.mp4"
+                type="video/mp4" />
+        <track default kind="captions" label="English"
+               src="https://example.com/captions.vtt" srclang="en" />
+      </video>
+      <table><tr><th colspan="2" scope="col" style="color:red">Head</th></tr></table>
+      <ol reversed start="5" type="A"><li value="7">Item</li></ol>
+      <time datetime="2026-04-27">Today</time>
+      <svg viewBox="0 0 10 10">
+        <path d="M0 0h10v10H0z" fill="red" stroke="blue"></path>
+      </svg>
+    `;
+
+    const purified = purifyBody({raw, default_: "No description"});
+
+    expect(purified).toContain('aria-label="Summary"');
+    expect(purified).toContain('dir="rtl"');
+    expect(purified).toContain('href="https://example.com"');
+    expect(purified).toContain('lang="en"');
+    expect(purified).toContain('src="https://example.com/chart.png"');
+    expect(purified).toContain('sizes="(max-width: 600px) 100vw, 600px"');
+    expect(purified).toContain('srcset="https://example.com/chart-2x.png 2x"');
+    expect(purified).toContain('alt="Chart"');
+    expect(purified).toContain('title="Title"');
+    expect(purified).toContain("controls");
+    expect(purified).toContain('poster="https://example.com/poster.png"');
+    expect(purified).toContain('media="(min-width: 800px)"');
+    expect(purified).toContain('src="https://example.com/video.mp4"');
+    expect(purified).toContain('type="video/mp4"');
+    expect(purified).toContain('slot="main"');
+    expect(purified).toContain("default");
+    expect(purified).toContain('kind="captions"');
+    expect(purified).toContain('label="English"');
+    expect(purified).toContain('src="https://example.com/captions.vtt"');
+    expect(purified).toContain('srclang="en"');
+    expect(purified).toContain('colspan="2"');
+    expect(purified).toContain('datetime="2026-04-27"');
+    expect(purified).toContain("download");
+    expect(purified).toContain('scope="col"');
+    expect(purified).toContain("reversed");
+    expect(purified).toContain('start="5"');
+    expect(purified).toContain('type="A"');
+    expect(purified).toContain('viewBox="0 0 10 10"');
+    expect(purified).toContain('d="M0 0h10v10H0z"');
+    expect(purified).toContain('fill="red"');
+    expect(purified).toContain('stroke="blue"');
+    expect(purified).toContain('value="7"');
+
+    expect(purified).not.toContain('class="');
+    expect(purified).not.toContain('data-id="');
+    expect(purified).not.toContain('id="');
+    expect(purified).not.toContain('onclick="');
+    expect(purified).not.toContain('ping="');
+    expect(purified).not.toContain('style="');
+  });
+
   it("sets required security attributes for links", () => {
     const raw = '<a href="https://example.com" target="_self" rel="noopener" referrerpolicy="unsafe-url">Example</a>';
 
@@ -17,6 +84,48 @@ describe("purifyBody", () => {
     expect(purified).toContain('rel="noopener noreferrer nofollow"');
     expect(purified).toContain('referrerpolicy="strict-origin-when-cross-origin"');
   });
+
+  it("keeps sanitized allowlisted iframes", () => {
+    const raw = `
+      <iframe
+        src="https://www.youtube.com/embed/video-id"
+        width="560"
+        height="315"
+        title="Video title"
+        class="video"
+        allow="camera"
+        sandbox="allow-top-navigation">
+      </iframe>
+    `;
+
+    const purified = purifyBody({raw, default_: "No description"});
+    const parsed = new DOMParser().parseFromString(purified, "text/html");
+    const iframe = parsed.body.querySelector("iframe");
+
+    expect(iframe?.getAttribute("src")).toBe("https://www.youtube-nocookie.com/embed/video-id");
+    expect(iframe?.getAttribute("title")).toBe("Video title");
+    expect(iframe?.getAttribute("loading")).toBe("lazy");
+    expect(iframe?.getAttribute("referrerpolicy")).toBe("strict-origin-when-cross-origin");
+    expect(iframe?.getAttribute("sandbox")).toBe(
+      "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+    );
+    expect(iframe?.getAttribute("allow")).toBe("fullscreen; picture-in-picture; encrypted-media");
+    expect(iframe?.hasAttribute("allowfullscreen")).toBe(true);
+    expect(iframe?.hasAttribute("width")).toBe(false);
+    expect(iframe?.hasAttribute("height")).toBe(false);
+    expect(iframe?.hasAttribute("class")).toBe(false);
+  });
+
+  it("strips srcdoc from sanitized iframes", () => {
+    const raw = '<iframe src="https://www.youtube-nocookie.com/embed/video-id" srcdoc="<p>HTML</p>"></iframe>';
+
+    const purified = purifyBody({raw, default_: "No description"});
+    const parsed = new DOMParser().parseFromString(purified, "text/html");
+    const iframe = parsed.body.querySelector("iframe");
+
+    expect(iframe?.getAttribute("src")).toBe("https://www.youtube-nocookie.com/embed/video-id");
+    expect(iframe?.hasAttribute("srcdoc")).toBe(false);
+  });
 });
 
 describe("purifyTitle", () => {