Core: Fix event source URL based on refId when multiple iframes share the same origin

code/core/src/channels/postmessage/getEventSourceUrl.ts

@@ -1,23 +1,43 @@
 import { logger } from 'storybook/internal/client-logger';
 
-export const getEventSourceUrl = (event: MessageEvent) => {
+/**
+ * When multiple iframes match the event origin (e.g. composed refs from the same origin),
+ * disambiguate by refId: the preview includes refId in the URL, so we pick the iframe whose src
+ * contains that refId. If there is only one candidate, return it.
+ */
+const pickFrameByRefId = (
+  candidates: HTMLIFrameElement[],
+  refId: string | undefined
+): HTMLIFrameElement | undefined => {
+  if (candidates.length === 1) {
+    return candidates[0];
+  }
+  if (candidates.length === 0 || !refId) {
+    return undefined;
+  }
+  return candidates.find((el) =>
+    (el.getAttribute('src') ?? '').includes(`refId=${encodeURIComponent(refId)}`)
+  );
+};
+
+export const getEventSourceUrl = (event: MessageEvent, refId?: string): string | null => {
   const frames: HTMLIFrameElement[] = Array.from(
     document.querySelectorAll('iframe[data-is-storybook]')
   );
   // try to find the originating iframe by matching it's contentWindow
   // This might not be cross-origin safe
-  const [frame, ...remainder] = frames.filter((element) => {
+  const candidates = frames.filter((element) => {
     try {
       return (
         element.contentWindow?.location.origin === (event.source as Window).location.origin &&
         element.contentWindow?.location.pathname === (event.source as Window).location.pathname
       );
-    } catch (err) {
+    } catch {
       // continue
     }
     try {
       return element.contentWindow === event.source;
-    } catch (err) {
+    } catch {
       // continue
     }
 
@@ -30,23 +50,23 @@ export const getEventSourceUrl = (event: MessageEvent) => {
       }
 
       ({ origin } = new URL(src, document.location.toString()));
-    } catch (err) {
+    } catch {
       return false;
     }
     return origin === event.origin;
   });
 
-  const src = frame?.getAttribute('src');
-  if (src && remainder.length === 0) {
+  const src = pickFrameByRefId(candidates, refId)?.getAttribute('src');
+
+  if (src) {
     const { protocol, host, pathname } = new URL(src, document.location.toString());
     return `${protocol}//${host}${pathname}`;
   }
 
-  if (remainder.length > 0) {
-    // If we found multiple matches, there's going to be trouble
+  if (candidates.length > 1) {
+    // Multiple matches and we couldn't disambiguate (e.g. no refId in message)
     logger.error('found multiple candidates for event source');
   }
 
-  // If we found no frames of matches
   return null;
 };

code/core/src/channels/postmessage/index.ts

@@ -212,7 +212,7 @@ export class PostMessageTransport implements ChannelTransport {
         }
 
         event.source =
-          this.config.page === 'preview' ? rawEvent.origin : getEventSourceUrl(rawEvent);
+          this.config.page === 'preview' ? rawEvent.origin : getEventSourceUrl(rawEvent, refId);
 
         if (!event.source) {
           pretty.error(