fix(editor): Use BroadcastChannel instead of window.opener for OAuth callback window (#9779)

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -39,6 +39,7 @@
 			:button-label="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
 			:button-title="$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
 			@click="$emit('oauth')"
+			data-test-id="oauth-connect-success-banner"
 		>
 			<template v-if="isGoogleOAuthType" #button>
 				<p
@@ -118,6 +119,7 @@
 			"
 			:is-google-o-auth-type="isGoogleOAuthType"
 			@click="$emit('oauth')"
+			data-test-id="oauth-connect-button"
 		/>
 
 		<n8n-text v-if="isMissingCredentials" color="text-base" size="medium">

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

@@ -1090,20 +1090,17 @@ export default defineComponent({
 
 			const params =
 				'scrollbars=no,resizable=yes,status=no,titlebar=noe,location=no,toolbar=no,menubar=no,width=500,height=700';
-			const oauthPopup = window.open(url, 'OAuth2 Authorization', params);
+			const oauthPopup = window.open(url, 'OAuth Authorization', params);
 
 			this.credentialData = {
 				...this.credentialData,
 				oauthTokenData: null as unknown as CredentialInformation,
 			};
 
+			const oauthChannel = new BroadcastChannel('oauth-callback');
 			const receiveMessage = (event: MessageEvent) => {
-				// // TODO: Add check that it came from n8n
-				// if (event.origin !== 'http://example.org:8080') {
-				// 	return;
-				// }
 				if (event.data === 'success') {
-					window.removeEventListener('message', receiveMessage, false);
+					oauthChannel.removeEventListener('message', receiveMessage);
 
 					// Set some kind of data that status changes.
 					// As data does not get displayed directly it does not matter what data.
@@ -1118,8 +1115,7 @@ export default defineComponent({
 					}
 				}
 			};
-
-			window.addEventListener('message', receiveMessage, false);
+			oauthChannel.addEventListener('message', receiveMessage);
 		},
 		async onAuthTypeChanged(type: string): Promise<void> {
 			if (!this.activeNodeType?.credentials) {