From a65fc60f7a58c366729efa4c2b12529ccc379ddb Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Mon, 10 Feb 2025 03:43:05 -0500
Subject: [PATCH] fix: Render messages with escaped HTML in `{@html}` tags

Doing this so that I don't have to worry about it when I implement
markdown later, as the escaped string will be passed to the markdown
renderer, so that arbitrary HTML written in the message box will not be
rendered, but HTML from the markdown parser will.
---
 bun.lockb                         | Bin 216472 -> 216472 bytes
 src/lib/components/message.svelte |   3 ++-
 src/lib/functions/escapeHTML.ts   |   3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/functions/escapeHTML.ts

diff --git a/bun.lockb b/bun.lockb
index d876216004b9ce9bb7321dcbc907e8405c01d126..e80204831d2a5a9dfd694fcff5120151c30ace1e 100755
GIT binary patch
delta 32
ncmbO+n|H=+-i8*&ElkF)9E@@1dS-ftM(x(FOxvwpnPWKsrh*9X

delta 32
jcmbO+n|H=+-i8*&ElkF)983%l&~EL@wB6d3IhF$eka!1X

diff --git a/src/lib/components/message.svelte b/src/lib/components/message.svelte
index 9bd9318..369a955 100644
--- a/src/lib/components/message.svelte
+++ b/src/lib/components/message.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { type TypeMessage } from '$lib/types';
+  import escapeHTML from '$lib/functions/escapeHTML';
   const { message, imageSrc, user }: TypeMessage = $props();
 </script>
 
@@ -11,7 +12,7 @@
   </div>
   <div class="w-full">
     <p class="inline-size-full break-words font-bold">{user}</p>
-    <pre class="inline-size-full text-wrap break-words font-sans">{message}</pre>
+    <pre class="inline-size-full text-wrap break-words font-sans">{@html escapeHTML(message)}</pre>
   </div>
 </div>
 
diff --git a/src/lib/functions/escapeHTML.ts b/src/lib/functions/escapeHTML.ts
new file mode 100644
index 0000000..89a722e
--- /dev/null
+++ b/src/lib/functions/escapeHTML.ts
@@ -0,0 +1,3 @@
+export default function escapeHTML(text: string) {
+  return text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#39;');
+}