fix(editor): Fixing XSS vulnerability in toast messages

packages/editor-ui/src/components/WorkflowActivator.vue

@@ -5,6 +5,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { getActivatableTriggerNodes } from '@/utils/nodeTypesUtils';
 import { computed } from 'vue';
 import { useI18n } from '@/composables/useI18n';
+import { sanitizeHtml } from '@/utils/htmlUtils';
 
 const props = defineProps<{ workflowActive: boolean; workflowId: string }>();
 const { showMessage } = useToast();
@@ -71,7 +72,7 @@ async function displayActivationError() {
 
 	showMessage({
 		title: i18n.baseText('workflowActivator.showMessage.displayActivationError.title'),
-		message: errorMessage,
+		message: sanitizeHtml(errorMessage),
 		type: 'warning',
 		duration: 0,
 		dangerouslyUseHTMLString: true,

packages/editor-ui/src/composables/useExecutionDebugging.ts

@@ -16,6 +16,7 @@ import { useUIStore } from '@/stores/ui.store';
 import { useTelemetry } from './useTelemetry';
 import { useRootStore } from '@/stores/root.store';
 import { isFullExecutionResponse } from '@/utils/typeGuards';
+import { sanitizeHtml } from '@/utils/htmlUtils';
 
 export const useExecutionDebugging = () => {
 	const telemetry = useTelemetry();
@@ -61,7 +62,7 @@ export const useExecutionDebugging = () => {
 				h(
 					'ul',
 					{ class: 'mt-l ml-l' },
-					matchingPinnedNodeNames.map((name) => h('li', name)),
+					matchingPinnedNodeNames.map((name) => h('li', sanitizeHtml(name))),
 				),
 			]);
 

packages/editor-ui/src/composables/usePushConnection.ts

@@ -413,7 +413,6 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
 							}),
 						type: 'error',
 						duration: 0,
-						dangerouslyUseHTMLString: true,
 					});
 				} else {
 					let title: string;
@@ -438,7 +437,6 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
 							message: runDataExecutedErrorMessage,
 							type: 'error',
 							duration: 0,
-							dangerouslyUseHTMLString: true,
 						});
 					}
 				}

packages/editor-ui/src/composables/useToast.ts

@@ -18,7 +18,7 @@ export interface NotificationErrorWithNodeAndDescription extends ApplicationErro
 }
 
 const messageDefaults: Partial<Omit<NotificationOptions, 'message'>> = {
-	dangerouslyUseHTMLString: true,
+	dangerouslyUseHTMLString: false,
 	position: 'bottom-right',
 };
 

packages/editor-ui/src/constants.ts

@@ -726,6 +726,8 @@ export const ALLOWED_HTML_TAGS = [
 	'mark',
 ];
 
+export const HREF_PROTOCOL_BLACKLIST = ['javascript:', 'vbscript:', 'data:'];
+
 export const CLOUD_CHANGE_PLAN_PAGE = window.location.host.includes('stage-app.n8n.cloud')
 	? 'https://stage-app.n8n.cloud/account/change-plan'
 	: 'https://app.n8n.cloud/account/change-plan';

packages/editor-ui/src/utils/htmlUtils.ts

@@ -1,5 +1,5 @@
 import xss, { friendlyAttrValue } from 'xss';
-import { ALLOWED_HTML_ATTRIBUTES, ALLOWED_HTML_TAGS } from '@/constants';
+import { ALLOWED_HTML_ATTRIBUTES, ALLOWED_HTML_TAGS, HREF_PROTOCOL_BLACKLIST } from '@/constants';
 
 /*
 	Constants and utility functions that help in HTML, CSS and DOM manipulation
@@ -18,6 +18,10 @@ export function sanitizeHtml(dirtyHtml: string) {
 			}
 
 			if (ALLOWED_HTML_ATTRIBUTES.includes(name) || name.startsWith('data-')) {
+				// href is allowed but we need to sanitize certain protocols
+				if (name === 'href' && HREF_PROTOCOL_BLACKLIST.includes(`${value.split(':')[0]}:`)) {
+					return '';
+				}
 				return `${name}="${friendlyAttrValue(value)}"`;
 			}