Improve sanitization of model output (#1341)

* Improve sanitization of model output

* make it compatible with SSR

* fix formatting issues

package-lock.json

@@ -59,6 +59,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",
@@ -68,9 +69,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",
@@ -3460,6 +3463,16 @@
 			"integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==",
 			"dev": true
 		},
+		"node_modules/@types/dompurify": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+			"integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/trusted-types": "*"
+			}
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3678,6 +3691,13 @@
 			"integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
 			"dev": true
 		},
+		"node_modules/@types/trusted-types": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+			"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@types/uuid": {
 			"version": "9.0.8",
 			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
@@ -5350,6 +5370,13 @@
 				"url": "https://github.com/fb55/domhandler?sponsor=1"
 			}
 		},
+		"node_modules/dompurify": {
+			"version": "3.1.6",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+			"integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==",
+			"dev": true,
+			"license": "(MPL-2.0 OR Apache-2.0)"
+		},
 		"node_modules/domutils": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
@@ -6890,6 +6917,223 @@
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
 			"dev": true
 		},
+		"node_modules/isomorphic-dompurify": {
+			"version": "2.13.0",
+			"resolved": "https://registry.npmjs.org/isomorphic-dompurify/-/isomorphic-dompurify-2.13.0.tgz",
+			"integrity": "sha512-jVxFnyOiA3fKPkteQjfIogww9T/BIX1Basuwt5D50MB3Sqvki9yBNq96ICLHpbiDY79jc6RC555DeBbTCt6i6A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/dompurify": "^3.0.5",
+				"dompurify": "^3.1.6",
+				"jsdom": "^24.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/agent-base": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/cssstyle": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
+			"integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"rrweb-cssom": "^0.6.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/data-urls": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+			"integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"whatwg-mimetype": "^4.0.0",
+				"whatwg-url": "^14.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/html-encoding-sniffer": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+			"integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"whatwg-encoding": "^3.1.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/http-proxy-agent": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+			"integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.1.0",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/https-proxy-agent": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+			"integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/jsdom": {
+			"version": "24.1.0",
+			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.0.tgz",
+			"integrity": "sha512-6gpM7pRXCwIOKxX47cgOyvyQDN/Eh0f1MeKySBV2xGdKtqJBLj8P25eY3EVCWo2mglDDzozR2r2MW4T+JiNUZA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cssstyle": "^4.0.1",
+				"data-urls": "^5.0.0",
+				"decimal.js": "^10.4.3",
+				"form-data": "^4.0.0",
+				"html-encoding-sniffer": "^4.0.0",
+				"http-proxy-agent": "^7.0.2",
+				"https-proxy-agent": "^7.0.4",
+				"is-potential-custom-element-name": "^1.0.1",
+				"nwsapi": "^2.2.10",
+				"parse5": "^7.1.2",
+				"rrweb-cssom": "^0.7.0",
+				"saxes": "^6.0.0",
+				"symbol-tree": "^3.2.4",
+				"tough-cookie": "^4.1.4",
+				"w3c-xmlserializer": "^5.0.0",
+				"webidl-conversions": "^7.0.0",
+				"whatwg-encoding": "^3.1.1",
+				"whatwg-mimetype": "^4.0.0",
+				"whatwg-url": "^14.0.0",
+				"ws": "^8.17.0",
+				"xml-name-validator": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"canvas": "^2.11.2"
+			},
+			"peerDependenciesMeta": {
+				"canvas": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/jsdom/node_modules/rrweb-cssom": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+			"integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/isomorphic-dompurify/node_modules/tr46": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+			"integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"punycode": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/w3c-xmlserializer": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+			"integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"xml-name-validator": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/whatwg-encoding": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+			"integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"iconv-lite": "0.6.3"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/whatwg-mimetype": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+			"integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/whatwg-url": {
+			"version": "14.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+			"integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tr46": "^5.0.0",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/isomorphic-dompurify/node_modules/xml-name-validator": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+			"integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/jiti": {
 			"version": "1.21.0",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
@@ -7809,9 +8053,10 @@
 			}
 		},
 		"node_modules/nwsapi": {
-			"version": "2.2.4",
-			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.4.tgz",
-			"integrity": "sha512-NHj4rzRo0tQdijE9ZqAx6kYDcoRwYwSYzCA8MY3JzfxlrvEU0jhnhJT9BhqhJs7I/dKcrDm6TyulaRqZPIhN5g=="
+			"version": "2.2.12",
+			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.12.tgz",
+			"integrity": "sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==",
+			"license": "MIT"
 		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
@@ -8906,9 +9151,10 @@
 			}
 		},
 		"node_modules/punycode": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}
@@ -10391,9 +10637,10 @@
 			}
 		},
 		"node_modules/tough-cookie": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
-			"integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+			"version": "4.1.4",
+			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+			"integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+			"license": "BSD-3-Clause",
 			"dependencies": {
 				"psl": "^1.1.33",
 				"punycode": "^2.1.1",

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}

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 "isomorphic-dompurify";
 
 	function sanitizeMd(md: string) {
 		let ret = md
@@ -53,6 +54,7 @@
 
 		return ret;
 	}
+
 	function unsanitizeMd(md: string) {
 		return md.replaceAll("&lt;", "<");
 	}
@@ -106,11 +108,10 @@
 	marked.use(
 		markedKatex({
 			throwOnError: false,
-			// output: "html",
 		})
 	);
 
-	$: tokens = marked.lexer(sanitizeMd(message.content));
+	$: tokens = marked.lexer(sanitizeMd(message.content ?? ""));
 
 	$: emptyLoad =
 		!message.content && (webSearchIsDone || (searchUpdates && searchUpdates.length === 0));
@@ -303,8 +304,10 @@
 					{#if token.type === "code"}
 						<CodeBlock lang={token.lang} code={unsanitizeMd(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>