use v-n8n-html to render html error message

n8n-io · Nov 19, 2024 · 8bc5269 · 8bc5269
1 parent a981fa3
commit 8bc5269
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 14 deletions.
diff --git 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
@@ -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')