feat(editor): Implement HTML sanitization for Notification and Message components

packages/editor-ui/package.json

@@ -29,7 +29,6 @@
     "luxon": "^2.3.0",
     "monaco-editor": "^0.30.1",
     "n8n-design-system": "~0.33.1",
-    "sanitize-html": "^2.7.1",
     "timeago.js": "^4.0.2",
     "v-click-outside": "^3.1.2",
     "vue-fragment": "1.5.1",
@@ -53,7 +52,6 @@
     "@types/luxon": "^2.0.9",
     "@types/node": "^16.11.22",
     "@types/quill": "^2.0.1",
-    "@types/sanitize-html": "^2.6.2",
     "@types/uuid": "^8.3.2",
     "@vue/cli-plugin-babel": "~4.5.19",
     "@vue/cli-plugin-typescript": "~4.5.19",

packages/editor-ui/src/App.vue

@@ -30,11 +30,13 @@ import { mapGetters } from 'vuex';
 import { userHelpers } from './components/mixins/userHelpers';
 import { addHeaders, loadLanguage } from './plugins/i18n';
 import { restApi } from '@/components/mixins/restApi';
+import { globalLinkActions } from '@/components/mixins/globalLinkActions';
 
 export default mixins(
 	showMessage,
 	userHelpers,
 	restApi,
+	globalLinkActions,
 ).extend({
 	name: 'App',
 	components: {

packages/editor-ui/src/components/mixins/globalLinkActions.ts

@@ -0,0 +1,48 @@
+/**
+ * Creates event listeners for `data-action` attribute to allow for actions to be called from locale without using
+ * unsafe onclick attribute
+ */
+ import Vue from 'vue';
+
+ export const globalLinkActions = Vue.extend({
+	data(): {[key: string]: {[key: string]: Function}} {
+		return {
+			customActions: {},
+		};
+	},
+	mounted() {
+		window.addEventListener('click', this.delegateClick);
+		this.$root.$on('registerGlobalLinkAction', this.registerCustomAction);
+	},
+	destroyed() {
+		window.removeEventListener('click', this.delegateClick);
+		this.$root.$off('registerGlobalLinkAction', this.registerCustomAction);
+	},
+	computed: {
+		availableActions(): {[key: string]: Function} {
+			return {
+				reload: this.reload,
+				...this.customActions,
+			};
+		},
+	},
+	methods: {
+		registerCustomAction(key: string, action: Function) {
+			this.customActions[key] = action;
+		},
+		delegateClick(e: MouseEvent) {
+			const clickedElement = e.target;
+			if (!(clickedElement instanceof Element) || clickedElement.tagName !== 'A') return;
+
+			const actionAttribute = clickedElement.getAttribute('data-action');
+			if(actionAttribute && typeof this.availableActions[actionAttribute] === 'function') {
+				e.preventDefault();
+				this.availableActions[actionAttribute]();
+			}
+		},
+		reload() {
+			window.location.reload();
+		},
+	},
+ });
+

packages/editor-ui/src/components/mixins/pushConnection.ts

@@ -233,7 +233,12 @@ export const pushConnection = mixins(
 
 						let action;
 						if (!isSavingExecutions) {
-							action = '<a class="open-settings">Turn on saving manual executions</a> and run again to see what happened after this node.';
+							this.$root.$emit('registerGlobalLinkAction', 'open-settings', async () => {
+								if (this.$store.getters.isNewWorkflow) await this.saveAsNewWorkflow();
+								this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+							});
+
+							action = '<a data-action="open-settings">Turn on saving manual executions</a> and run again to see what happened after this node.';
 						}
 						else {
 							action = `<a href="/execution/${activeExecutionId}" target="_blank">View the execution</a> to see what happened after this node.`;
@@ -246,14 +251,6 @@ export const pushConnection = mixins(
 							message: `${action} <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
 							type: 'success',
 							duration: 0,
-							onLinkClick: async (e: HTMLLinkElement) => {
-								if (e.classList.contains('open-settings')) {
-									if (this.$store.getters.isNewWorkflow) {
-										await this.saveAsNewWorkflow();
-									}
-									this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
-								}
-							},
 						});
 					} else if (runDataExecuted.finished !== true) {
 						this.$titleSet(workflow.name as string, 'ERROR');

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -836,7 +836,7 @@
 	"showMessage.ok": "OK",
 	"showMessage.showDetails": "Show Details",
 	"startupError": "Error connecting to n8n",
-	"startupError.message": "Could not connect to server. <a onclick='window.location.reload(false);'>Refresh</a> to try again",
+	"startupError.message": "Could not connect to server. <a data-action='reload'>Refresh</a> to try again",
 	"tagsDropdown.createTag": "Create tag \"{filter}\"",
 	"tagsDropdown.manageTags": "Manage tags",
 	"tagsDropdown.noMatchingTagsExist": "No matching tags exist",

packages/editor-ui/src/utils.ts

@@ -1,4 +1,4 @@
-import sanitizeHtmlModule from 'sanitize-html';
+import xss, { friendlyAttrValue } from 'xss';
 
 export const omit = (keyToOmit: string, { [keyToOmit]: _, ...remainder }) => remainder;
 
@@ -16,10 +16,31 @@ export function isJsonKeyObject(item: unknown): item is {
 }
 
 export function sanitizeHtml(dirtyHtml: string) {
-	return sanitizeHtmlModule(dirtyHtml, {
-		allowedAttributes: {
-			'*': ['href','name', 'target', 'data-*', 'title'],
+	const allowedAttributes = ['href','name', 'target', 'title', 'class', 'id'];
+	const allowedTags = ['p', 'strong', 'b', 'code', 'a', 'br', 'i', 'em', 'small' ];
+
+	const sanitizedHtml = xss(dirtyHtml, {
+		onTagAttr: (tag, name, value) => {
+			if (tag === 'img' && name === 'src') {
+				// Only allow http requests to supported image files from the `static` directory
+				const isImageFile = value.split('#')[0].match(/\.(jpeg|jpg|gif|png|webp)$/) !== null;
+				const isStaticImageFile = isImageFile && value.startsWith('/static/');
+				if (!value.startsWith('https://') && !isStaticImageFile) {
+					return '';
+				}
+			}
+
+			// Allow `allowedAttributes` and all `data-*` attributes
+			if(allowedAttributes.includes(name) || name.startsWith('data-')) return `${name}="${friendlyAttrValue(value)}"`;
+
+			return;
+			// Return nothing, means keep the default handling measure
+		},
+		onTag: (tag) => {
+			if(!allowedTags.includes(tag)) return '';
+			return;
 		},
-		allowedTags: ['p', 'strong', 'b', 'code', 'a', 'br', 'i', 'em', 'small' ],
 	});
+
+	return sanitizedHtml;
 }

packages/editor-ui/src/views/NodeView.vue

@@ -634,7 +634,7 @@ export default mixins(
 				if ((data as IExecutionsSummary).waitTill) {
 					this.$showMessage({
 						title: this.$locale.baseText('nodeView.thisExecutionHasntFinishedYet'),
-						message: `<a onclick="window.location.reload(false);">${this.$locale.baseText('nodeView.refresh')}</a> ${this.$locale.baseText('nodeView.toSeeTheLatestStatus')}.<br/> <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">${this.$locale.baseText('nodeView.moreInfo')}</a>`,
+						message: `<a data-action="reload">${this.$locale.baseText('nodeView.refresh')}</a> ${this.$locale.baseText('nodeView.toSeeTheLatestStatus')}.<br/> <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">${this.$locale.baseText('nodeView.moreInfo')}</a>`,
 						type: 'warning',
 						duration: 0,
 					});