fix(chrome-devtool): implement sanitizePostMessagePayload to handle unsafe values in post messages (module-federation#4600)

Author: 2heal1

.changeset/fuzzy-geese-wonder.md

@@ -0,0 +1,5 @@
+---
+"@module-federation/devtools": patch
+---
+
+fix(chrome-devtool): Avoid message crashes in devtools by converting functions and other unsafe values into safe placeholders before forwarding module data.

packages/chrome-devtools/__tests__/safe-post-message.spec.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+
+import { sanitizePostMessagePayload } from '../src/utils/chrome/safe-post-message';
+
+describe('sanitizePostMessagePayload', () => {
+  it('replaces functions and unsupported values with safe content', () => {
+    const source = {
+      fn: () => 'ok',
+      nested: {
+        value: 1,
+        handler: function namedHandler() {
+          return true;
+        },
+      },
+      list: [undefined, Symbol('token'), 1n],
+      error: new Error('boom'),
+      regex: /mf/g,
+    };
+
+    expect(sanitizePostMessagePayload(source)).toMatchObject({
+      fn: 'function(){}',
+      nested: {
+        value: 1,
+        handler: 'function(){}',
+      },
+      list: ['[undefined]', 'Symbol(token)', '1'],
+      error: {
+        name: 'Error',
+        message: 'boom',
+      },
+      regex: '/mf/g',
+    });
+  });
+
+  it('handles circular data without throwing', () => {
+    const source: Record<string, unknown> = {
+      name: 'root',
+    };
+    source.self = source;
+    source.map = new Map([['self', source]]);
+    source.set = new Set([source]);
+
+    expect(sanitizePostMessagePayload(source)).toEqual({
+      name: 'root',
+      self: '[circular]',
+      map: [['self', '[circular]']],
+      set: ['[circular]'],
+    });
+  });
+});

packages/chrome-devtools/src/utils/chrome/index.ts

@@ -1,6 +1,7 @@
 import { GlobalModuleInfo } from '@module-federation/sdk';
 import { FormID } from '../../template/constant';
 import { definePropertyGlobalVal } from '../sdk';
+import { sanitizePostMessagePayload } from './safe-post-message';
 
 export * from './storage';
 
@@ -108,8 +109,8 @@ export const getGlobalModuleInfo = async (
 ) => {
   if (typeof window !== 'undefined' && window.__FEDERATION__?.moduleInfo) {
     callback(
-      JSON.parse(
-        JSON.stringify(window.__FEDERATION__?.moduleInfo),
+      sanitizePostMessagePayload(
+        window.__FEDERATION__?.moduleInfo,
       ) as GlobalModuleInfo,
     );
   }
@@ -125,8 +126,8 @@ export const getGlobalModuleInfo = async (
       definePropertyGlobalVal(window, '__FEDERATION__', {});
       definePropertyGlobalVal(window, '__VMOK__', window.__FEDERATION__);
     }
-    window.__FEDERATION__.originModuleInfo = JSON.parse(
-      JSON.stringify(data?.moduleInfo),
+    window.__FEDERATION__.originModuleInfo = sanitizePostMessagePayload(
+      data?.moduleInfo,
     );
     if (data?.updateModule) {
       const moduleIds = Object.keys(window.__FEDERATION__.originModuleInfo);
@@ -145,10 +146,10 @@ export const getGlobalModuleInfo = async (
       }
     }
     if (data?.share) {
-      window.__FEDERATION__.__SHARE__ = data.share;
+      window.__FEDERATION__.__SHARE__ = sanitizePostMessagePayload(data.share);
     }
-    window.__FEDERATION__.moduleInfo = JSON.parse(
-      JSON.stringify(window.__FEDERATION__.originModuleInfo),
+    window.__FEDERATION__.moduleInfo = sanitizePostMessagePayload(
+      window.__FEDERATION__.originModuleInfo,
     );
     console.log('getGlobalModuleInfo window', window.__FEDERATION__);
     callback(window.__FEDERATION__.moduleInfo);

packages/chrome-devtools/src/utils/chrome/post-message-listener.ts

@@ -1,3 +1,5 @@
+import { sanitizePostMessagePayload } from './safe-post-message';
+
 if (window.moduleHandler) {
   window.removeEventListener('message', window.moduleHandler);
 } else {
@@ -10,11 +12,11 @@ if (window.moduleHandler) {
     chrome.runtime
       .sendMessage({
         origin,
-        data: {
+        data: sanitizePostMessagePayload({
           moduleInfo: data.moduleInfo,
           updateModule: data.updateModule,
           share: data.share,
-        },
+        }),
       })
       .catch(() => {
         return false;

packages/chrome-devtools/src/utils/chrome/post-message-start.ts

@@ -1,17 +1,12 @@
+import { sanitizePostMessagePayload } from './safe-post-message';
+
 // The purpose of this script is: the global plug-in injection is very early, the post message sends the message, the devtools receives the message listener is not running, resulting in the initial data is not available
 // To get the initial data, actively get the global variable to send the message
 const moduleInfo = window?.__FEDERATION__?.moduleInfo;
 window.postMessage(
-  {
+  sanitizePostMessagePayload({
     moduleInfo,
-    share: JSON.parse(
-      JSON.stringify(window?.__FEDERATION__?.__SHARE__, (_key, value) => {
-        if (typeof value === 'function') {
-          return 'Function';
-        }
-        return value;
-      }),
-    ),
-  },
+    share: window?.__FEDERATION__?.__SHARE__,
+  }),
   '*',
 );

packages/chrome-devtools/src/utils/chrome/post-message.ts

@@ -2,6 +2,7 @@ import helpers from '@module-federation/runtime/helpers';
 import type { ModuleFederationRuntimePlugin } from '@module-federation/runtime';
 
 import { definePropertyGlobalVal } from '../sdk';
+import { sanitizePostMessagePayload } from './safe-post-message';
 
 type LoadRemoteSnapshotArgs = Parameters<
   NonNullable<ModuleFederationRuntimePlugin['loadRemoteSnapshot']>
@@ -20,10 +21,10 @@ const getModuleInfo = (): ModuleFederationRuntimePlugin => {
 
       if (!options || options.inBrowser) {
         window.postMessage(
-          {
+          sanitizePostMessagePayload({
             moduleInfo: globalSnapshot,
             updateModule: moduleInfo,
-          },
+          }),
           '*',
         );
       }

packages/chrome-devtools/src/utils/chrome/safe-post-message.ts

@@ -0,0 +1,157 @@
+const FUNCTION_PLACEHOLDER = 'function(){}';
+const UNDEFINED_PLACEHOLDER = '[undefined]';
+const CIRCULAR_PLACEHOLDER = '[circular]';
+const NON_SERIALIZABLE_PLACEHOLDER = '[unserializable]';
+
+const toStringTag = (value: unknown) =>
+  Object.prototype.toString.call(value).slice(8, -1);
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+};
+
+const sanitizeValue = (
+  value: unknown,
+  seen: WeakMap<object, unknown>,
+): unknown => {
+  if (
+    value === null ||
+    typeof value === 'string' ||
+    typeof value === 'number'
+  ) {
+    return Number.isNaN(value) ? '[NaN]' : value;
+  }
+
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  if (typeof value === 'function') {
+    return FUNCTION_PLACEHOLDER;
+  }
+
+  if (typeof value === 'undefined') {
+    return UNDEFINED_PLACEHOLDER;
+  }
+
+  if (typeof value === 'bigint' || typeof value === 'symbol') {
+    return String(value);
+  }
+
+  if (!(value instanceof Object)) {
+    return NON_SERIALIZABLE_PLACEHOLDER;
+  }
+
+  if (seen.has(value)) {
+    return CIRCULAR_PLACEHOLDER;
+  }
+
+  if (Array.isArray(value)) {
+    const next: unknown[] = [];
+    seen.set(value, next);
+    value.forEach((item, index) => {
+      next[index] = sanitizeValue(item, seen);
+    });
+    return next;
+  }
+
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+
+  if (value instanceof RegExp) {
+    return value.toString();
+  }
+
+  if (value instanceof Error) {
+    const next = {
+      name: value.name,
+      message: value.message,
+      stack: value.stack || '',
+    };
+    seen.set(value, next);
+    return next;
+  }
+
+  if (value instanceof Map) {
+    const next: unknown[] = [];
+    seen.set(value, next);
+    next.push(
+      ...Array.from(value.entries()).map(([key, item]) => [
+        sanitizeValue(key, seen),
+        sanitizeValue(item, seen),
+      ]),
+    );
+    return next;
+  }
+
+  if (value instanceof Set) {
+    const next: unknown[] = [];
+    seen.set(value, next);
+    next.push(
+      ...Array.from(value.values()).map((item) => sanitizeValue(item, seen)),
+    );
+    return next;
+  }
+
+  if (ArrayBuffer.isView(value)) {
+    return Array.from(new Uint8Array(value.buffer));
+  }
+
+  if (value instanceof ArrayBuffer) {
+    return Array.from(new Uint8Array(value));
+  }
+
+  if (typeof Node !== 'undefined' && value instanceof Node) {
+    return `[${toStringTag(value)}]`;
+  }
+
+  if (typeof Window !== 'undefined' && value instanceof Window) {
+    return '[Window]';
+  }
+
+  if (typeof Document !== 'undefined' && value instanceof Document) {
+    return '[Document]';
+  }
+
+  const next: Record<string, unknown> = {};
+  seen.set(value, next);
+
+  const entries = isPlainObject(value)
+    ? Object.keys(value).map((key) => {
+        try {
+          return [key, value[key]] as const;
+        } catch (_error) {
+          return [key, NON_SERIALIZABLE_PLACEHOLDER] as const;
+        }
+      })
+    : Reflect.ownKeys(value).map((key) => {
+        try {
+          return [
+            String(key),
+            (value as Record<PropertyKey, unknown>)[key],
+          ] as const;
+        } catch (_error) {
+          return [String(key), NON_SERIALIZABLE_PLACEHOLDER] as const;
+        }
+      });
+
+  entries.forEach(([key, item]) => {
+    try {
+      next[key] = sanitizeValue(item, seen);
+    } catch (_error) {
+      next[key] = NON_SERIALIZABLE_PLACEHOLDER;
+    }
+  });
+
+  return next;
+};
+
+export const sanitizePostMessagePayload = <T>(payload: T): T => {
+  return sanitizeValue(payload, new WeakMap<object, unknown>()) as T;
+};