Include iframes within the same session recording

iframes can be merged and stitched into a single session replay video to appear as they would on the user's device.
Configuring iframe capture varies based on the domains from which iframes are loaded.

mergeIframes - Boolean

optional (default - false)

By default, LogRocket will treat iframes as separate tabs in the video replay. If you would like to merge the iframes into a single video, add the following init option to both your main init() call and the iframe init() call.

LogRocket.init(YOUR_APP_ID, {
  mergeIframes: true,
});

Same-origin iframes

Same-origin iframe capture should work out of the box as long as the LogRocket is initialized with mergeIframes set to true in both the parent and child frames. For example, with the parent document loading www.example.com/parent, an iframe on the page which loads www.example.com/child and initializes LogRocket will be merged into the parent's session replay.

Root-origin iframes

Commonly, a parent frame at app.example.com may load a child frame at frame.example.com. In this scenario, the frames share the same root-origin, example.com. To ensure that the child iframe is merged into the parent's recording, initialize LogRocket with a config that includes the following in both frames.

LogRocket.init(YOUR_APP_ID, {
  mergeIframes: true,
  rootHostname: `.example.com`, // substitute with the shared root origin
});

Cross-origin iframes

parentDomain - String

optional (default - null)

childDomains - Array of strings

optional (default - null)

When iframe domains do not share a root origin, specific configuration of the parent and child frames is required at initialization to ensure iframes are correctly merged in session replay. Initialize the parent frame with the following configuration.

LogRocket.init(YOUR_APP_ID, {
  mergeIframes: true,

  // Indicate the origins of all iframes that will be loaded, even those that are same-origin
  childDomains: ['https://example.child_frame_domain.com', 'https://example.parent_window_domain.com'],
});

Initialize LogRocket in frames that will be loaded as child iframes of the parent with the following config.

LogRocket.init(YOUR_APP_ID, {
  mergeIframes: true,

  // Indicate the origin of the window in which the iframe is embedded
  parentDomain: 'https://example.parent_window_domain.com',
});

🚧

The sandbox attribute

The LogRocket SDK relies on being able to access the contents of a rendered iframe in order to record it. If an iframe element is given the sandbox attribute to restrict outside access, the allow-same-origin rule must be applied in order for the iframe to be recorded.

HTML

<iframe sandbox="allow-same-origin">

Cookie policy

The mergeIframes, parentDomain, and childDomains options control how iframe replay data is merged with the parent page through cross-window messaging. If an embedded iframe is mounted and unmounted repeatedly by a host page, or needs to maintain its own LogRocket session cookies in a cross-site iframe context, also see the cookiePolicy option.