From 16e0df553c4e068768bf7dd7bbac1d7c2b88fec2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Fri, 16 Jun 2023 17:42:13 +0200
Subject: [PATCH] fix(HTML Node): Prevent XSS in execution-data preview (#6432)

---
 .../editor-ui/src/components/RunDataHtml.vue  | 45 +++++++++----------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataHtml.vue b/packages/editor-ui/src/components/RunDataHtml.vue
index afdae703b..805fa67a1 100644
--- a/packages/editor-ui/src/components/RunDataHtml.vue
+++ b/packages/editor-ui/src/components/RunDataHtml.vue
@@ -1,11 +1,26 @@
 <template>
-	<div class="__html-display ph-no-capture" v-html="html"></div>
+	<iframe class="__html-display ph-no-capture" :srcdoc="html" />
 </template>
 
 <script lang="ts">
 import type { PropType } from 'vue';
+import sanitizeHtml, { defaults, type IOptions as SanitizeOptions } from 'sanitize-html';
 import type { INodeExecutionData } from 'n8n-workflow';
 
+const sanitizeOptions: SanitizeOptions = {
+	allowVulnerableTags: false,
+	enforceHtmlBoundary: false,
+	disallowedTagsMode: 'discard',
+	allowedTags: [...defaults.allowedTags, 'style', 'img', 'title'],
+	allowedAttributes: {
+		...defaults.allowedAttributes,
+		'*': ['class', 'style'],
+	},
+	transformTags: {
+		head: '',
+	},
+};
+
 export default {
 	name: 'RunDataHtml',
 	props: {
@@ -15,29 +30,8 @@ export default {
 	},
 	computed: {
 		html() {
-			if (!this.inputData) return '';
-
-			return this.scopeCss(this.inputData[0].json.html as string);
-		},
-	},
-	methods: {
-		/**
-		 * Scope all CSS selectors to prevent user stylesheets from leaking.
-		 */
-		scopeCss(str: string) {
-			const stylesheets = str.match(/<style>([\s\S]*?)<\/style>/g);
-
-			if (!stylesheets) return str;
-
-			const map = stylesheets.reduce<Record<string, string>>((acc, match) => {
-				match.split('\n').forEach((line) => {
-					if (line.endsWith('{')) acc[line] = ['.__html-display', line].join(' ');
-				});
-
-				return acc;
-			}, {});
-
-			return Object.entries(map).reduce((acc, [key, value]) => acc.replace(key, value), str);
+			const markup = (this.inputData?.[0].json.html as string) ?? '';
+			return sanitizeHtml(markup, sanitizeOptions);
 		},
 	},
 };
@@ -45,6 +39,7 @@ export default {
 
 <style lang="scss">
 .__html-display {
-	padding: 0 var(--spacing-s);
+	width: 100%;
+	height: 100%;
 }
 </style>