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

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

@@ -136,6 +136,7 @@ const onMouseLeave = () => {
 };
 
 const receiveMessage = ({ data }: MessageEvent) => {
+	if (data?.includes('"command"')) {
 		try {
 			const json = JSON.parse(data);
 			if (json.command === 'n8nReady') {
@@ -150,6 +151,7 @@ const receiveMessage = ({ data }: MessageEvent) => {
 		} catch (e) {
 			console.error(e);
 		}
+	}
 };
 const onDocumentScroll = () => {
 	if (insideIframe.value) {

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({});
+		});
+	});
 });

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

@@ -4260,6 +4260,7 @@ export default defineComponent({
 			}
 		},
 		async onPostMessageReceived(message: MessageEvent) {
+			if (message?.data?.includes('"command"')) {
 				try {
 					const json = JSON.parse(message.data);
 					if (json && json.command === 'openWorkflow') {
@@ -4310,6 +4311,7 @@ export default defineComponent({
 						this.workflowsStore.activeWorkflowExecution = json.execution;
 					}
 				} catch (e) {}
+			}
 		},
 		async onImportWorkflowDataEvent(data: IDataObject) {
 			await this.importWorkflowData(data.data as IWorkflowDataUpdate, 'file');