Avoid rendering JavaScript URLs as clickable links

To avoid running JavaScript taken from JSON files downloaded from the
internet in the client we now try to render URLs only as clickable links
if the protocol of the URL is safe, which more concretely means HTTP or
HTTPS. Other URLs are rendered as plain text. This commit only covers
links that are obviously treated as links to external resources.

To avoid duplication, this introduces a new component, SafeLink, that
takes the URL and optionally id and target attributes and renders a
suitable a-element if the protocol is safe and text otherwise.

src/lib/SafeLink.svelte

@@ -0,0 +1,38 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2024 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2024 Intevation GmbH <https://intevation.de>
+-->
+
+<!--
+Component that renders a URL as a clickable if the URL is safe to click.
+Safe to click here means that it uses one of the following protocols:
+ http, https
+
+Other URLs are renders a plain text.
+-->
+
+<script lang="ts">
+  export let url = undefined
+  export let id = undefined
+  export let target = undefined
+
+  // Protocols that are considered safe for URLs that should be
+  // clickable.
+  const safeProtocols = ["https:", "http:"]
+
+  let protocol = undefined
+  if (URL.canParse(url)) {
+    protocol = new URL(url).protocol
+  }
+</script>
+
+{#if safeProtocols.includes(protocol)}
+<a id={id} target={target} href={url}>{url}</a>
+{:else}
+{url}
+{/if}

src/lib/feedview/feed/Links.svelte

@@ -10,14 +10,16 @@
 
 <script lang="ts">
   import type { Link } from "./feedTypes";
+  import SafeLink from "../../SafeLink.svelte";
+
   export let links: Link[] = [];
 </script>
 
 <table>
   {#each links as link}
     <tr>
       <td class="key">{link.rel}: </td><td
-        ><a id={crypto.randomUUID()} target="_blank" href={link.href}>{link.href}</a></td
+        ><SafeLink id={crypto.randomUUID()} target="_blank" url={link.href}/></td
       >
     </tr>
   {/each}

src/lib/feedview/feed/Overview.svelte

@@ -13,6 +13,7 @@
   import Collapsible from "$lib/Collapsible.svelte";
   import Distributions from "./distributions/Distributions.svelte";
   import GeneralInformation from "./GeneralInformation.svelte";
+  import SafeLink from "../../SafeLink.svelte";
 </script>
 
 {#if $appStore.providerMetadata}
@@ -31,7 +32,7 @@
       <table class="keyvalue">
         <tbody>
           <tr><td class="key">fingerprint</td><td class="value">{key.fingerprint}</td></tr>
-          <tr><td class="key">url</td><td class="value"><a href={key.url}>{key.url}</a></td></tr>
+          <tr><td class="key">url</td><td class="value"><SafeLink url={key.url}/></td></tr>
         </tbody>
       </table>
     {/each}

src/lib/singleview/general/General.svelte

@@ -16,6 +16,7 @@
   import References from "$lib/singleview/references/References.svelte";
   import RevisionHistory from "./RevisionHistory.svelte";
   import ValueList from "../../ValueList.svelte";
+  import SafeLink from "../../SafeLink.svelte";
   let tlpStyle = "";
   $: aliases = $appStore.doc?.aliases;
   $: trackingVersion = $appStore.doc?.trackingVersion;
@@ -89,7 +90,7 @@
     {#if tlp?.url}
       <tr>
         <td class="key">TLP URL</td>
-        <td class="value"><a href={tlpurl}>{tlp?.url}</a></td>
+        <td class="value"><SafeLink url={tlpurl}/></td>
       </tr>
     {/if}
     <tr>