From 8bc526920fff3982a1e1b6cfd4c81af14f063b59 Mon Sep 17 00:00:00 2001
From: Ivan Atanasov <ivan.atanasov@n8n.io>
Date: Tue, 19 Nov 2024 16:01:53 +0100
Subject: [PATCH] use v-n8n-html to render html error message

---
 .../src/components/NodeExecutionErrorMessage.test.ts |  8 ++++----
 .../src/components/NodeExecutionErrorMessage.vue     | 12 ++----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeExecutionErrorMessage.test.ts b/packages/editor-ui/src/components/NodeExecutionErrorMessage.test.ts
index be70c28d98b82..3bc51a18e9a34 100644
--- a/packages/editor-ui/src/components/NodeExecutionErrorMessage.test.ts
+++ b/packages/editor-ui/src/components/NodeExecutionErrorMessage.test.ts
@@ -60,23 +60,23 @@ describe('NodeExecutionErrorMessage', () => {
 	});
 
 	it('sanitizes malicious script in error message', () => {
-		const { container } = renderComponent({
+		const { getByTestId } = renderComponent({
 			props: {
 				nodeName: 'Test Node',
 				errorMessage: '<img src=x onerror=alert(1)>',
 			},
 		});
-		expect(container.querySelector('img')).not.toBeInTheDocument();
+		expect(getByTestId('sanitized-error-message')).toContainHTML('<img src="x">');
 	});
 
 	it('sanitizes malicious script in error message with nested tags', () => {
-		const { container } = renderComponent({
+		const { getByTestId } = renderComponent({
 			props: {
 				nodeName: 'Test Node',
 				errorMessage: '<div><img src=x onerror=alert(1)></div>',
 			},
 		});
-		expect(container.querySelector('img')).not.toBeInTheDocument();
+		expect(getByTestId('sanitized-error-message')).toContainHTML('<div><img src="x"></div>');
 	});
 
 	it('sanitizes malicious script in error message with script tag', () => {
diff --git a/packages/editor-ui/src/components/NodeExecutionErrorMessage.vue b/packages/editor-ui/src/components/NodeExecutionErrorMessage.vue
index b7dae53fa5b54..26db3153ec7e2 100644
--- a/packages/editor-ui/src/components/NodeExecutionErrorMessage.vue
+++ b/packages/editor-ui/src/components/NodeExecutionErrorMessage.vue
@@ -1,25 +1,17 @@
 <script lang="ts" setup>
-/* eslint-disable vue/no-v-html */
 import { useI18n } from '@/composables/useI18n';
-import { sanitizeHtml } from '@/utils/htmlUtils';
-
-import { computed } from 'vue';
 
 const i18n = useI18n();
 
-const props = defineProps<{
+defineProps<{
 	nodeName: string;
 	errorMessage?: string;
 }>();
-
-const sanitizedErrorMessage = computed(() => {
-	return props.errorMessage ? sanitizeHtml(props.errorMessage) : '';
-});
 </script>
 
 <template>
 	<div>
-		<span data-test-id="sanitized-error-message" v-html="sanitizedErrorMessage"></span>
+		<span v-n8n-html="errorMessage" data-test-id="sanitized-error-message"></span>
 		<br />
 		<a data-action="openNodeDetail" :data-action-parameter-node="nodeName">{{
 			i18n.baseText('node.executionError.openNode')