mixpanel-browser 2.76.0 → 2.77.0

package/dist/rrweb-bundled.js

@@ -9304,14 +9304,7 @@ class MutationBuffer {
       };
       while (this.mapRemoves.length) {
         const removedNode = this.mapRemoves.shift();
-        if (removedNode.nodeName === "IFRAME") {
-          try {
-            this.iframeManager.removeIframe(removedNode);
-          } catch (e2) {
-          }
-        } else {
-          this.stylesheetManager.cleanupStylesheetsForRemovedNode(removedNode);
-        }
+        this.cleanupRemovedNode(removedNode);
         this.mirror.removeNodeFromMap(removedNode);
       }
       for (const n2 of this.movedSet) {
@@ -9620,6 +9613,22 @@ class MutationBuffer {
         }
       }
     });
+    __publicField$1(this, "cleanupRemovedNode", (node2) => {
+      if (node2.nodeName === "IFRAME") {
+        try {
+          this.iframeManager.removeIframe(node2);
+        } catch (e2) {
+        }
+      } else {
+        try {
+          this.stylesheetManager.cleanupStylesheetsForRemovedNode(node2);
+        } catch (e2) {
+        }
+      }
+      node2.childNodes.forEach((child) => {
+        this.cleanupRemovedNode(child);
+      });
+    });
   }
   init(options) {
     [
@@ -11844,6 +11853,35 @@ class ProcessedNodeManager {
   destroy() {
   }
 }
+function toOrigin(url) {
+  try {
+    const origin = new URL(url).origin;
+    return origin !== "null" ? origin : null;
+  } catch {
+    return null;
+  }
+}
+function buildAllowedOriginSet(origins) {
+  if (!Array.isArray(origins) || origins.length === 0) {
+    throw new Error(
+      "[rrweb] allowedIframeOrigins must be a non-empty array of origin strings."
+    );
+  }
+  const set = /* @__PURE__ */ new Set();
+  for (let i2 = 0; i2 < origins.length; i2++) {
+    const entry = origins[i2];
+    if (typeof entry !== "string") {
+      throw new Error(
+        `[rrweb] allowedIframeOrigins[${i2}] must be a string, got ${typeof entry}.`
+      );
+    }
+    const origin = toOrigin(entry);
+    if (origin) {
+      set.add(origin);
+    }
+  }
+  return Object.freeze(set);
+}
 let wrappedEmit;
 let takeFullSnapshot$1;
 let canvasManager;
@@ -11884,6 +11922,7 @@ function record(options = {}) {
     recordDOM = true,
     recordCanvas = false,
     recordCrossOriginIframes = false,
+    allowedIframeOrigins,
     recordAfter = options.recordAfter === "DOMContentLoaded" ? options.recordAfter : "load",
     userTriggeredOnInput = false,
     collectFonts = false,
@@ -11894,6 +11933,13 @@ function record(options = {}) {
     errorHandler: errorHandler2
   } = options;
   registerErrorHandler(errorHandler2);
+  let validatedOrigins;
+  if (recordCrossOriginIframes && allowedIframeOrigins && allowedIframeOrigins.length > 0) {
+    validatedOrigins = buildAllowedOriginSet(allowedIframeOrigins);
+    if (validatedOrigins.size === 0) {
+      validatedOrigins = void 0;
+    }
+  }
   const inEmittingFrame = recordCrossOriginIframes ? window.parent === window : true;
   let passEmitsToParent = false;
   if (!inEmittingFrame) {
@@ -11981,7 +12027,13 @@ function record(options = {}) {
         origin: window.location.origin,
         isCheckout
       };
-      window.parent.postMessage(message, "*");
+      if (validatedOrigins) {
+        for (const targetOrigin of validatedOrigins) {
+          window.parent.postMessage(message, targetOrigin);
+        }
+      } else {
+        window.parent.postMessage(message, "*");
+      }
     }
     if (e2.type === EventType.FullSnapshot) {
       lastFullSnapshotEvent = e2;

package/dist/rrweb-compiled.js

@@ -10695,13 +10695,7 @@ var MutationBuffer = /*#__PURE__*/ function() {
             };
             while(_this.mapRemoves.length){
                 var removedNode = _this.mapRemoves.shift();
-                if (removedNode.nodeName === "IFRAME") {
-                    try {
-                        _this.iframeManager.removeIframe(removedNode);
-                    } catch (e2) {}
-                } else {
-                    _this.stylesheetManager.cleanupStylesheetsForRemovedNode(removedNode);
-                }
+                _this.cleanupRemovedNode(removedNode);
                 _this.mirror.removeNodeFromMap(removedNode);
             }
             for(var _iterator = _create_for_of_iterator_helper_loose(_this.movedSet), _step; !(_step = _iterator()).done;){
@@ -11021,6 +11015,20 @@ var MutationBuffer = /*#__PURE__*/ function() {
                 }
             }
         });
+        __publicField$1(this, "cleanupRemovedNode", function(node2) {
+            if (node2.nodeName === "IFRAME") {
+                try {
+                    _this.iframeManager.removeIframe(node2);
+                } catch (e2) {}
+            } else {
+                try {
+                    _this.stylesheetManager.cleanupStylesheetsForRemovedNode(node2);
+                } catch (e2) {}
+            }
+            node2.childNodes.forEach(function(child) {
+                _this.cleanupRemovedNode(child);
+            });
+        });
     }
     var _proto = MutationBuffer.prototype;
     _proto.init = function init(options) {
@@ -13248,6 +13256,31 @@ var ProcessedNodeManager = /*#__PURE__*/ function() {
     _proto.destroy = function destroy() {};
     return ProcessedNodeManager;
 }();
+function toOrigin(url) {
+    try {
+        var origin = new URL(url).origin;
+        return origin !== "null" ? origin : null;
+    } catch (e) {
+        return null;
+    }
+}
+function buildAllowedOriginSet(origins) {
+    if (!Array.isArray(origins) || origins.length === 0) {
+        throw new Error("[rrweb] allowedIframeOrigins must be a non-empty array of origin strings.");
+    }
+    var set = /* @__PURE__ */ new Set();
+    for(var i2 = 0; i2 < origins.length; i2++){
+        var entry = origins[i2];
+        if (typeof entry !== "string") {
+            throw new Error("[rrweb] allowedIframeOrigins[" + i2 + "] must be a string, got " + (typeof entry === "undefined" ? "undefined" : _type_of(entry)) + ".");
+        }
+        var origin = toOrigin(entry);
+        if (origin) {
+            set.add(origin);
+        }
+    }
+    return Object.freeze(set);
+}
 var wrappedEmit;
 var takeFullSnapshot$1;
 var canvasManager;
@@ -13269,10 +13302,17 @@ try {
 var mirror = createMirror$2();
 function record(options) {
     if (options === void 0) options = {};
-    var emit = options.emit, checkoutEveryNms = options.checkoutEveryNms, checkoutEveryNth = options.checkoutEveryNth, _options_blockClass = options.blockClass, blockClass = _options_blockClass === void 0 ? "rr-block" : _options_blockClass, _options_blockSelector = options.blockSelector, blockSelector = _options_blockSelector === void 0 ? null : _options_blockSelector, _options_ignoreClass = options.ignoreClass, ignoreClass = _options_ignoreClass === void 0 ? "rr-ignore" : _options_ignoreClass, _options_ignoreSelector = options.ignoreSelector, ignoreSelector = _options_ignoreSelector === void 0 ? null : _options_ignoreSelector, _options_maskTextClass = options.maskTextClass, maskTextClass = _options_maskTextClass === void 0 ? "rr-mask" : _options_maskTextClass, _options_maskTextSelector = options.maskTextSelector, maskTextSelector = _options_maskTextSelector === void 0 ? null : _options_maskTextSelector, _options_inlineStylesheet = options.inlineStylesheet, inlineStylesheet = _options_inlineStylesheet === void 0 ? true : _options_inlineStylesheet, maskAllInputs = options.maskAllInputs, _maskInputOptions = options.maskInputOptions, _slimDOMOptions = options.slimDOMOptions, maskInputFn = options.maskInputFn, maskTextFn = options.maskTextFn, hooks = options.hooks, packFn = options.packFn, _options_sampling = options.sampling, sampling = _options_sampling === void 0 ? {} : _options_sampling, _options_dataURLOptions = options.dataURLOptions, dataURLOptions = _options_dataURLOptions === void 0 ? {} : _options_dataURLOptions, mousemoveWait = options.mousemoveWait, _options_recordDOM = options.recordDOM, recordDOM = _options_recordDOM === void 0 ? true : _options_recordDOM, _options_recordCanvas = options.recordCanvas, recordCanvas = _options_recordCanvas === void 0 ? false : _options_recordCanvas, _options_recordCrossOriginIframes = options.recordCrossOriginIframes, recordCrossOriginIframes = _options_recordCrossOriginIframes === void 0 ? false : _options_recordCrossOriginIframes, _options_recordAfter = options.recordAfter, recordAfter = _options_recordAfter === void 0 ? options.recordAfter === "DOMContentLoaded" ? options.recordAfter : "load" : _options_recordAfter, _options_userTriggeredOnInput = options.userTriggeredOnInput, userTriggeredOnInput = _options_userTriggeredOnInput === void 0 ? false : _options_userTriggeredOnInput, _options_collectFonts = options.collectFonts, collectFonts = _options_collectFonts === void 0 ? false : _options_collectFonts, _options_inlineImages = options.inlineImages, inlineImages = _options_inlineImages === void 0 ? false : _options_inlineImages, plugins = options.plugins, _options_keepIframeSrcFn = options.keepIframeSrcFn, keepIframeSrcFn = _options_keepIframeSrcFn === void 0 ? function() {
+    var emit = options.emit, checkoutEveryNms = options.checkoutEveryNms, checkoutEveryNth = options.checkoutEveryNth, _options_blockClass = options.blockClass, blockClass = _options_blockClass === void 0 ? "rr-block" : _options_blockClass, _options_blockSelector = options.blockSelector, blockSelector = _options_blockSelector === void 0 ? null : _options_blockSelector, _options_ignoreClass = options.ignoreClass, ignoreClass = _options_ignoreClass === void 0 ? "rr-ignore" : _options_ignoreClass, _options_ignoreSelector = options.ignoreSelector, ignoreSelector = _options_ignoreSelector === void 0 ? null : _options_ignoreSelector, _options_maskTextClass = options.maskTextClass, maskTextClass = _options_maskTextClass === void 0 ? "rr-mask" : _options_maskTextClass, _options_maskTextSelector = options.maskTextSelector, maskTextSelector = _options_maskTextSelector === void 0 ? null : _options_maskTextSelector, _options_inlineStylesheet = options.inlineStylesheet, inlineStylesheet = _options_inlineStylesheet === void 0 ? true : _options_inlineStylesheet, maskAllInputs = options.maskAllInputs, _maskInputOptions = options.maskInputOptions, _slimDOMOptions = options.slimDOMOptions, maskInputFn = options.maskInputFn, maskTextFn = options.maskTextFn, hooks = options.hooks, packFn = options.packFn, _options_sampling = options.sampling, sampling = _options_sampling === void 0 ? {} : _options_sampling, _options_dataURLOptions = options.dataURLOptions, dataURLOptions = _options_dataURLOptions === void 0 ? {} : _options_dataURLOptions, mousemoveWait = options.mousemoveWait, _options_recordDOM = options.recordDOM, recordDOM = _options_recordDOM === void 0 ? true : _options_recordDOM, _options_recordCanvas = options.recordCanvas, recordCanvas = _options_recordCanvas === void 0 ? false : _options_recordCanvas, _options_recordCrossOriginIframes = options.recordCrossOriginIframes, recordCrossOriginIframes = _options_recordCrossOriginIframes === void 0 ? false : _options_recordCrossOriginIframes, allowedIframeOrigins = options.allowedIframeOrigins, _options_recordAfter = options.recordAfter, recordAfter = _options_recordAfter === void 0 ? options.recordAfter === "DOMContentLoaded" ? options.recordAfter : "load" : _options_recordAfter, _options_userTriggeredOnInput = options.userTriggeredOnInput, userTriggeredOnInput = _options_userTriggeredOnInput === void 0 ? false : _options_userTriggeredOnInput, _options_collectFonts = options.collectFonts, collectFonts = _options_collectFonts === void 0 ? false : _options_collectFonts, _options_inlineImages = options.inlineImages, inlineImages = _options_inlineImages === void 0 ? false : _options_inlineImages, plugins = options.plugins, _options_keepIframeSrcFn = options.keepIframeSrcFn, keepIframeSrcFn = _options_keepIframeSrcFn === void 0 ? function() {
         return false;
     } : _options_keepIframeSrcFn, _options_ignoreCSSAttributes = options.ignoreCSSAttributes, ignoreCSSAttributes = _options_ignoreCSSAttributes === void 0 ? /* @__PURE__ */ new Set([]) : _options_ignoreCSSAttributes, errorHandler2 = options.errorHandler;
     registerErrorHandler(errorHandler2);
+    var validatedOrigins;
+    if (recordCrossOriginIframes && allowedIframeOrigins && allowedIframeOrigins.length > 0) {
+        validatedOrigins = buildAllowedOriginSet(allowedIframeOrigins);
+        if (validatedOrigins.size === 0) {
+            validatedOrigins = void 0;
+        }
+    }
     var inEmittingFrame = recordCrossOriginIframes ? window.parent === window : true;
     var passEmitsToParent = false;
     if (!inEmittingFrame) {
@@ -13364,7 +13404,14 @@ function record(options) {
                 origin: window.location.origin,
                 isCheckout: isCheckout
             };
-            window.parent.postMessage(message, "*");
+            if (validatedOrigins) {
+                for(var _iterator = _create_for_of_iterator_helper_loose(validatedOrigins), _step; !(_step = _iterator()).done;){
+                    var targetOrigin = _step.value;
+                    window.parent.postMessage(message, targetOrigin);
+                }
+            } else {
+                window.parent.postMessage(message, "*");
+            }
         }
         if (e2.type === EventType.FullSnapshot) {
             lastFullSnapshotEvent = e2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.76.0",
+  "version": "2.77.0",
   "description": "The official Mixpanel JavaScript browser client library",
   "main": "dist/mixpanel.cjs.js",
   "module": "dist/mixpanel.module.js",
@@ -91,9 +91,10 @@
     "webpack": "1.12.2"
   },
   "dependencies": {
-    "@mixpanel/rrweb": "2.0.0-alpha.18.3",
-    "@mixpanel/rrweb-plugin-console-record": "2.0.0-alpha.18.3",
-    "@mixpanel/rrweb-utils": "2.0.0-alpha.18.3",
-    "json-logic-js": "2.0.5"
+    "@mixpanel/rrweb": "2.0.0-alpha.18.4",
+    "@mixpanel/rrweb-plugin-console-record": "2.0.0-alpha.18.4",
+    "@mixpanel/rrweb-utils": "2.0.0-alpha.18.4",
+    "json-logic-js": "2.0.5",
+    "@types/json-logic-js": "2.0.5"
   }
 }

package/src/config.js

@@ -1,6 +1,6 @@
 export var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.76.0'
+    LIB_VERSION: '2.77.0'
 };
 
 // Window global names for async modules

package/src/index.d.ts

@@ -252,11 +252,12 @@ export interface Config {
   record_mask_all_inputs: boolean;
   record_min_ms: number;
   record_max_ms: number;
-  record_sessions_percent: number;
+  record_allowed_iframe_origins: string[];
   record_canvas: boolean;
   recording_event_triggers: RecordingEventTriggers;
   record_heatmap_data: boolean;
   remote_settings_mode: RemoteSettingType;
+  record_sessions_percent: number;
   hooks: {
     before_identify?: (new_distinct_id: string) => string | null;
     before_register?: (

package/src/mixpanel-core.js

@@ -64,7 +64,6 @@ var INIT_SNIPPET = 1;
 /** @const */ var SETTING_FALLBACK      = 'fallback';
 /** @const */ var SETTING_DISABLED      = 'disabled';
 
-
 /*
  * Dynamic... constants? Is that an oxymoron?
  */
@@ -149,6 +148,7 @@ var DEFAULT_CONFIG = {
     'batch_request_timeout_ms':          90000,
     'batch_autostart':                   true,
     'hooks':                             {},
+    'record_allowed_iframe_origins':     [],
     'record_block_class':                new RegExp('^(mp-block|fs-exclude|amp-block|rr-block|ph-no-capture)$'),
     'record_block_selector':             'img, video, audio',
     'record_canvas':                     false,

package/src/recorder/session-recording.js

@@ -10,7 +10,7 @@ import { addOptOutCheckMixpanelLib } from '../gdpr-utils';
 import { RequestBatcher } from '../request-batcher';
 
 import { Config } from '../config';
-import { RECORD_ENQUEUE_THROTTLE_MS } from './utils';
+import { RECORD_ENQUEUE_THROTTLE_MS, validateAllowedOrigins } from './utils';
 import { shouldMaskInput, shouldMaskText, getPrivacyConfig } from './masking';
 import { getRecordNetworkPlugin } from './rrweb-network-plugin';
 
@@ -265,6 +265,8 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
         );
     }
 
+    var validatedOrigins = validateAllowedOrigins(this.getConfig('record_allowed_iframe_origins'), logger);
+
     try {
         this._stopRecording = this._rrwebRecord({
             'emit': function (ev) {
@@ -299,6 +301,8 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
             'maskTextSelector': '*',
             'maskInputFn': this._getMaskFn(shouldMaskInput, privacyConfig),
             'maskTextFn': this._getMaskFn(shouldMaskText, privacyConfig),
+            'recordCrossOriginIframes': validatedOrigins.length > 0,
+            'allowedIframeOrigins': validatedOrigins,
             'recordCanvas': this.getConfig('record_canvas'),
             'sampling': {
                 'canvas': 15

package/src/recorder/utils.js

@@ -1,3 +1,5 @@
+import { _ } from '../utils';
+
 /**
  * @param {import('./session-recording').SerializedRecording} serializedRecording
  * @returns {boolean}
@@ -10,7 +12,31 @@ var isRecordingExpired = function(serializedRecording) {
 
 var RECORD_ENQUEUE_THROTTLE_MS = 250;
 
+var validateAllowedOrigins = function(origins, logger) {
+    if (!_.isArray(origins)) {
+        if (origins) {
+            logger.critical('record_allowed_iframe_origins must be an array of origin strings, cross-origin recording will be disabled.');
+        }
+        return [];
+    }
+    var valid = [];
+    for (var i = 0; i < origins.length; i++) {
+        try {
+            var origin = new URL(origins[i]).origin;
+            if (origin === 'null') {
+                logger.critical(origins[i] + ' has an opaque origin. Skipping this entry.');
+                continue;
+            }
+            valid.push(origin);
+        } catch (e) {
+            logger.critical(origins[i] + ' is not a valid origin URL. Skipping this entry.');
+        }
+    }
+    return valid;
+};
+
 export {
     isRecordingExpired,
-    RECORD_ENQUEUE_THROTTLE_MS
+    RECORD_ENQUEUE_THROTTLE_MS,
+    validateAllowedOrigins
 };

package/src/recorder-manager.js

@@ -1,12 +1,18 @@
 /* eslint camelcase: "off" */
+
 import {RECORDER_FILENAME, TARGETING_FILENAME, RECORDER_GLOBAL_NAME} from './config';
-import { _, console, safewrap, safewrapClass } from './utils';
+import { _, console, console_with_prefix, safewrap, safewrapClass } from './utils';
 import { window } from './window';
 import { Promise } from './promise-polyfill';
 import { IDBStorageWrapper, RECORDING_REGISTRY_STORE_NAME } from './storage/indexed-db';
-import { isRecordingExpired } from './recorder/utils';
+import { isRecordingExpired, validateAllowedOrigins } from './recorder/utils';
 import { getTargetingPromise } from './targeting/loader';
 
+var logger = console_with_prefix('recorder');
+
+var IFRAME_HANDSHAKE_REQUEST  = 'mp_iframe_handshake_request';
+var IFRAME_HANDSHAKE_RESPONSE = 'mp_iframe_handshake_response';
+
 
 /**
  * RecorderManager: manages session recording initialization, lifecycle and state
@@ -27,6 +33,8 @@ var RecorderManager = function(initOptions) {
     this.libBasePath = initOptions.libBasePath;
 
     this._recorder = null;
+    this._parentReplayId = null;
+    this._parentFrameRetryInterval = null;
 };
 
 RecorderManager.prototype.shouldLoadRecorder = function() {
@@ -80,6 +88,22 @@ RecorderManager.prototype.checkAndStartSessionRecording = function(force_start,
         }, this));
     }, this);
 
+    // Cross-origin iframe handling
+    var allowedOrigins = validateAllowedOrigins(this.getMpConfig('record_allowed_iframe_origins'), logger);
+    var isCrossOriginRecordingEnabled = allowedOrigins.length > 0;
+
+    if (isCrossOriginRecordingEnabled) {
+        // listen for handshake requests from their own child iframes (including nested)
+        this._setupParentFrameListener(allowedOrigins);
+
+        if (window.parent !== window) {
+            // also wait for parent's replay ID
+            this._setupChildFrameListener(allowedOrigins, loadRecorder);
+            this._sendParentFrameRequestWithRetry(allowedOrigins);
+            return Promise.resolve();
+        }
+    }
+
     /**
      * If the user is sampled or start_session_recording is called, we always load the recorder since it's guaranteed a recording should start.
      * Otherwise, if the recording registry has any records then it's likely there's a recording in progress or orphaned data that needs to be flushed.
@@ -199,6 +223,10 @@ RecorderManager.prototype.getSessionReplayUrl = function() {
 };
 
 RecorderManager.prototype.getSessionReplayId = function() {
+    // Child iframe uses parent's replay ID
+    if (this._parentReplayId) {
+        return this._parentReplayId;
+    }
     var replay_id = null;
     if (this._recorder) {
         replay_id = this._recorder['replayId'];
@@ -211,6 +239,86 @@ RecorderManager.prototype.getRecorder = function() {
     return this._recorder;
 };
 
+RecorderManager.prototype._setupChildFrameListener = function(allowedOrigins, loadRecorder) {
+    if (this._childFrameMessageHandler) {
+        return;
+    }
+    var self = this;
+    this._childFrameMessageHandler = function(event) {
+        if (allowedOrigins.indexOf(event.origin) === -1) return;
+        var data = event.data;
+        if (data && data['type'] === IFRAME_HANDSHAKE_RESPONSE && data['token'] === self.getMpConfig('token') && data['replayId']) {
+            self._parentReplayId = data['replayId'];
+            if (data['distinctId']) {
+                self.mixpanelInstance['identify'](data['distinctId']);
+            }
+            self._parentFrameRetryActive = false;
+            window.removeEventListener('message', self._childFrameMessageHandler);
+            self._childFrameMessageHandler = null;
+            loadRecorder(true);
+        }
+    };
+    window.addEventListener('message', this._childFrameMessageHandler);
+};
+
+RecorderManager.prototype._sendParentFrameRequest = function(allowedOrigins) {
+    var message = {};
+    message['type'] = IFRAME_HANDSHAKE_REQUEST;
+    message['token'] = this.getMpConfig('token');
+    for (var i = 0; i < allowedOrigins.length; i++) {
+        try {
+            window.parent.postMessage(message, allowedOrigins[i]);
+        } catch (e) {
+            // origin mismatch - ignore
+        }
+    }
+};
+
+RecorderManager.prototype._sendParentFrameRequestWithRetry = function(allowedOrigins) {
+    var self = this;
+    var maxRetries = 10;
+    var retryCount = 0;
+    var delay = 50;
+    this._parentFrameRetryActive = true;
+
+    this._sendParentFrameRequest(allowedOrigins);
+
+    function scheduleRetry() {
+        setTimeout(function() {
+            if (!self._parentFrameRetryActive || self._parentReplayId || ++retryCount >= maxRetries) {
+                return;
+            }
+            self._sendParentFrameRequest(allowedOrigins);
+            delay *= 2;
+            scheduleRetry();
+        }, delay);
+    }
+    scheduleRetry();
+};
+
+RecorderManager.prototype._setupParentFrameListener = function(allowedOrigins) {
+    if (this._parentFrameMessageHandler) {
+        return;
+    }
+    var self = this;
+    this._parentFrameMessageHandler = function(event) {
+        if (allowedOrigins.indexOf(event.origin) === -1) return;
+        var data = event.data;
+        if (data && data['type'] === IFRAME_HANDSHAKE_REQUEST && data['token'] === self.getMpConfig('token')) {
+            var replayId = self.getSessionReplayId();
+            if (replayId) {
+                var response = {};
+                response['type'] = IFRAME_HANDSHAKE_RESPONSE;
+                response['token'] = self.getMpConfig('token');
+                response['replayId'] = replayId;
+                response['distinctId'] = self.getDistinctId();
+                event.source.postMessage(response, event.origin);
+            }
+        }
+    };
+    window.addEventListener('message', this._parentFrameMessageHandler);
+};
+
 safewrapClass(RecorderManager);
 
 export { RecorderManager };

package/testServer.js

@@ -3,6 +3,7 @@
 const express      = require('express');
 const cookieParser = require('cookie-parser');
 const logger       = require('morgan');
+const { PARENT_PORT, CHILD_PORT } = require('./tests/browser/test-ports');
 
 const app = express();
 
@@ -119,8 +120,20 @@ for (const [suiteId, suite] of Object.entries(TEST_SUITES)) {
             testUrl: suite.testUrl
         });
     });
+
+    // Cross-origin child iframe page for session recording tests
+    app.get('/tests/new/' + suiteId + '-cross-origin-page', function(req, res) {
+        res.render('cross-origin-page.pug', {
+            testUrl: './static/build/test/browser/cross-origin-page.js'
+        });
+    });
 }
 
-const server = app.listen(3001, function () {
+const server = app.listen(PARENT_PORT, function () {
     console.log(`Mixpanel test app listening on port ${server.address().port}`);
 });
+
+// Second port for cross-origin iframe tests
+const server2 = app.listen(CHILD_PORT, function () {
+    console.log(`Mixpanel cross-origin test server listening on port ${server2.address().port}`);
+});