Fix cross origin iframe bugs

.github/workflows/ci-cd.yml

@@ -30,7 +30,7 @@ jobs:
         run: yarn turbo run check-types
 
       - name: Run tests
-        run: xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
+        run: PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
 
       - name: Upload diff images to GitHub
         uses: actions/upload-artifact@v3

packages/rrweb/rollup.config.js

@@ -214,6 +214,11 @@ if (process.env.BROWSER_ONLY) {
       name: 'rrweb',
       pathFn: (p) => p,
     },
+    {
+      input: './src/entries/all.ts',
+      name: 'rrweb',
+      pathFn: toAllPath,
+    },
     {
       input: './src/plugins/console/record/index.ts',
       name: 'rrwebConsoleRecord',

packages/rrweb/src/record/iframe-manager.ts

@@ -83,24 +83,30 @@ export class IframeManager {
       );
   }
   private handleMessage(message: MessageEvent | CrossOriginIframeMessageEvent) {
-    if ((message as CrossOriginIframeMessageEvent).data.type === 'rrweb') {
-      const iframeSourceWindow = message.source;
-      if (!iframeSourceWindow) return;
+    const crossOriginMessageEvent = message as CrossOriginIframeMessageEvent;
+    if (
+      crossOriginMessageEvent.data.type !== 'rrweb' ||
+      // To filter out the rrweb messages which are forwarded by some sites.
+      crossOriginMessageEvent.origin !== crossOriginMessageEvent.data.origin
+    )
+      return;
 
-      const iframeEl = this.crossOriginIframeMap.get(message.source);
-      if (!iframeEl) return;
+    const iframeSourceWindow = message.source;
+    if (!iframeSourceWindow) return;
 
-      const transformedEvent = this.transformCrossOriginEvent(
-        iframeEl,
-        (message as CrossOriginIframeMessageEvent).data.event,
-      );
+    const iframeEl = this.crossOriginIframeMap.get(message.source);
+    if (!iframeEl) return;
 
-      if (transformedEvent)
-        this.wrappedEmit(
-          transformedEvent,
-          (message as CrossOriginIframeMessageEvent).data.isCheckout,
-        );
-    }
+    const transformedEvent = this.transformCrossOriginEvent(
+      iframeEl,
+      crossOriginMessageEvent.data.event,
+    );
+
+    if (transformedEvent)
+      this.wrappedEmit(
+        transformedEvent,
+        crossOriginMessageEvent.data.isCheckout,
+      );
   }
 
   private transformCrossOriginEvent(

packages/rrweb/src/record/index.ts

@@ -165,7 +165,11 @@ function record<T = eventWithTime>(
         e = plugin.eventProcessor(e);
       }
     }
-    if (packFn) {
+    if (
+      packFn &&
+      // Disable packing events which will be emitted to parent frames.
+      !passEmitsToParent
+    ) {
       e = (packFn(e) as unknown) as eventWithTime;
     }
     return (e as unknown) as T;
@@ -190,6 +194,7 @@ function record<T = eventWithTime>(
       const message: CrossOriginIframeMessageEventContent<T> = {
         type: 'rrweb',
         event: eventProcessor(e),
+        origin: window.location.origin,
         isCheckout,
       };
       window.parent.postMessage(message, '*');

packages/rrweb/src/types.ts

@@ -200,6 +200,8 @@ declare global {
 export type CrossOriginIframeMessageEventContent<T = eventWithTime> = {
   type: 'rrweb';
   event: T;
+  // The origin of the iframe which originally emits this message. It is used to check the integrity of message and to filter out the rrweb messages which are forwarded by some sites.
+  origin: string;
   isCheckout?: boolean;
 };
 export type CrossOriginIframeMessageEvent = MessageEvent<CrossOriginIframeMessageEventContent>;