rrweb sends message to cross-origin iframe to force snapshot

pendo-io · May 1, 2024 · debf898 · debf898
1 parent f1e6a51
commit debf898
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/.changeset/rotten-squids-run.md b/.changeset/rotten-squids-run.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+rrweb sends message to cross-origin iframe to force snapshot
diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts
@@ -21,6 +21,7 @@ export class IframeManager {
   private mirror: Mirror;
   private mutationCb: mutationCallBack;
   private wrappedEmit: (e: eventWithoutTime, isCheckout?: boolean) => void;
+  private takeFullSnapshot: (isCheckout?: boolean) => void;
   private loadListener?: (iframeEl: HTMLIFrameElement) => unknown;
   private stylesheetManager: StylesheetManager;
   private recordCrossOriginIframes: boolean;
@@ -31,9 +32,11 @@ export class IframeManager {
     stylesheetManager: StylesheetManager;
     recordCrossOriginIframes: boolean;
     wrappedEmit: (e: eventWithoutTime, isCheckout?: boolean) => void;
+    takeFullSnapshot: (isCheckout?: boolean) => void;
   }) {
     this.mutationCb = options.mutationCb;
     this.wrappedEmit = options.wrappedEmit;
+    this.takeFullSnapshot = options.takeFullSnapshot;
     this.stylesheetManager = options.stylesheetManager;
     this.recordCrossOriginIframes = options.recordCrossOriginIframes;
     this.crossOriginIframeStyleMirror = new CrossOriginIframeMirror(
@@ -51,6 +54,16 @@ export class IframeManager {
     this.iframes.set(iframeEl, true);
     if (iframeEl.contentWindow)
       this.crossOriginIframeMap.set(iframeEl.contentWindow, iframeEl);
+
+    if (!iframeEl.contentDocument && iframeEl.contentWindow)
+      iframeEl.contentWindow.postMessage(
+        {
+          type: 'rrweb',
+          origin: window.location.origin,
+          snapshot: true,
+        },
+        '*',
+      );
   }
 
   public addLoadListener(cb: (iframeEl: HTMLIFrameElement) => unknown) {
@@ -95,10 +108,21 @@ export class IframeManager {
     )
       return;
 
-    const iframeSourceWindow = message.source;
+    const iframeSourceWindow = crossOriginMessageEvent.source;
     if (!iframeSourceWindow) return;
 
-    const iframeEl = this.crossOriginIframeMap.get(message.source);
+    if (
+      iframeSourceWindow == window.parent &&
+      window != window.parent &&
+      crossOriginMessageEvent.data.snapshot
+    ) {
+      this.takeFullSnapshot();
+      return;
+    }
+
+    const iframeEl = this.crossOriginIframeMap.get(
+      crossOriginMessageEvent.source,
+    );
     if (!iframeEl) return;
 
     const transformedEvent = this.transformCrossOriginEvent(

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -278,6 +278,7 @@ function record<T = eventWithTime>(
     stylesheetManager: stylesheetManager,
     recordCrossOriginIframes,
     wrappedEmit,
+    takeFullSnapshot,
   });
 
   /**

diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
@@ -216,6 +216,7 @@ export type CrossOriginIframeMessageEventContent<T = eventWithTime> = {
   // 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;
+  snapshot?: boolean;
 };
 export type CrossOriginIframeMessageEvent =
   MessageEvent<CrossOriginIframeMessageEventContent>;