From 19917226786458e9a27f662965f11eb614be37dd Mon Sep 17 00:00:00 2001
From: Mattias Granlund <mtsgrd@gmail.com>
Date: Fri, 21 Feb 2025 23:45:42 +0100
Subject: [PATCH] Use dompurify to sanitize markdown rendering

---
 apps/desktop/src/components/CommitCard.svelte |  2 +-
 .../v3/StackDetailsCommitHeader.svelte        |  2 +-
 apps/web/src/routes/downloads/+page.svelte    |  2 +-
 .../[branchId]/stack/[changeId]/+page.svelte  |  4 +-
 packages/ui/package.json                      |  1 +
 packages/ui/src/lib/utils/marked.ts           |  7 ++
 pnpm-lock.yaml                                | 81 ++++++++++---------
 7 files changed, 55 insertions(+), 44 deletions(-)
 create mode 100644 packages/ui/src/lib/utils/marked.ts

diff --git a/apps/desktop/src/components/CommitCard.svelte b/apps/desktop/src/components/CommitCard.svelte
index 6bf9c05707..bf0a7d6ae9 100644
--- a/apps/desktop/src/components/CommitCard.svelte
+++ b/apps/desktop/src/components/CommitCard.svelte
@@ -27,8 +27,8 @@
 	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import PopoverActionsContainer from '@gitbutler/ui/popoverActions/PopoverActionsContainer.svelte';
 	import PopoverActionsItem from '@gitbutler/ui/popoverActions/PopoverActionsItem.svelte';
+	import { marked } from '@gitbutler/ui/utils/marked';
 	import { getTimeAgo } from '@gitbutler/ui/utils/timeAgo';
-	import { marked } from 'marked';
 	import { type Snippet } from 'svelte';
 
 	const userService = getContext(UserService);
diff --git a/apps/desktop/src/components/v3/StackDetailsCommitHeader.svelte b/apps/desktop/src/components/v3/StackDetailsCommitHeader.svelte
index 52fc2a0c58..6ff0b79d4e 100644
--- a/apps/desktop/src/components/v3/StackDetailsCommitHeader.svelte
+++ b/apps/desktop/src/components/v3/StackDetailsCommitHeader.svelte
@@ -9,8 +9,8 @@
 	import Icon from '@gitbutler/ui/Icon.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
 	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
+	import { marked } from '@gitbutler/ui/utils/marked';
 	import { getTimeAgo } from '@gitbutler/ui/utils/timeAgo';
-	import { marked } from 'marked';
 	import type { Commit, WorkspaceBranch } from '$lib/branches/v3';
 
 	interface Props {
diff --git a/apps/web/src/routes/downloads/+page.svelte b/apps/web/src/routes/downloads/+page.svelte
index 41c806641f..c945ba8b37 100644
--- a/apps/web/src/routes/downloads/+page.svelte
+++ b/apps/web/src/routes/downloads/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { marked } from 'marked';
+	import { marked } from '@gitbutler/ui/utils/marked';
 	import type { Build, Release } from '$lib/types/releases';
 
 	interface Props {
diff --git a/apps/web/src/routes/projects/[projectId]/branches/[branchId]/stack/[changeId]/+page.svelte b/apps/web/src/routes/projects/[projectId]/branches/[branchId]/stack/[changeId]/+page.svelte
index 94a65ebbdb..93d2a49065 100644
--- a/apps/web/src/routes/projects/[projectId]/branches/[branchId]/stack/[changeId]/+page.svelte
+++ b/apps/web/src/routes/projects/[projectId]/branches/[branchId]/stack/[changeId]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext } from '@gitbutler/shared/context';
 	import { HttpClient } from '@gitbutler/shared/network/httpClient';
+	import { marked } from '@gitbutler/ui/utils/marked';
 	import hljs from 'highlight.js';
-	import { marked } from 'marked';
 	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 
@@ -59,7 +59,7 @@
 					// render markdowns
 					let markdowns = document.querySelectorAll('.markdown');
 					markdowns.forEach((markdown) => {
-						markdown.innerHTML = marked(markdown.innerHTML, { async: false });
+						markdown.innerHTML = marked(markdown.innerHTML);
 					});
 				}, 10);
 			});
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 183dcd63bb..c9ae1da29e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -68,6 +68,7 @@
 		"cpy-cli": "^5.0.0",
 		"dayjs": "^1.11.13",
 		"diff-match-patch": "^1.0.5",
+		"isomorphic-dompurify": "^2.22.0",
 		"marked": "catalog:",
 		"playwright": "1.47.0",
 		"postcss": "^8.4.49",
diff --git a/packages/ui/src/lib/utils/marked.ts b/packages/ui/src/lib/utils/marked.ts
new file mode 100644
index 0000000000..a6127c422a
--- /dev/null
+++ b/packages/ui/src/lib/utils/marked.ts
@@ -0,0 +1,7 @@
+import DOMPurify from 'isomorphic-dompurify';
+import { marked as markedLib } from 'marked';
+
+/** DOMPurify cecommended by marked. */
+export function marked(value: string) {
+	return DOMPurify.sanitize(markedLib(value, { async: false }));
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab95722630..54e71c42ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -686,6 +686,9 @@ importers:
       diff-match-patch:
         specifier: ^1.0.5
         version: 1.0.5
+      isomorphic-dompurify:
+        specifier: ^2.22.0
+        version: 2.22.0
       marked:
         specifier: 'catalog:'
         version: 15.0.7
@@ -2752,6 +2755,9 @@ packages:
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/tryghost__content-api@1.3.17':
     resolution: {integrity: sha512-4DASYoK0hP1+XDyLS/8IZevalQRJuPmyPmfxdT1hnYRjxnJkgusATeDc/7QXA2izMZ/+cWkgdZDeTN2cBW+EoA==}
 
@@ -3808,6 +3814,9 @@ packages:
     resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
     engines: {node: '>= 4'}
 
+  dompurify@3.2.4:
+    resolution: {integrity: sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==}
+
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
@@ -4889,6 +4898,10 @@ packages:
     resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
     engines: {node: '>=16'}
 
+  isomorphic-dompurify@2.22.0:
+    resolution: {integrity: sha512-A2xsDNST1yB94rErEnwqlzSvGllCJ4e8lDMe1OWBH2hvpfc/2qzgMEiDshTO1HwO+PIDTiYeOc7ZDB7Ds49BOg==}
+    engines: {node: '>=18'}
+
   isomorphic.js@0.2.5:
     resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
 
@@ -7422,7 +7435,6 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
       lru-cache: 10.4.3
-    optional: true
 
   '@babel/code-frame@7.24.7':
     dependencies:
@@ -7736,14 +7748,12 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
 
-  '@csstools/color-helpers@5.0.1':
-    optional: true
+  '@csstools/color-helpers@5.0.1': {}
 
   '@csstools/css-calc@2.1.1(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-    optional: true
 
   '@csstools/css-color-parser@3.0.7(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
     dependencies:
@@ -7751,7 +7761,6 @@ snapshots:
       '@csstools/css-calc': 2.1.1(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-    optional: true
 
   '@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1)':
     dependencies:
@@ -9797,6 +9806,9 @@ snapshots:
 
   '@types/tough-cookie@4.0.5': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/tryghost__content-api@1.3.17': {}
 
   '@types/uuid@9.0.8': {}
@@ -10338,8 +10350,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  agent-base@7.1.3:
-    optional: true
+  agent-base@7.1.3: {}
 
   agentkeepalive@4.5.0:
     dependencies:
@@ -10665,7 +10676,6 @@ snapshots:
     dependencies:
       es-errors: 1.3.0
       function-bind: 1.1.2
-    optional: true
 
   call-bind@1.0.7:
     dependencies:
@@ -10908,7 +10918,6 @@ snapshots:
     dependencies:
       '@asamuzakjp/css-color': 2.8.3
       rrweb-cssom: 0.8.0
-    optional: true
 
   csstype@2.6.21: {}
 
@@ -11082,6 +11091,10 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.2.4:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@2.8.0:
     dependencies:
       dom-serializer: 1.4.1
@@ -11097,7 +11110,6 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       es-errors: 1.3.0
       gopd: 1.2.0
-    optional: true
 
   eastasianwidth@0.2.0: {}
 
@@ -11236,8 +11248,7 @@ snapshots:
     dependencies:
       get-intrinsic: 1.2.4
 
-  es-define-property@1.0.1:
-    optional: true
+  es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
@@ -11246,7 +11257,6 @@ snapshots:
   es-object-atoms@1.0.0:
     dependencies:
       es-errors: 1.3.0
-    optional: true
 
   es-set-tostringtag@2.1.0:
     dependencies:
@@ -11254,7 +11264,6 @@ snapshots:
       get-intrinsic: 1.2.7
       has-tostringtag: 1.0.2
       hasown: 2.0.2
-    optional: true
 
   es-shim-unscopables@1.0.2:
     dependencies:
@@ -11791,7 +11800,6 @@ snapshots:
       combined-stream: 1.0.8
       es-set-tostringtag: 2.1.0
       mime-types: 2.1.35
-    optional: true
 
   formdata-node@4.4.1:
     dependencies:
@@ -11878,7 +11886,6 @@ snapshots:
       has-symbols: 1.1.0
       hasown: 2.0.2
       math-intrinsics: 1.1.0
-    optional: true
 
   get-port@7.1.0: {}
 
@@ -11886,7 +11893,6 @@ snapshots:
     dependencies:
       dunder-proto: 1.0.1
       es-object-atoms: 1.0.0
-    optional: true
 
   get-stdin@9.0.0: {}
 
@@ -12042,8 +12048,7 @@ snapshots:
     dependencies:
       get-intrinsic: 1.2.4
 
-  gopd@1.2.0:
-    optional: true
+  gopd@1.2.0: {}
 
   got@12.6.1:
     dependencies:
@@ -12089,8 +12094,7 @@ snapshots:
 
   has-symbols@1.0.3: {}
 
-  has-symbols@1.1.0:
-    optional: true
+  has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
     dependencies:
@@ -12157,7 +12161,6 @@ snapshots:
       debug: 4.4.0
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   human-signals@2.1.0: {}
 
@@ -12433,6 +12436,16 @@ snapshots:
 
   isexe@3.1.1: {}
 
+  isomorphic-dompurify@2.22.0:
+    dependencies:
+      dompurify: 3.2.4
+      jsdom: 26.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
   isomorphic.js@0.2.5: {}
 
   jackspeak@3.4.3:
@@ -12556,7 +12569,6 @@ snapshots:
       - bufferutil
       - supports-color
       - utf-8-validate
-    optional: true
 
   jsesc@2.5.2: {}
 
@@ -12761,8 +12773,7 @@ snapshots:
 
   lru-cache@10.2.2: {}
 
-  lru-cache@10.4.3:
-    optional: true
+  lru-cache@10.4.3: {}
 
   lru-cache@11.0.0: {}
 
@@ -12812,8 +12823,7 @@ snapshots:
 
   marked@15.0.7: {}
 
-  math-intrinsics@1.1.0:
-    optional: true
+  math-intrinsics@1.1.0: {}
 
   mdurl@2.0.0: {}
 
@@ -13041,8 +13051,7 @@ snapshots:
 
   nwsapi@2.2.12: {}
 
-  nwsapi@2.2.16:
-    optional: true
+  nwsapi@2.2.16: {}
 
   object-inspect@1.13.1: {}
 
@@ -13181,7 +13190,7 @@ snapshots:
       debug: 4.4.0
       get-uri: 6.0.3
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       pac-resolver: 7.0.1
       socks-proxy-agent: 8.0.4
     transitivePeerDependencies:
@@ -13239,7 +13248,6 @@ snapshots:
   parse5@7.2.1:
     dependencies:
       entities: 4.5.0
-    optional: true
 
   pascal-case@3.1.2:
     dependencies:
@@ -13649,7 +13657,7 @@ snapshots:
       agent-base: 7.1.1
       debug: 4.4.0
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       lru-cache: 7.18.3
       pac-proxy-agent: 7.0.2
       proxy-from-env: 1.1.0
@@ -13901,8 +13909,7 @@ snapshots:
 
   rrweb-cssom@0.7.1: {}
 
-  rrweb-cssom@0.8.0:
-    optional: true
+  rrweb-cssom@0.8.0: {}
 
   run-async@3.0.0: {}
 
@@ -14545,13 +14552,11 @@ snapshots:
 
   tinyspy@3.0.2: {}
 
-  tldts-core@6.1.77:
-    optional: true
+  tldts-core@6.1.77: {}
 
   tldts@6.1.77:
     dependencies:
       tldts-core: 6.1.77
-    optional: true
 
   tmp@0.0.33:
     dependencies:
@@ -14575,7 +14580,6 @@ snapshots:
   tough-cookie@5.1.1:
     dependencies:
       tldts: 6.1.77
-    optional: true
 
   tr46@0.0.3: {}
 
@@ -15099,7 +15103,6 @@ snapshots:
     dependencies:
       tr46: 5.0.0
       webidl-conversions: 7.0.0
-    optional: true
 
   whatwg-url@5.0.0:
     dependencies: