From c3ffb497755eb55e481fbd9fdf371e40e027428e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 17 Jan 2023 17:28:55 +0100
Subject: [PATCH] frontend(apps): html component uses iframe for security

---
 .../components/dataDisplay/AppHtml.svelte     | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte b/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte
index 2637b2e388..c9ab1ef9d7 100644
--- a/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte
+++ b/frontend/src/lib/components/apps/components/dataDisplay/AppHtml.svelte
@@ -12,17 +12,29 @@
 	export const staticOutputs: string[] = ['result', 'loading']
 
 	let result: string | undefined = undefined
+	let h: number | undefined = undefined
+	let w: number | undefined = undefined
 </script>
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
-	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		<div
-			on:pointerdown={(e) => {
-				e?.preventDefault()
-			}}
-			class="h-full relative w-full overflow-hidden"
+<div
+	on:pointerdown={(e) => {
+		e?.preventDefault()
+	}}
+	class="h-full w-full"
+	bind:clientHeight={h}
+	bind:clientWidth={w}
+>
+	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+			<iframe
+				frameborder="0"
+				style="height: {h}px; width: {w}px"
+				class="p-0"
+				title="sandbox"
+				srcdoc={result
+					? '<scr' + `ipt src="https://cdn.tailwindcss.com"></script>` + result
+					: 'No html'}
+			/></AlignWrapper
 		>
-			{@html result ?? 'No html'}
-		</div>
-	</AlignWrapper>
-</RunnableWrapper>
+	</RunnableWrapper>
+</div>