fix: Catch calls to iframe content document

packages/rrdom/src/diff.ts

@@ -28,6 +28,7 @@ import type {
   RRDocument,
   Mirror,
 } from '.';
+import { getIFrameContentDocument } from './util';
 
 const NAMESPACES: Record<string, string> = {
   svg: 'http://www.w3.org/2000/svg',
@@ -170,8 +171,9 @@ function diffBeforeUpdatingChildren(
       const newRRElement = newTree as IRRElement;
       switch (newRRElement.tagName) {
         case 'IFRAME': {
-          const oldContentDocument = (oldTree as HTMLIFrameElement)
-            .contentDocument;
+          const oldContentDocument = getIFrameContentDocument(
+            oldTree as HTMLIFrameElement,
+          );
           // If the iframe is cross-origin, the contentDocument will be null.
           if (!oldContentDocument) break;
           // IFrame element doesn't have child nodes, so here we update its content document separately.

packages/rrdom/src/index.ts

@@ -32,6 +32,7 @@ import {
   IRRText,
   IRRComment,
 } from './document';
+import { getIFrameContentDocument } from './util';
 
 export class RRDocument extends BaseRRDocumentImpl(RRNode) {
   private UNSERIALIZED_STARTING_ID = -2;
@@ -313,7 +314,7 @@ export function buildFromDom(
     }
 
     if (node.nodeName === 'IFRAME') {
-      const iframeDoc = (node as HTMLIFrameElement).contentDocument;
+      const iframeDoc = getIFrameContentDocument(node as HTMLIFrameElement);
       iframeDoc && walk(iframeDoc, rrNode);
     } else if (
       node.nodeType === NodeType.DOCUMENT_NODE ||
@@ -485,3 +486,4 @@ export { RRNode };
 
 export { diff, createOrGetNode, ReplayerHandler } from './diff';
 export * from './document';
+export { getIFrameContentDocument, getIFrameContentWindow } from './util';

packages/rrdom/src/util.ts

@@ -0,0 +1,27 @@
+/**
+ * Get the content document of an iframe.
+ * Catching errors is necessary because some older browsers block access to the content document of a sandboxed iframe.
+ */
+export function getIFrameContentDocument(iframe?: HTMLIFrameElement) {
+  if (iframe) {
+    try {
+      return iframe.contentDocument;
+    } catch (e) {
+      // noop
+    }
+  }
+}
+
+/**
+ * Get the content window of an iframe.
+ * Catching errors is necessary because some older browsers block access to the content document of a sandboxed iframe.
+ */
+export function getIFrameContentWindow(iframe?: HTMLIFrameElement) {
+  if (iframe) {
+    try {
+      return iframe.contentWindow;
+    } catch (e) {
+      // noop
+    }
+  }
+}

packages/rrweb-snapshot/src/snapshot.ts

@@ -29,6 +29,7 @@
   shouldMaskInput,
   setTimeout,
   clearTimeout,
+  getIframeContentDocument,
 } from './utils';
 
 let _id = 1;
@@ -276,7 +277,7 @@
 export function ignoreAttribute(
   tagName: string,
   name: string,
   _value: unknown,
 ): boolean {
   return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
 }
@@ -513,7 +514,7 @@
   iframeEl.addEventListener('load', listener);
 }
 
 function isStylesheetLoaded(link: HTMLLinkElement) {
   if (!link.getAttribute('href')) return true; // nothing to load
   return link.sheet !== null;
 }
@@ -722,7 +723,7 @@
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
         textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
     } catch (err) {
@@ -829,7 +830,7 @@
     keepIframeSrcFn,
     newlyAddedElement = false,
     rootId,
     maskAllText,
     maskTextClass,
     unmaskTextClass,
     maskTextSelector,
@@ -871,7 +872,7 @@
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -983,10 +984,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
@@ -1046,7 +1047,7 @@
   if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src as string)) {
     // Don't try to access `contentDocument` if iframe is blocked, otherwise it
     // will trigger browser warnings.
-    if (!needBlock && !(n as HTMLIFrameElement).contentDocument) {
+    if (!needBlock && !getIframeContentDocument(n as HTMLIFrameElement)) {
       // we can't record it directly as we can't see into it
       // preserve the src attribute so a decision can be taken at replay time
       attributes.rr_src = attributes.src;
@@ -1384,7 +1385,7 @@
     onceIframeLoaded(
       n as HTMLIFrameElement,
       () => {
-        const iframeDoc = (n as HTMLIFrameElement).contentDocument;
+        const iframeDoc = getIframeContentDocument(n as HTMLIFrameElement);
         if (iframeDoc && onIframeLoad) {
           const serializedIframeNode = serializeNodeWithId(iframeDoc, {
             doc: iframeDoc,

packages/rrweb-snapshot/src/utils.ts

@@ -71,7 +71,7 @@
  * Browsers sometimes incorrectly escape `@import` on `.cssText` statements.
  * This function tries to correct the escaping.
  * more info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
  * @param cssImportRule
  * @returns `cssText` with browser inconsistencies fixed, or null if not applicable.
  */
 export function escapeImportStatement(rule: CSSImportRule): string {
@@ -454,3 +454,17 @@
 ): ReturnType<typeof window.clearTimeout> {
   return getImplementation('clearTimeout')(...rest);
 }
+
+/**
+ * Get the content document of an iframe.
+ * Catching errors is necessary because some older browsers block access to the content document of a sandboxed iframe.
+ */
+export function getIframeContentDocument(iframe?: HTMLIFrameElement) {
+  try {
+    if (iframe) {
+      return iframe.contentDocument;
+    }
+  } catch (e) {
+    // noop
+  }
+}

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

@@ -12,6 +12,7 @@ import type {
   mutationCallBack,
 } from '@sentry-internal/rrweb-types';
 import type { StylesheetManager } from './stylesheet-manager';
+import { getIFrameContentDocument } from '@sentry-internal/rrdom';
 
 export interface IframeManagerInterface {
   crossOriginIframeMirror: CrossOriginIframeMirror;
@@ -109,14 +110,16 @@ export class IframeManager implements IframeManagerInterface {
     });
     this.loadListener?.(iframeEl);
 
+    const iframeDoc = getIFrameContentDocument(iframeEl);
+
     if (
-      iframeEl.contentDocument &&
-      iframeEl.contentDocument.adoptedStyleSheets &&
-      iframeEl.contentDocument.adoptedStyleSheets.length > 0
+      iframeDoc &&
+      iframeDoc.adoptedStyleSheets &&
+      iframeDoc.adoptedStyleSheets.length > 0
     )
       this.stylesheetManager.adoptStyleSheets(
-        iframeEl.contentDocument.adoptedStyleSheets,
-        this.mirror.getId(iframeEl.contentDocument),
+        iframeDoc.adoptedStyleSheets,
+        this.mirror.getId(iframeDoc),
       );
   }
   private handleMessage(message: MessageEvent | CrossOriginIframeMessageEvent) {

packages/rrweb/src/record/mutation.ts

@@ -35,6 +35,7 @@
   getShadowHost,
   closestElementOfNode,
 } from '../utils';
+import { getIFrameContentDocument } from '@sentry-internal/rrdom';
 
 type DoubleLinkedListNode = {
   previous: DoubleLinkedListNode | null;
@@ -386,13 +387,13 @@
     };
 
     while (this.mapRemoves.length) {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
     for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(n.parentNode!)
       ) {
         continue;
       }
@@ -628,7 +629,10 @@
           attributeName === 'src' &&
           !this.keepIframeSrcFn(value as string)
         ) {
-          if (!(target as HTMLIFrameElement).contentDocument) {
+          const iframeDoc = getIFrameContentDocument(
+            target as HTMLIFrameElement,
+          );
+          if (!iframeDoc) {
             // we can't record it directly as we can't see into it
             // preserve the src attribute so a decision can be taken at replay time
             attributeName = 'rr_src';

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -12,6 +12,10 @@ import {
 import { patch, inDom, setTimeout } from '../utils';
 import type { Mirror } from '@sentry-internal/rrweb-snapshot';
 import { isNativeShadowDom } from '@sentry-internal/rrweb-snapshot';
+import {
+  getIFrameContentDocument,
+  getIFrameContentWindow,
+} from '@sentry-internal/rrdom';
 
 type BypassOptions = Omit<
   MutationBufferParam,
@@ -122,15 +126,16 @@ export class ShadowDomManager implements ShadowDomManagerInterface {
    * Monkey patch 'attachShadow' of an IFrameElement to observe newly added shadow doms.
    */
   public observeAttachShadow(iframeElement: HTMLIFrameElement) {
-    if (!iframeElement.contentWindow || !iframeElement.contentDocument) return;
-
+    const iframeDoc = getIFrameContentDocument(iframeElement);
+    const iframeWindow = getIFrameContentWindow(iframeElement);
+    if (!iframeDoc || !iframeWindow) return;
     this.patchAttachShadow(
       (
-        iframeElement.contentWindow as Window & {
+        iframeWindow as Window & {
           Element: { prototype: Element };
         }
       ).Element,
-      iframeElement.contentDocument,
+      iframeDoc,
     );
   }