From 23b2f4645eeb024564d0437b9511103cd96f1f0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Mon, 5 Oct 2026 10:45:07 +0200
Subject: [PATCH] Remove {@html} from error messages

---
 src/components/ErrorMessage.svelte  | 12 +++++++++---
 src/modals/ErrorModal.svelte        |  4 +++-
 src/views/error/View.svelte         | 10 +++++++++-
 src/views/nodes/error.ts            |  9 ++-------
 src/views/repos/Cob/Revision.svelte |  5 ++---
 src/views/repos/History.svelte      |  5 ++---
 src/views/repos/Issues.svelte       |  5 ++---
 src/views/repos/Patches.svelte      |  5 ++---
 src/views/repos/Releases.svelte     |  5 ++---
 src/views/repos/error.ts            |  4 +---
 10 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/components/ErrorMessage.svelte b/src/components/ErrorMessage.svelte
index 6be392fc1..5d6520063 100644
--- a/src/components/ErrorMessage.svelte
+++ b/src/components/ErrorMessage.svelte
@@ -11,6 +11,9 @@
   export let description: string;
   export let error: ErrorParam = undefined;
   export let icon: ComponentProps<IconLarge>["name"] = "alert";
+  // An optional seed address shown below the description, e.g. the node the
+  // failed request targeted. Rendered as plain text, never as markup.
+  export let seed: string | undefined = undefined;
 </script>
 
 <style>
@@ -27,8 +30,9 @@
   .label {
     font: var(--txt-body-m-regular);
     max-width: 36rem;
+    white-space: pre-line;
   }
-  .error :global(code) {
+  .error code {
     font: var(--txt-code-regular);
     background-color: var(--color-surface-mid);
     border-radius: var(--border-radius-sm);
@@ -54,8 +58,10 @@
   <div class="txt-heading-m">
     {title}
   </div>
-  <!-- description is rendered as HTML; callers must escape any interpolated user input. -->
-  <div class="label">{@html description}</div>
+  <div class="label">{description}</div>
+  {#if seed}
+    <div class="label"><code>{seed}</code></div>
+  {/if}
   {#if error}
     <div class="help">
       If you need help resolving this issue, copy the error message
diff --git a/src/modals/ErrorModal.svelte b/src/modals/ErrorModal.svelte
index d78a2df4b..0741ce3f3 100644
--- a/src/modals/ErrorModal.svelte
+++ b/src/modals/ErrorModal.svelte
@@ -16,7 +16,9 @@
   <IconLarge name="alert" slot="icon" />
 
   <div slot="subtitle">
-    {@html subtitle.join("<br />")}
+    {#each subtitle as line, i}
+      {#if i > 0}<br />{/if}{line}
+    {/each}
 
     <br />
     <br />
diff --git a/src/views/error/View.svelte b/src/views/error/View.svelte
index 7350aedc8..4c9a71cee 100644
--- a/src/views/error/View.svelte
+++ b/src/views/error/View.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+  import type { BaseUrl } from "@http-client";
   import type { ComponentProps } from "svelte";
   import type IconLarge from "@app/components/IconLarge.svelte";
   import type { ErrorParam } from "@app/lib/router/definitions";
 
+  import { baseUrlToString } from "@app/lib/utils";
   import Layout from "@app/App/Layout.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";
 
@@ -10,6 +12,7 @@
   export let title: string;
   export let description: string;
   export let error: ErrorParam = undefined;
+  export let baseUrl: BaseUrl | undefined = undefined;
 </script>
 
 <style>
@@ -35,7 +38,12 @@
 <Layout>
   <div class="wrapper">
     <div class="container">
-      <ErrorMessage {icon} {title} {description} {error} />
+      <ErrorMessage
+        {icon}
+        {title}
+        {description}
+        {error}
+        seed={baseUrl ? baseUrlToString(baseUrl) : undefined} />
     </div>
   </div>
 </Layout>
diff --git a/src/views/nodes/error.ts b/src/views/nodes/error.ts
index ea7671703..7c5d2ec61 100644
--- a/src/views/nodes/error.ts
+++ b/src/views/nodes/error.ts
@@ -1,18 +1,12 @@
 import type { BaseUrl } from "@http-client";
 import type { ErrorRoute, NotFoundRoute } from "@app/lib/router/definitions";
 
-import escape from "lodash/escape";
-
 import { ResponseParseError, ResponseError } from "@http-client/lib/fetcher";
-import { baseUrlToString } from "@app/lib/utils";
 
 export function handleError(
   error: Error | ResponseParseError | ResponseError,
   baseUrl: BaseUrl,
 ): NotFoundRoute | ErrorRoute {
-  const url = baseUrlToString(baseUrl);
-  const safeUrl = escape(url);
-
   if (error instanceof ResponseParseError) {
     return {
       resource: "error",
@@ -29,7 +23,8 @@ export function handleError(
       params: {
         error,
         title: "Could not load this node",
-        description: `You’re trying to access a node that is not reachable, make sure the address <a href="${safeUrl}">${safeUrl}</a> is correct and the right ports are exposed if its your node.`,
+        description:
+          "You’re trying to access a node that is not reachable. Make sure the address below is correct and the right ports are exposed if it’s your node.",
         baseUrl,
       },
     };
diff --git a/src/views/repos/Cob/Revision.svelte b/src/views/repos/Cob/Revision.svelte
index 18f3626ae..214b392cd 100644
--- a/src/views/repos/Cob/Revision.svelte
+++ b/src/views/repos/Cob/Revision.svelte
@@ -464,9 +464,8 @@
           style:border-radius="var(--border-radius-md)">
           <ErrorMessage
             title="Failed to load diff for this revision"
-            description="Make sure you are able to connect to the seed <code>{utils.baseUrlToString(
-              api.baseUrl,
-            )}</code>"
+            description="Make sure you are able to connect to the seed:"
+            seed={utils.baseUrlToString(api.baseUrl)}
             {error} />
         </div>
       {/if}
diff --git a/src/views/repos/History.svelte b/src/views/repos/History.svelte
index a978dc7ca..bf0f151d5 100644
--- a/src/views/repos/History.svelte
+++ b/src/views/repos/History.svelte
@@ -172,9 +172,8 @@
     <div class="message">
       <ErrorMessage
         title="Couldn’t load commits"
-        description="Make sure you are able to connect to the seed <code>{baseUrlToString(
-          api.baseUrl,
-        )}</code>"
+        description="Make sure you are able to connect to the seed:"
+        seed={baseUrlToString(api.baseUrl)}
         {error} />
     </div>
   {/if}
diff --git a/src/views/repos/Issues.svelte b/src/views/repos/Issues.svelte
index f6d2f78fd..c5e0a14bf 100644
--- a/src/views/repos/Issues.svelte
+++ b/src/views/repos/Issues.svelte
@@ -160,9 +160,8 @@
   {#if error}
     <ErrorMessage
       title="Couldn’t load issues"
-      description="Please make sure you are able to connect to the seed <code>{baseUrlToString(
-        api.baseUrl,
-      )}</code>"
+      description="Please make sure you are able to connect to the seed:"
+      seed={baseUrlToString(api.baseUrl)}
       {error} />
   {/if}
 
diff --git a/src/views/repos/Patches.svelte b/src/views/repos/Patches.svelte
index 0f3b4ba90..4800848a3 100644
--- a/src/views/repos/Patches.svelte
+++ b/src/views/repos/Patches.svelte
@@ -199,9 +199,8 @@
   {#if error}
     <ErrorMessage
       title="Couldn’t load patches"
-      description="Please make sure you are able to connect to the seed <code>{baseUrlToString(
-        api.baseUrl,
-      )}</code>"
+      description="Please make sure you are able to connect to the seed:"
+      seed={baseUrlToString(api.baseUrl)}
       {error} />
   {/if}
 
diff --git a/src/views/repos/Releases.svelte b/src/views/repos/Releases.svelte
index 201bacf16..901c5cc86 100644
--- a/src/views/repos/Releases.svelte
+++ b/src/views/repos/Releases.svelte
@@ -194,9 +194,8 @@
   {#if error}
     <ErrorMessage
       title="Couldn't load releases"
-      description="Please make sure you are able to connect to the seed <code>{baseUrlToString(
-        api.baseUrl,
-      )}</code>"
+      description="Please make sure you are able to connect to the seed:"
+      seed={baseUrlToString(api.baseUrl)}
       {error} />
   {/if}
 
diff --git a/src/views/repos/error.ts b/src/views/repos/error.ts
index bdb865130..0d17c0025 100644
--- a/src/views/repos/error.ts
+++ b/src/views/repos/error.ts
@@ -1,14 +1,12 @@
 import type { ErrorRoute, NotFoundRoute } from "@app/lib/router/definitions";
 import type { RepoRoute } from "@app/views/repos/router";
 
-import { baseUrlToString } from "@app/lib/utils";
 import { ResponseParseError, ResponseError } from "@http-client/lib/fetcher";
 
 export function handleError(
   error: Error | ResponseParseError | ResponseError,
   route: RepoRoute,
 ): NotFoundRoute | ErrorRoute {
-  const url = baseUrlToString(route.node);
   if (error instanceof ResponseError && error.status === 404) {
     let subject;
 
@@ -36,7 +34,7 @@ export function handleError(
       params: {
         error,
         title: "Could not load this repository",
-        description: `Make sure you are able to connect to the seed <a href="${url}">${url}</a>.`,
+        description: "Make sure you are able to connect to the seed:",
         baseUrl: route.node,
       },
     };