From 5f15e9ee68d4089bda939bd6c7e3317b1f973238 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 21 Sep 2024 21:43:54 +0200
Subject: [PATCH] fix: node tooltip xss issue

Co-Authored-By: Valentino Stillhardt <4715129+Fusseldieb@users.noreply.github.com>
---
 src/lib/components/chat/Overview/Node.svelte |  1 +
 src/lib/components/common/Tooltip.svelte     | 11 +++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chat/Overview/Node.svelte b/src/lib/components/chat/Overview/Node.svelte
index 670c4a3ff..82691c554 100644
--- a/src/lib/components/chat/Overview/Node.svelte
+++ b/src/lib/components/chat/Overview/Node.svelte
@@ -15,6 +15,7 @@
 	<Tooltip
 		content={data?.message?.error ? data.message.error.content : data.message.content}
 		class="w-full"
+		allowHTML={false}
 	>
 		{#if data.message.role === 'user'}
 			<div class="flex w-full">
diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte
index 1198935b1..a46ef7f79 100644
--- a/src/lib/components/common/Tooltip.svelte
+++ b/src/lib/components/common/Tooltip.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import DOMPurify from 'dompurify';
+
 	import { onDestroy } from 'svelte';
 	import { marked } from 'marked';
 
@@ -10,18 +12,19 @@
 	export let touch = true;
 	export let className = 'flex';
 	export let theme = '';
+	export let allowHTML = true;
 
 	let tooltipElement;
 	let tooltipInstance;
 
 	$: if (tooltipElement && content) {
 		if (tooltipInstance) {
-			tooltipInstance.setContent(content);
+			tooltipInstance.setContent(DOMPurify.sanitize(content));
 		} else {
 			tooltipInstance = tippy(tooltipElement, {
-				content: content,
+				content: DOMPurify.sanitize(content),
 				placement: placement,
-				allowHTML: true,
+				allowHTML: allowHTML,
 				touch: touch,
 				...(theme !== '' ? { theme } : { theme: 'dark' }),
 				arrow: false,
@@ -41,6 +44,6 @@
 	});
 </script>
 
-<div bind:this={tooltipElement} aria-label={content} class={className}>
+<div bind:this={tooltipElement} aria-label={DOMPurify.sanitize(content)} class={className}>
 	<slot />
 </div>