WAL-5344: Harden transport for signers flow (#1282)

* harden transport for signers flow

* changeset

* extract to type

Author: maxisch

.changeset/thin-humans-sort.md

@@ -0,0 +1,6 @@
+---
+"@crossmint/client-sdk-window": patch
+"@crossmint/wallets-sdk": patch
+---
+
+Fix Window Transport Error

packages/client/window/src/index.ts

@@ -3,3 +3,4 @@ export * from "./handshake";
 export type { Transport, SimpleMessageEvent } from "./transport/Transport";
 export type { EventMap } from "./EventEmitter";
 export { generateRandomString } from "./utils/generateRandomString";
+export { SignersWindowTransport } from "./transport/SignersWindowTransport";

packages/client/window/src/transport/SignersWindowTransport.ts

@@ -0,0 +1,23 @@
+import type { SimpleMessageEvent } from "./Transport";
+import { generateRandomString } from "../utils/generateRandomString";
+import { WindowTransport } from "./WindowTransport";
+
+export class SignersWindowTransport extends WindowTransport {
+    addMessageListener(listener: (event: SimpleMessageEvent) => void): string {
+        const wrapped = (event: MessageEvent) => {
+            const sameSource = event.source === this.otherWindow;
+            const originMatches = this.isTargetOrigin(event.origin);
+            if (sameSource && originMatches) {
+                listener({
+                    type: event.type,
+                    data: event.data,
+                } as SimpleMessageEvent);
+            }
+        };
+
+        const id = generateRandomString();
+        window.addEventListener("message", wrapped);
+        this.listeners.set(id, wrapped);
+        return id;
+    }
+}

packages/client/window/src/transport/WindowTransport.ts

@@ -4,11 +4,11 @@ import type { Transport, SimpleMessageEvent } from "./Transport";
 import { generateRandomString } from "../utils/generateRandomString";
 
 export class WindowTransport<OutgoingEvents extends EventMap = EventMap> implements Transport<OutgoingEvents> {
-    private listeners = new Map<string, (event: MessageEvent) => void>();
+    protected listeners = new Map<string, (event: MessageEvent) => void>();
 
     constructor(
-        private otherWindow: Window,
-        private targetOrigin: string | string[]
+        protected otherWindow: Window,
+        protected targetOrigin: string | string[]
     ) {}
 
     send<K extends keyof OutgoingEvents>(message: { event: K; data: z.infer<OutgoingEvents[K]> }): void {

packages/client/window/src/windows/IFrame.ts

@@ -4,6 +4,12 @@ import type { EventMap } from "../EventEmitter";
 import type { EventEmitterWithHandshakeOptions } from "../handshake";
 import { HandshakeParent } from "../handshake/Parent";
 import { WindowTransport } from "../transport/WindowTransport";
+import type { Transport } from "../transport/Transport";
+
+type TransportClassConstructor<OutgoingEvents extends EventMap> = new (
+    otherWindow: Window,
+    targetOrigin: string | string[]
+) => Transport<OutgoingEvents>;
 
 export class IFrameWindow<IncomingEvents extends EventMap, OutgoingEvents extends EventMap> extends HandshakeParent<
     IncomingEvents,
@@ -12,32 +18,35 @@ export class IFrameWindow<IncomingEvents extends EventMap, OutgoingEvents extend
     private constructor(
         public iframe: HTMLIFrameElement,
         targetOrigin: string,
-        options?: EventEmitterWithHandshakeOptions<IncomingEvents, OutgoingEvents>
+        options?: EventEmitterWithHandshakeOptions<IncomingEvents, OutgoingEvents>,
+        TransportClass: TransportClassConstructor<OutgoingEvents> = WindowTransport
     ) {
         const contentWindow = iframe.contentWindow;
         if (!contentWindow) {
             throw new Error("IFrame must have a contentWindow");
         }
-        const transport = new WindowTransport<OutgoingEvents>(contentWindow, targetOrigin);
+        const transport = new TransportClass(contentWindow, targetOrigin);
         super(transport, options);
     }
 
     static async init<IncomingEvents extends EventMap, OutgoingEvents extends EventMap>(
         urlOrExistingIframe: string | HTMLIFrameElement,
-        options?: EventEmitterWithHandshakeOptions<IncomingEvents, OutgoingEvents>
+        options?: EventEmitterWithHandshakeOptions<IncomingEvents, OutgoingEvents>,
+        TransportClass: TransportClassConstructor<OutgoingEvents> = WindowTransport
     ) {
         const iframe =
             typeof urlOrExistingIframe === "string" ? await createIFrame(urlOrExistingIframe) : urlOrExistingIframe;
         const targetOrigin = options?.targetOrigin || urlToOrigin(iframe.src);
-        return new IFrameWindow<IncomingEvents, OutgoingEvents>(iframe, targetOrigin, options);
+        return new IFrameWindow<IncomingEvents, OutgoingEvents>(iframe, targetOrigin, options, TransportClass);
     }
 
     static initExistingIFrame<IncomingEvents extends EventMap, OutgoingEvents extends EventMap>(
         iframe: HTMLIFrameElement,
-        options?: EventEmitterWithHandshakeOptions<IncomingEvents, OutgoingEvents>
+        options?: EventEmitterWithHandshakeOptions<IncomingEvents, OutgoingEvents>,
+        TransportClass: TransportClassConstructor<OutgoingEvents> = WindowTransport
     ) {
         const targetOrigin = options?.targetOrigin || urlToOrigin(iframe.src);
-        return new IFrameWindow<IncomingEvents, OutgoingEvents>(iframe, targetOrigin, options);
+        return new IFrameWindow<IncomingEvents, OutgoingEvents>(iframe, targetOrigin, options, TransportClass);
     }
 }
 

packages/wallets/src/signers/non-custodial/ncs-iframe-manager.ts

@@ -1,4 +1,4 @@
-import { IFrameWindow, type HandshakeParent } from "@crossmint/client-sdk-window";
+import { IFrameWindow, SignersWindowTransport, type HandshakeParent } from "@crossmint/client-sdk-window";
 import { environmentUrlConfig, signerInboundEvents, signerOutboundEvents } from "@crossmint/client-signers";
 import type { APIKeyEnvironmentPrefix } from "@crossmint/common-sdk-base";
 
@@ -20,11 +20,15 @@ export class NcsIframeManager {
         iframeUrl.searchParams.set("targetOrigin", window.location.origin);
 
         const iframeElement = await this.createInvisibleIFrame(iframeUrl.toString());
-        this.handshakeParent = await IFrameWindow.init(iframeElement, {
-            targetOrigin: iframeUrl.origin,
-            incomingEvents: signerOutboundEvents,
-            outgoingEvents: signerInboundEvents,
-        });
+        this.handshakeParent = await IFrameWindow.init(
+            iframeElement,
+            {
+                targetOrigin: iframeUrl.origin,
+                incomingEvents: signerOutboundEvents,
+                outgoingEvents: signerInboundEvents,
+            },
+            SignersWindowTransport
+        );
 
         await this.handshakeParent.handshakeWithChild();
         return this.handshakeParent;