fix(messaging): Add verification process for the window messaging (#79)

Co-authored-by: Aaron <[email protected]>

packages/messaging/src/__tests__/browser/page.test.ts

@@ -114,6 +114,39 @@ describe.each<
     );
   });
 
+  it('should throw an error if the responder responds with non-serializable data', async () => {
+    interface MessageSchema {
+      test(data: string): { getName: () => string };
+    }
+    const messenger1 = defineTestMessaging<MessageSchema>();
+    const messenger2 = defineTestMessaging<MessageSchema>();
+    const invalidFn = () => 'testUser1';
+    const onMessage = vi.fn().mockReturnValue({ getName: invalidFn });
+
+    messenger2.onMessage('test', onMessage);
+
+    await expect(messenger1.sendMessage('test', 'data', ...sendArgs)).rejects.toThrowError(
+      `Failed to execute 'structuredClone' on 'Window': ${invalidFn.toString()} could not be cloned.`,
+    );
+  });
+
+  it('should throw an error if the sender sends non-serializable data', async () => {
+    interface MessageSchema {
+      test(data: { getName: () => string }): boolean;
+    }
+    const messenger1 = defineTestMessaging<MessageSchema>();
+    const messenger2 = defineTestMessaging<MessageSchema>();
+    const invalidFn = () => 'testUser1';
+
+    messenger2.onMessage('test', () => true);
+
+    await expect(
+      messenger1.sendMessage('test', { getName: invalidFn }, ...sendArgs),
+    ).rejects.toThrowError(
+      `Failed to execute 'structuredClone' on 'Window': ${invalidFn.toString()} could not be cloned.`,
+    );
+  });
+
   it('should be messaging for the same message type between different instances', async () => {
     interface MessageSchema {
       test(data: string): string;

packages/messaging/src/custom-event.ts

@@ -1,6 +1,7 @@
 import { uid } from 'uid';
 import { GenericMessenger, defineGenericMessanging } from './generic';
 import { NamespaceMessagingConfig } from './types';
+import { prepareCustomEventDict } from './utils';
 
 const REQUEST_EVENT = '@webext-core/messaging/custom-events';
 const RESPONSE_EVENT = '@webext-core/messaging/custom-events/response';
@@ -89,8 +90,7 @@ export function defineCustomEventMessaging<
     sendMessage(message) {
       const reqDetail = { message, namespace, instanceId };
       const requestEvent = new CustomEvent(REQUEST_EVENT, {
-        // @ts-expect-error not exist cloneInto types because implemented only in Firefox.
-        detail: typeof cloneInto !== 'undefined' ? cloneInto(reqDetail, window) : reqDetail,
+        detail: prepareCustomEventDict(reqDetail),
       });
       return sendCustomMessage(requestEvent);
     },
@@ -105,15 +105,17 @@ export function defineCustomEventMessaging<
 
         const resDetail = { response, message, instanceId, namespace };
         const responseEvent = new CustomEvent(RESPONSE_EVENT, {
-          // @ts-expect-error not exist cloneInto types because implemented only in Firefox.
-          detail: typeof cloneInto !== 'undefined' ? cloneInto(resDetail, window) : resDetail,
+          detail: prepareCustomEventDict(resDetail),
         });
         window.dispatchEvent(responseEvent);
       };
 
       window.addEventListener(REQUEST_EVENT, requestListener);
       return () => window.removeEventListener(REQUEST_EVENT, requestListener);
     },
+    verifyMessageData(data) {
+      return structuredClone(data);
+    },
   });
 
   return {

packages/messaging/src/generic.ts

@@ -25,6 +25,7 @@ interface GenericMessagingConfig<
       message: Message<TProtocolMap, any> & TMessageExtension,
     ) => void | Promise<{ res: any } | { err: unknown }>,
   ): RemoveListenerCallback;
+  verifyMessageData?<T>(data: T): MaybePromise<T>;
 }
 
 /**
@@ -109,12 +110,13 @@ export function defineGenericMessanging<
       data: TProtocolMap[TType],
       ...args: TSendMessageArgs
     ): Promise<any> {
-      const message: Message<TProtocolMap, TType> = {
+      const _message: Message<TProtocolMap, TType> = {
         id: getNextId(),
         type: type,
         data,
         timestamp: Date.now(),
       };
+      const message = (await config.verifyMessageData?.(_message)) ?? _message;
       config.logger?.debug(`[messaging] sendMessage {id=${message.id}} ─ᐅ`, message, ...args);
 
       const response = await config.sendMessage(message, ...args);
@@ -150,6 +152,9 @@ export function defineGenericMessanging<
 
           const res = listener(message);
           return Promise.resolve(res)
+            .then(res => {
+              return config.verifyMessageData?.(res) ?? res;
+            })
             .then(res => {
               config?.logger?.debug(`[messaging] onMessage {id=${message.id}} ─ᐅ`, { res });
               return { res };

packages/messaging/src/utils.ts

@@ -0,0 +1,10 @@
+/**
+ * @description In firefox, when dispatching events externally from web-extension, it's necessary to clone all properties of the dictionary. ref: https://github.com/aklinker1/webext-core/pull/70#discussion_r1775031410
+ */
+export function prepareCustomEventDict<T>(
+  data: T,
+  options: { targetScope?: object } = { targetScope: window ?? undefined },
+): T {
+  // @ts-expect-error not exist cloneInto types because implemented only in Firefox.
+  return typeof cloneInto !== 'undefined' ? cloneInto(data, options.targetScope) : data;
+}

packages/messaging/src/window.ts

@@ -106,6 +106,9 @@ export function defineWindowMessaging<
       window.addEventListener('message', listener);
       return () => window.removeEventListener('message', listener);
     },
+    verifyMessageData(data) {
+      return structuredClone(data);
+    },
   });
 
   return {