From d034579f60cca30d267c538975c200f549650d02 Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Sun, 5 Jul 2026 18:27:27 +0200
Subject: [PATCH] some hardening against unexpected URLs in embeds

---
 src/components/embeds/ImagesComponent.svelte | 23 +++++++----
 src/components/embeds/LinkComponent.svelte   | 41 +++++++++++---------
 src/components/embeds/VideoComponent.svelte  | 23 +++++++----
 src/components/posts/FediSourceLink.svelte   | 16 +++++---
 src/models/embeds.js                         | 10 ++++-
 src/utils.ts                                 | 13 ++++---
 6 files changed, 79 insertions(+), 47 deletions(-)

diff --git a/src/components/embeds/ImagesComponent.svelte b/src/components/embeds/ImagesComponent.svelte
index 71d662f..643b8bb 100644
--- a/src/components/embeds/ImagesComponent.svelte
+++ b/src/components/embeds/ImagesComponent.svelte
@@ -1,23 +1,30 @@
 <script lang="ts">
   import { getPostContext } from '../posts/PostComponent.svelte';
   import { InlineGalleryEmbed, InlineImageEmbed, RawGalleryEmbed, RawImageEmbed } from '../../models/embeds';
+  import { isValidURL } from '../../utils.js';
 
   let { embed }: { embed: InlineImageEmbed | RawImageEmbed | InlineGalleryEmbed | RawGalleryEmbed } = $props();
   let { post } = getPostContext();
 
-  function imageURL(img: json): string {
-    if (img.fullsize) {
-      return img.fullsize;
-    } else {
-      let cid = img.image.ref['$link'];
-      return `https://cdn.bsky.app/img/feed_fullsize/plain/${post.author.did}/${cid}@jpeg`;
-    }
+  let rawMode = $derived(embed instanceof RawImageEmbed || embed instanceof RawGalleryEmbed);
+
+  function buildRawImageURL(img: json): string {
+    let cid = img.image.ref['$link'];
+    return `https://cdn.bsky.app/img/feed_fullsize/plain/${post.author.did}/${cid}@jpeg`;
   }
 </script>
 
 <div>
   {#each embed.images as image}
-    <p>[<a href={imageURL(image)}>Image</a>]</p>
+    {#if rawMode}
+      <p>[<a href={buildRawImageURL(image)}>Image</a>]</p>
+    {:else}
+      {#if isValidURL(image.fullsize)}
+        <p>[<a href={image.fullsize}>Image</a>]</p>
+      {:else}
+        <p>[{image.fullsize}]</p>
+      {/if}
+    {/if}
 
     {#if image.alt}
       <details class="image-alt">
diff --git a/src/components/embeds/LinkComponent.svelte b/src/components/embeds/LinkComponent.svelte
index d44496c..18cedbc 100644
--- a/src/components/embeds/LinkComponent.svelte
+++ b/src/components/embeds/LinkComponent.svelte
@@ -1,39 +1,42 @@
 <script lang="ts">
   import { getPostContext } from '../posts/PostComponent.svelte';
-  import { isValidURL, truncateText } from '../../utils.js';
+  import { parseHTTPURL, truncateText } from '../../utils.js';
   import GIFPlayer from './GIFPlayer.svelte';
   import { InlineLinkEmbed, RawLinkEmbed } from '../../models/embeds.js';
 
   let { embed }: { embed: InlineLinkEmbed | RawLinkEmbed } = $props();
   let { post } = getPostContext();
 
-  let showingGIF = $state(false);
+  let displayedGIF: { gif: string, thumb: string} | undefined = $state();
 
-  let hostname = $derived(new URL(embed.url).hostname);
-  let isTenorGIF = $derived(hostname == 'media.tenor.com');
-  let onclick = $derived(isTenorGIF ? playGIF : undefined);
+  let parsedURL = $derived(embed.url ? parseHTTPURL(embed.url) : undefined);
 
-  function playGIF(e: Event) {
-    e.preventDefault();
-    showingGIF = true;
-  }
-
-  function thumbnailURL() {
-    if (typeof embed.thumb == 'string') {
-      return embed.thumb;
-    } else {
+  let thumbnailURL = $derived.by(() => {
+    if (embed instanceof RawLinkEmbed && embed.thumb) {
       return `https://cdn.bsky.app/img/avatar/feed_thumbnail/${post.author.did}/${embed.thumb.ref.$link}@jpeg`;
+    } else if (embed instanceof InlineLinkEmbed) {
+      let parsedURL = embed.thumb ? parseHTTPURL(embed.thumb) : undefined;
+      return parsedURL?.href;
+    }
+
+    return undefined;
+  });
+
+  function onClick(e: Event, url: URL) {
+    if (url.hostname == 'media.tenor.com' && thumbnailURL) {
+      e.preventDefault();
+      displayedGIF = { gif: url.href, thumb: thumbnailURL };
     }
   }
 </script>
 
-{#if showingGIF}
-  <GIFPlayer gifURL={embed.url} staticURL={thumbnailURL()} alt={embed.title} />
+{#if displayedGIF}
+  <GIFPlayer gifURL={displayedGIF.gif} staticURL={displayedGIF.thumb} alt={embed.title} />
 {:else}
-  {#if isValidURL(embed.url)}
-    <a class="link-card" href={embed.url} target="_blank" {onclick}>
+  {#if parsedURL}
+    <a class="link-card" href={parsedURL.href} target="_blank" rel="noopener" onclick={(e) => onClick(e, parsedURL)}>
       <div>
-        <p class="domain">{hostname}</p>
+        <p class="domain">{parsedURL.hostname}</p>
         <h2>{embed.title || embed.url}</h2>
 
         {#if embed.description}
diff --git a/src/components/embeds/VideoComponent.svelte b/src/components/embeds/VideoComponent.svelte
index 4fa00b3..66cbef1 100644
--- a/src/components/embeds/VideoComponent.svelte
+++ b/src/components/embeds/VideoComponent.svelte
@@ -1,22 +1,29 @@
 <script lang="ts">
   import { getPostContext } from '../posts/PostComponent.svelte';
   import { InlineVideoEmbed, RawVideoEmbed } from '../../models/embeds';
+  import { isValidURL } from '../../utils.js';
 
   let { embed }: { embed: InlineVideoEmbed | RawVideoEmbed } = $props();
   let { post } = getPostContext();
 
-  function videoURL(embed: InlineVideoEmbed | RawVideoEmbed) {
-    if (embed instanceof InlineVideoEmbed) {
-      return embed.playlistURL;
-    } else {
-      let cid = embed.video.ref['$link'];
-      return `https://video.bsky.app/watch/${post.author.did}/${cid}/playlist.m3u8`;
-    }
+  function buildRawVideoURL(video: json): string {
+    let cid = video.ref['$link'];
+    return `https://video.bsky.app/watch/${post.author.did}/${cid}/playlist.m3u8`;
   }
 </script>
 
 <div>
-  <p>[<a href={videoURL(embed)}>Video</a>]</p>
+  {#if embed instanceof RawVideoEmbed}
+    {#if embed.video}
+      <p>[<a href={buildRawVideoURL(embed.video)}>Video</a>]</p>
+    {/if}
+  {:else}
+    {#if embed.playlistURL && isValidURL(embed.playlistURL)}
+      <p>[<a href={embed.playlistURL}>Video</a>]</p>
+    {:else}
+      <p>[{embed.playlistURL}]</p>
+    {/if}
+  {/if}
 
   {#if embed.alt}
     <details class="image-alt">
diff --git a/src/components/posts/FediSourceLink.svelte b/src/components/posts/FediSourceLink.svelte
index 6f5e38c..00b39c5 100644
--- a/src/components/posts/FediSourceLink.svelte
+++ b/src/components/posts/FediSourceLink.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
+  import { parseHTTPURL } from '../../utils.js';
+
   let { url }: { url: string } = $props();
 
-  let hostname = $derived(new URL(url).hostname);
+  let parsedURL = $derived(parseHTTPURL(url));
 </script>
 
-<a class="fedi-link" href={url} target="_blank">
-  <div>
-    <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i> View on {hostname}
-  </div>
-</a>
+{#if parsedURL}
+  <a class="fedi-link" href={parsedURL.href} target="_blank" rel="noopener noreferrer">
+    <div>
+      <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i> View on {parsedURL.hostname}
+    </div>
+  </a>
+{/if}
 
 <style>
   .fedi-link {
diff --git a/src/models/embeds.js b/src/models/embeds.js
index c5f9fcb..634f6b9 100644
--- a/src/models/embeds.js
+++ b/src/models/embeds.js
@@ -144,6 +144,9 @@ export class RawLinkEmbed extends Embed {
   /** @type {json | undefined} */
   thumb;
 
+  /** @type {string | undefined} */
+  description;
+
   /** @param {json} json */
   constructor(json) {
     super(json);
@@ -151,6 +154,7 @@ export class RawLinkEmbed extends Embed {
     this.url = json.external.uri;
     this.title = json.external.title;
     this.thumb = json.external.thumb;
+    this.description = json.external.description;
   }
 }
 
@@ -159,10 +163,14 @@ export class RawVideoEmbed extends Embed {
   /** @type {json | undefined} */
   video;
 
+  /** @type {string | undefined} */
+  alt;
+
   /** @param {json} json */
   constructor(json) {
     super(json);
     this.video = json.video;
+    this.alt = json.alt;
   }
 }
 
@@ -239,7 +247,7 @@ export class InlineLinkEmbed extends Embed {
   /** @type {string | undefined} */
   description;
 
-  /** @type {json | undefined} */
+  /** @type {string | undefined} */
   thumb;
 
   /**
diff --git a/src/utils.ts b/src/utils.ts
index ccafd7a..4d941b0 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -15,16 +15,19 @@ export function feedPostTime(feedPost: json): number {
   return Date.parse(timestamp);
 }
 
-export function isValidURL(url: string): boolean {
+export function parseHTTPURL(url: string): URL | undefined {
   try {
     let u = new URL(url);
-    return (u.protocol == 'http:' || u.protocol == 'https:');
-  } catch (error) {
-    console.error("Invalid URL: " + error);
-    return false;
+    return (u.protocol == 'http:' || u.protocol == 'https:') ? u : undefined;
+  } catch {
+    return undefined;
   }
 }
 
+export function isValidURL(url: string): boolean {
+  return parseHTTPURL(url) !== undefined;
+}
+
 export function sameDay(date1: Date, date2: Date): boolean {
   return (
     date1.getDate() == date2.getDate() &&
-- 
2.51.2