fix(editor): Suppress dev server websocket messages in workflow view (#…

…7808)
n8n-io · Nov 29, 2023 · 8a71178 · 8a71178
1 parent 9b0e2d1
commit 8a71178
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 59 deletions.
diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -135,19 +135,21 @@ const onMouseLeave = () => {
 };
 
 const receiveMessage = ({ data }: MessageEvent) => {
-	try {
-		const json = JSON.parse(data);
-		if (json.command === 'n8nReady') {
-			ready.value = true;
-		} else if (json.command === 'openNDV') {
-			nodeViewDetailsOpened.value = true;
-		} else if (json.command === 'closeNDV') {
-			nodeViewDetailsOpened.value = false;
-		} else if (json.command === 'error') {
-			emit('close');
+	if (data?.includes('"command"')) {
+		try {
+			const json = JSON.parse(data);
+			if (json.command === 'n8nReady') {
+				ready.value = true;
+			} else if (json.command === 'openNDV') {
+				nodeViewDetailsOpened.value = true;
+			} else if (json.command === 'closeNDV') {
+				nodeViewDetailsOpened.value = false;
+			} else if (json.command === 'error') {
+				emit('close');
+			}
+		} catch (e) {
+			console.error(e);
 		}
-	} catch (e) {
-		console.error(e);
 	}
 };
 const onDocumentScroll = () => {

diff --git a/packages/editor-ui/src/components/__tests__/WorkflowPreview.test.ts b/packages/editor-ui/src/components/__tests__/WorkflowPreview.test.ts
@@ -12,6 +12,7 @@ const renderComponent = createComponentRenderer(WorkflowPreview);
 let pinia: ReturnType<typeof createPinia>;
 let workflowsStore: ReturnType<typeof useWorkflowsStore>;
 let postMessageSpy: vi.SpyInstance;
+let consoleErrorSpy: vi.SpyInstance;
 
 const sendPostMessageCommand = (command: string) => {
 	window.postMessage(`{"command":"${command}"}`, '*');
@@ -23,6 +24,7 @@ describe('WorkflowPreview', () => {
 		setActivePinia(pinia);
 		workflowsStore = useWorkflowsStore();
 
+		consoleErrorSpy = vi.spyOn(console, 'error');
 		postMessageSpy = vi.fn();
 		Object.defineProperty(HTMLIFrameElement.prototype, 'contentWindow', {
 			writable: true,
@@ -32,6 +34,10 @@ describe('WorkflowPreview', () => {
 		});
 	});
 
+	afterEach(() => {
+		consoleErrorSpy.mockRestore();
+	});
+
 	it('should not call iframe postMessage when it is ready and no workflow or executionId props', async () => {
 		renderComponent({
 			pinia,
@@ -227,4 +233,18 @@ describe('WorkflowPreview', () => {
 			expect(emitted().close).toBeDefined();
 		});
 	});
+
+	it('should not do anything if no "command" is sent in the message', async () => {
+		const { emitted } = renderComponent({
+			pinia,
+			props: {},
+		});
+
+		window.postMessage('commando', '*');
+
+		await waitFor(() => {
+			expect(console.error).not.toHaveBeenCalled();
+			expect(emitted()).toEqual({});
+		});
+	});
 });
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
@@ -4188,56 +4188,58 @@ export default defineComponent({
 			}
 		},
 		async onPostMessageReceived(message: MessageEvent) {
-			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'),
-								}),
-								'*',
-							);
+			if (message?.data?.includes('"command"')) {
+				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',
+							});
 						}
-						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'),
-								}),
-								'*',
-							);
+					} 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',
+							});
 						}
-						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;
 					}
-				} else if (json?.command === 'setActiveExecution') {
-					this.workflowsStore.activeWorkflowExecution = json.execution;
-				}
-			} catch (e) {}
+				} catch (e) {}
+			}
 		},
 		async onImportWorkflowDataEvent(data: IDataObject) {
 			await this.importWorkflowData(data.data as IWorkflowDataUpdate, 'file');