fix(editor): Return early in ws message handler if no 'command' keyword is found (#7946)

## Summary
Avoid processing websocket messages not n8n sent (filter on 'command'
keyword)

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

@@ -136,21 +136,22 @@ const onMouseLeave = () => {
 };
 
 const receiveMessage = ({ data }: MessageEvent) => {
-	if (data?.includes('"command"')) {
+	if (!data?.includes?.('"command"')) {
-		try {
+		return;
-			const json = JSON.parse(data);
+	}
-			if (json.command === 'n8nReady') {
+	try {
-				ready.value = true;
+		const json = JSON.parse(data);
-			} else if (json.command === 'openNDV') {
+		if (json.command === 'n8nReady') {
-				nodeViewDetailsOpened.value = true;
+			ready.value = true;
-			} else if (json.command === 'closeNDV') {
+		} else if (json.command === 'openNDV') {
-				nodeViewDetailsOpened.value = false;
+			nodeViewDetailsOpened.value = true;
-			} else if (json.command === 'error') {
+		} else if (json.command === 'closeNDV') {
-				emit('close');
+			nodeViewDetailsOpened.value = false;
-			}
+		} else if (json.command === 'error') {
-		} catch (e) {
+			emit('close');
-			console.error(e);
 		}
+	} catch (e) {
+		console.error(e);
 	}
 };
 const onDocumentScroll = () => {

packages/editor-ui/src/components/__tests__/WorkflowPreview.test.ts

@@ -247,4 +247,18 @@ describe('WorkflowPreview', () => {
 			expect(emitted()).toEqual({});
 		});
 	});
+
+	it('should not do anything if no "command" is sent in the message and the `includes` method cannot be applied to the data', async () => {
+		const { emitted } = renderComponent({
+			pinia,
+			props: {},
+		});
+
+		window.postMessage(null, '*');
+
+		await waitFor(() => {
+			expect(console.error).not.toHaveBeenCalled();
+			expect(emitted()).toEqual({});
+		});
+	});
 });

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

@@ -4312,58 +4312,59 @@ export default defineComponent({
 			}
 		},
 		async onPostMessageReceived(message: MessageEvent) {
-			if (message?.data?.includes('"command"')) {
+			if (!message?.data?.includes?.('"command"')) {
-				try {
+				return;
-					const json = JSON.parse(message.data);
-					if (json && json.command === 'openWorkflow') {
-						try {
-							await this.importWorkflowExact(json);
-							this.isExecutionPreview = false;
-						} catch (e) {
-							if (window.top) {
-								window.top.postMessage(
-									JSON.stringify({
-										command: 'error',
-										message: this.$locale.baseText('openWorkflow.workflowImportError'),
-									}),
-									'*',
-								);
-							}
-							this.showMessage({
-								title: this.$locale.baseText('openWorkflow.workflowImportError'),
-								message: (e as Error).message,
-								type: 'error',
-							});
-						}
-					} else if (json && json.command === 'openExecution') {
-						try {
-							// If this NodeView is used in preview mode (in iframe) it will not have access to the main app store
-							// so everything it needs has to be sent using post messages and passed down to child components
-							this.isProductionExecutionPreview = json.executionMode !== 'manual';
-
-							await this.openExecution(json.executionId);
-							this.isExecutionPreview = true;
-						} catch (e) {
-							if (window.top) {
-								window.top.postMessage(
-									JSON.stringify({
-										command: 'error',
-										message: this.$locale.baseText('nodeView.showError.openExecution.title'),
-									}),
-									'*',
-								);
-							}
-							this.showMessage({
-								title: this.$locale.baseText('nodeView.showError.openExecution.title'),
-								message: (e as Error).message,
-								type: 'error',
-							});
-						}
-					} else if (json?.command === 'setActiveExecution') {
-						this.workflowsStore.activeWorkflowExecution = json.execution;
-					}
-				} catch (e) {}
 			}
+			try {
+				const json = JSON.parse(message.data);
+				if (json && json.command === 'openWorkflow') {
+					try {
+						await this.importWorkflowExact(json);
+						this.isExecutionPreview = false;
+					} catch (e) {
+						if (window.top) {
+							window.top.postMessage(
+								JSON.stringify({
+									command: 'error',
+									message: this.$locale.baseText('openWorkflow.workflowImportError'),
+								}),
+								'*',
+							);
+						}
+						this.showMessage({
+							title: this.$locale.baseText('openWorkflow.workflowImportError'),
+							message: (e as Error).message,
+							type: 'error',
+						});
+					}
+				} else if (json && json.command === 'openExecution') {
+					try {
+						// If this NodeView is used in preview mode (in iframe) it will not have access to the main app store
+						// so everything it needs has to be sent using post messages and passed down to child components
+						this.isProductionExecutionPreview = json.executionMode !== 'manual';
+
+						await this.openExecution(json.executionId);
+						this.isExecutionPreview = true;
+					} catch (e) {
+						if (window.top) {
+							window.top.postMessage(
+								JSON.stringify({
+									command: 'error',
+									message: this.$locale.baseText('nodeView.showError.openExecution.title'),
+								}),
+								'*',
+							);
+						}
+						this.showMessage({
+							title: this.$locale.baseText('nodeView.showError.openExecution.title'),
+							message: (e as Error).message,
+							type: 'error',
+						});
+					}
+				} else if (json?.command === 'setActiveExecution') {
+					this.workflowsStore.activeWorkflowExecution = json.execution;
+				}
+			} catch (e) {}
 		},
 		async onImportWorkflowDataEvent(data: IDataObject) {
 			await this.importWorkflowData(data.data as IWorkflowDataUpdate, 'file');