Improve sanitization of model output (huggingface#1341)

* Improve sanitization of model output

* make it compatible with SSR

* fix formatting issues

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,9 +32,11 @@
 		"@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",
+		"isomorphic-dompurify": "^2.13.0",
 		"js-yaml": "^4.1.0",
 		"minimist": "^1.2.8",
 		"prettier": "^2.8.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 "isomorphic-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.replaceAll("<", "&lt;"))}
+		</code></pre>
 	<CopyToClipBoardBtn
 		classNames="absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100"
 		value={code}