Improve sanitization of model output

package.json

@@ -22,6 +22,7 @@
 		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/kit": "^1.30.4",
 		"@tailwindcss/typography": "^0.5.9",
+		"@types/dompurify": "^3.0.5",
 		"@types/express": "^4.17.21",
 		"@types/js-yaml": "^4.0.9",
 		"@types/jsdom": "^21.1.1",
@@ -31,6 +32,7 @@
 		"@types/uuid": "^9.0.8",
 		"@typescript-eslint/eslint-plugin": "^6.x",
 		"@typescript-eslint/parser": "^6.x",
+		"dompurify": "^3.1.6",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",

src/lib/components/CodeBlock.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { afterUpdate } from "svelte";
 	import CopyToClipBoardBtn from "./CopyToClipBoardBtn.svelte";
+	import DOMPurify from "dompurify";
 
 	export let code = "";
 	export let lang = "";
@@ -19,8 +20,9 @@
 	<!-- eslint-disable svelte/no-at-html-tags -->
 	<pre
 		class="scrollbar-custom overflow-auto px-5 scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20"><code
-			class="language-{lang}">{@html highlightedCode || code.replaceAll("<", "&lt;")}</code
-		></pre>
+			class="language-{lang}">
+			{@html DOMPurify.sanitize(highlightedCode || code)}
+		</code></pre>
 	<CopyToClipBoardBtn
 		classNames="absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100"
 		value={code}

src/lib/components/chat/ChatMessage.svelte

@@ -33,6 +33,7 @@
 	import Modal from "../Modal.svelte";
 	import ToolUpdate from "./ToolUpdate.svelte";
 	import { useSettingsStore } from "$lib/stores/settings";
+	import DOMPurify from "dompurify";
 
 	function sanitizeMd(md: string) {
 		let ret = md
@@ -53,9 +54,6 @@
 
 		return ret;
 	}
-	function unsanitizeMd(md: string) {
-		return md.replaceAll("&lt;", "<");
-	}
 
 	export let model: Model;
 	export let id: Message["id"];
@@ -106,7 +104,6 @@
 	marked.use(
 		markedKatex({
 			throwOnError: false,
-			// output: "html",
 		})
 	);
 
@@ -301,10 +298,12 @@
 				{/if}
 				{#each tokens as token}
 					{#if token.type === "code"}
-						<CodeBlock lang={token.lang} code={unsanitizeMd(token.text)} />
+						<CodeBlock lang={token.lang} code={token.text} />
 					{:else}
-						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-						{@html marked.parse(token.raw, options)}
+						{#await marked.parse(token.raw, options) then parsed}
+							<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+							{@html DOMPurify.sanitize(parsed)}
+						{/await}
 					{/if}
 				{/each}
 			</div>