@spotify-confidence/csr-recorder 0.17.18 → 0.17.20

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.17.20](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.19...csr-recorder-v0.17.20) (2026-09-14)
+
+
+### 🐛 Bug Fixes
+
+* **csr-recorder:** ignore blocked iframe attachments ([#463](https://github.com/spotify/confidence-sdk-js/issues/463)) ([bf549d7](https://github.com/spotify/confidence-sdk-js/commit/bf549d745f62fd280139dbfd00b9e664838c95a7))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @spotify-confidence/csr-common bumped to 0.18.12
+
+## [0.17.19](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.18...csr-recorder-v0.17.19) (2026-09-11)
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @spotify-confidence/csr-common bumped to 0.18.11
+
 ## [0.17.18](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.17...csr-recorder-v0.17.18) (2026-09-09)
 
 

package/dist/index.cjs

@@ -11127,12 +11127,33 @@ const ALL_CONSOLE_LEVELS = [
 	"info"
 ];
 const BLOCKED_ELEMENT_ATTRIBUTE = "data-csr-blocked-element";
-function labelBlockedElement(node) {
+function labelBlockedElement(node, tracker, parentId) {
+	if (node.id !== void 0 && parentId !== void 0) {
+		const previousParentId = tracker.parentIdByNode.get(node.id);
+		if (previousParentId !== void 0 && previousParentId !== parentId) tracker.childIdsByParent.get(previousParentId)?.delete(node.id);
+		tracker.parentIdByNode.set(node.id, parentId);
+		const childIds = tracker.childIdsByParent.get(parentId) ?? /* @__PURE__ */ new Set();
+		childIds.add(node.id);
+		tracker.childIdsByParent.set(parentId, childIds);
+	}
 	if (node.type === 2 && node.tagName !== void 0 && node.attributes !== void 0 && typeof node.attributes.rr_width === "string" && typeof node.attributes.rr_height === "string") {
+		if (node.tagName === "iframe" && node.id !== void 0) tracker.blockedIframeIds.add(node.id);
 		node.attributes[BLOCKED_ELEMENT_ATTRIBUTE] = node.tagName;
 		node.tagName = "div";
 	}
-	node.childNodes?.forEach(labelBlockedElement);
+	node.childNodes?.forEach((child) => labelBlockedElement(child, tracker, node.id ?? parentId));
+}
+function removeSerializedSubtree(rootId, parentId, tracker) {
+	tracker.childIdsByParent.get(parentId)?.delete(rootId);
+	const pendingIds = [rootId];
+	while (pendingIds.length > 0) {
+		const id = pendingIds.pop();
+		const childIds = tracker.childIdsByParent.get(id);
+		if (childIds) pendingIds.push(...childIds);
+		tracker.blockedIframeIds.delete(id);
+		tracker.childIdsByParent.delete(id);
+		tracker.parentIdByNode.delete(id);
+	}
 }
 /**
 * rrweb strips blocked elements down to their dimensions, but retains their
@@ -11140,13 +11161,26 @@ function labelBlockedElement(node) {
 * metadata so players can render a useful placeholder label.
 */
 function blockedElementLabelsPlugin() {
+	const tracker = {
+		blockedIframeIds: /* @__PURE__ */ new Set(),
+		childIdsByParent: /* @__PURE__ */ new Map(),
+		parentIdByNode: /* @__PURE__ */ new Map()
+	};
 	return {
 		name: _spotify_confidence_csr_common.RecordingPluginName.BlockedElementLabels,
 		options: {},
 		observer: () => () => {},
 		eventProcessor: (event) => {
-			if (event.type === EventType.FullSnapshot) labelBlockedElement(event.data.node);
-			else if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.Mutation) event.data.adds.forEach((add) => labelBlockedElement(add.node));
+			if (event.type === EventType.FullSnapshot) {
+				tracker.blockedIframeIds.clear();
+				tracker.childIdsByParent.clear();
+				tracker.parentIdByNode.clear();
+				labelBlockedElement(event.data.node, tracker);
+			} else if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.Mutation) {
+				if (event.data.isAttachIframe) event.data.adds = event.data.adds.filter((add) => !tracker.blockedIframeIds.has(add.parentId));
+				event.data.removes.forEach((remove) => removeSerializedSubtree(remove.id, remove.parentId, tracker));
+				event.data.adds.forEach((add) => labelBlockedElement(add.node, tracker, add.parentId));
+			}
 			return event;
 		}
 	};

package/dist/index.js

@@ -11126,12 +11126,33 @@ const ALL_CONSOLE_LEVELS = [
 	"info"
 ];
 const BLOCKED_ELEMENT_ATTRIBUTE = "data-csr-blocked-element";
-function labelBlockedElement(node) {
+function labelBlockedElement(node, tracker, parentId) {
+	if (node.id !== void 0 && parentId !== void 0) {
+		const previousParentId = tracker.parentIdByNode.get(node.id);
+		if (previousParentId !== void 0 && previousParentId !== parentId) tracker.childIdsByParent.get(previousParentId)?.delete(node.id);
+		tracker.parentIdByNode.set(node.id, parentId);
+		const childIds = tracker.childIdsByParent.get(parentId) ?? /* @__PURE__ */ new Set();
+		childIds.add(node.id);
+		tracker.childIdsByParent.set(parentId, childIds);
+	}
 	if (node.type === 2 && node.tagName !== void 0 && node.attributes !== void 0 && typeof node.attributes.rr_width === "string" && typeof node.attributes.rr_height === "string") {
+		if (node.tagName === "iframe" && node.id !== void 0) tracker.blockedIframeIds.add(node.id);
 		node.attributes[BLOCKED_ELEMENT_ATTRIBUTE] = node.tagName;
 		node.tagName = "div";
 	}
-	node.childNodes?.forEach(labelBlockedElement);
+	node.childNodes?.forEach((child) => labelBlockedElement(child, tracker, node.id ?? parentId));
+}
+function removeSerializedSubtree(rootId, parentId, tracker) {
+	tracker.childIdsByParent.get(parentId)?.delete(rootId);
+	const pendingIds = [rootId];
+	while (pendingIds.length > 0) {
+		const id = pendingIds.pop();
+		const childIds = tracker.childIdsByParent.get(id);
+		if (childIds) pendingIds.push(...childIds);
+		tracker.blockedIframeIds.delete(id);
+		tracker.childIdsByParent.delete(id);
+		tracker.parentIdByNode.delete(id);
+	}
 }
 /**
 * rrweb strips blocked elements down to their dimensions, but retains their
@@ -11139,13 +11160,26 @@ function labelBlockedElement(node) {
 * metadata so players can render a useful placeholder label.
 */
 function blockedElementLabelsPlugin() {
+	const tracker = {
+		blockedIframeIds: /* @__PURE__ */ new Set(),
+		childIdsByParent: /* @__PURE__ */ new Map(),
+		parentIdByNode: /* @__PURE__ */ new Map()
+	};
 	return {
 		name: RecordingPluginName.BlockedElementLabels,
 		options: {},
 		observer: () => () => {},
 		eventProcessor: (event) => {
-			if (event.type === EventType.FullSnapshot) labelBlockedElement(event.data.node);
-			else if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.Mutation) event.data.adds.forEach((add) => labelBlockedElement(add.node));
+			if (event.type === EventType.FullSnapshot) {
+				tracker.blockedIframeIds.clear();
+				tracker.childIdsByParent.clear();
+				tracker.parentIdByNode.clear();
+				labelBlockedElement(event.data.node, tracker);
+			} else if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.Mutation) {
+				if (event.data.isAttachIframe) event.data.adds = event.data.adds.filter((add) => !tracker.blockedIframeIds.has(add.parentId));
+				event.data.removes.forEach((remove) => removeSerializedSubtree(remove.id, remove.parentId, tracker));
+				event.data.adds.forEach((add) => labelBlockedElement(add.node, tracker, add.parentId));
+			}
 			return event;
 		}
 	};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spotify-confidence/csr-recorder",
   "license": "Apache-2.0",
-  "version": "0.17.18",
+  "version": "0.17.20",
   "repository": {
     "type": "git",
     "url": "https://github.com/spotify/confidence-sdk-js.git",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@rrweb/rrweb-plugin-console-record": "^2.0.1",
-    "@spotify-confidence/csr-common": "0.18.10",
+    "@spotify-confidence/csr-common": "0.18.12",
     "rrweb": "^2.0.1"
   },
   "module": "./dist/index.js",

package/src/engine/rrweb-engine.test.ts

@@ -13,6 +13,52 @@ vi.mock('rrweb', async importOriginal => ({
   takeFullSnapshot: (isCheckout: boolean) => takeFullSnapshotSpy(isCheckout),
 }));
 
+function blockedElementLabelsPlugin() {
+  new RrwebEngine().start({}, () => {});
+  return recordSpy.mock.calls[0][0].plugins.find(
+    ({ name }: { name: string }) => name === RecordingPluginName.BlockedElementLabels,
+  );
+}
+
+function fullSnapshotWithNode(node: unknown) {
+  return {
+    type: 2,
+    timestamp: 1,
+    data: {
+      node: {
+        type: 0,
+        id: 1,
+        childNodes: [node],
+      },
+    },
+  };
+}
+
+function fullSnapshotWithIframe(id: number, attributes: Record<string, string>) {
+  return fullSnapshotWithNode({ type: 2, id, tagName: 'iframe', attributes, childNodes: [] });
+}
+
+function attachIframeDocument(parentId: number, childNodes: unknown[] = []) {
+  return {
+    type: 3,
+    timestamp: 2,
+    data: {
+      source: 0,
+      adds: [
+        {
+          parentId,
+          nextId: null,
+          node: { type: 0, id: parentId + 1, childNodes },
+        },
+      ],
+      removes: [],
+      texts: [],
+      attributes: [],
+      isAttachIframe: true,
+    },
+  };
+}
+
 describe('RrwebEngine', () => {
   beforeEach(() => {
     recordSpy.mockClear();
@@ -108,6 +154,97 @@ describe('RrwebEngine', () => {
     });
   });
 
+  it('drops iframe document attachments for blocked iframe placeholders', () => {
+    const plugin = blockedElementLabelsPlugin();
+    plugin.eventProcessor(fullSnapshotWithIframe(2, { rr_width: '640px', rr_height: '360px' }));
+    const attachIframeEvent = attachIframeDocument(2);
+
+    expect(plugin.eventProcessor(attachIframeEvent)).toEqual({
+      ...attachIframeEvent,
+      data: { ...attachIframeEvent.data, adds: [] },
+    });
+  });
+
+  it('keeps iframe document attachments for unblocked iframes', () => {
+    const plugin = blockedElementLabelsPlugin();
+    plugin.eventProcessor(fullSnapshotWithIframe(2, {}));
+    const attachIframeEvent = attachIframeDocument(2);
+    const result = plugin.eventProcessor(attachIframeEvent);
+
+    expect(result.data.adds).toHaveLength(1);
+    expect(result.data.adds[0].parentId).toBe(2);
+  });
+
+  it('stops filtering attachments after a blocked iframe is removed', () => {
+    const plugin = blockedElementLabelsPlugin();
+    plugin.eventProcessor(fullSnapshotWithIframe(2, { rr_width: '640px', rr_height: '360px' }));
+    plugin.eventProcessor({
+      type: 3,
+      timestamp: 2,
+      data: {
+        source: 0,
+        adds: [],
+        removes: [{ parentId: 1, id: 2 }],
+        texts: [],
+        attributes: [],
+      },
+    });
+
+    expect(plugin.eventProcessor(attachIframeDocument(2)).data.adds).toHaveLength(1);
+  });
+
+  it('stops filtering attachments after an ancestor of a blocked iframe is removed', () => {
+    const plugin = blockedElementLabelsPlugin();
+    plugin.eventProcessor(
+      fullSnapshotWithNode({
+        type: 2,
+        id: 2,
+        tagName: 'div',
+        attributes: {},
+        childNodes: [
+          {
+            type: 2,
+            id: 3,
+            tagName: 'iframe',
+            attributes: { rr_width: '640px', rr_height: '360px' },
+            childNodes: [],
+          },
+        ],
+      }),
+    );
+    plugin.eventProcessor({
+      type: 3,
+      timestamp: 2,
+      data: {
+        source: 0,
+        adds: [],
+        removes: [{ parentId: 1, id: 2 }],
+        texts: [],
+        attributes: [],
+      },
+    });
+
+    expect(plugin.eventProcessor(attachIframeDocument(3)).data.adds).toHaveLength(1);
+  });
+
+  it('does not track blocked iframes inside discarded iframe documents', () => {
+    const plugin = blockedElementLabelsPlugin();
+    plugin.eventProcessor(fullSnapshotWithIframe(2, { rr_width: '640px', rr_height: '360px' }));
+    plugin.eventProcessor(
+      attachIframeDocument(2, [
+        {
+          type: 2,
+          id: 4,
+          tagName: 'iframe',
+          attributes: { rr_width: '640px', rr_height: '360px' },
+          childNodes: [],
+        },
+      ]),
+    );
+
+    expect(plugin.eventProcessor(attachIframeDocument(4)).data.adds).toHaveLength(1);
+  });
+
   it('throttles mousemove to 100ms and records only last input value', () => {
     new RrwebEngine().start({}, () => {});
     const opts = recordSpy.mock.calls[0][0];

package/src/engine/rrweb-engine.ts

@@ -13,13 +13,31 @@ type ClickModifiers = Pick<MouseEvent, 'button' | 'altKey' | 'ctrlKey' | 'metaKe
 const BLOCKED_ELEMENT_ATTRIBUTE = 'data-csr-blocked-element';
 
 type SerializedNode = {
+  id?: number;
   type: number;
   tagName?: string;
   attributes?: Record<string, unknown>;
   childNodes?: SerializedNode[];
 };
 
-function labelBlockedElement(node: SerializedNode): void {
+type SerializedNodeTracker = {
+  blockedIframeIds: Set<number>;
+  childIdsByParent: Map<number, Set<number>>;
+  parentIdByNode: Map<number, number>;
+};
+
+function labelBlockedElement(node: SerializedNode, tracker: SerializedNodeTracker, parentId?: number): void {
+  if (node.id !== undefined && parentId !== undefined) {
+    const previousParentId = tracker.parentIdByNode.get(node.id);
+    if (previousParentId !== undefined && previousParentId !== parentId) {
+      tracker.childIdsByParent.get(previousParentId)?.delete(node.id);
+    }
+    tracker.parentIdByNode.set(node.id, parentId);
+    const childIds = tracker.childIdsByParent.get(parentId) ?? new Set<number>();
+    childIds.add(node.id);
+    tracker.childIdsByParent.set(parentId, childIds);
+  }
+
   const isBlockedElement =
     node.type === 2 &&
     node.tagName !== undefined &&
@@ -28,11 +46,28 @@ function labelBlockedElement(node: SerializedNode): void {
     typeof node.attributes.rr_height === 'string';
 
   if (isBlockedElement) {
+    if (node.tagName === 'iframe' && node.id !== undefined) {
+      tracker.blockedIframeIds.add(node.id);
+    }
     node.attributes![BLOCKED_ELEMENT_ATTRIBUTE] = node.tagName;
     node.tagName = 'div';
   }
 
-  node.childNodes?.forEach(labelBlockedElement);
+  node.childNodes?.forEach(child => labelBlockedElement(child, tracker, node.id ?? parentId));
+}
+
+function removeSerializedSubtree(rootId: number, parentId: number, tracker: SerializedNodeTracker): void {
+  tracker.childIdsByParent.get(parentId)?.delete(rootId);
+  const pendingIds = [rootId];
+
+  while (pendingIds.length > 0) {
+    const id = pendingIds.pop()!;
+    const childIds = tracker.childIdsByParent.get(id);
+    if (childIds) pendingIds.push(...childIds);
+    tracker.blockedIframeIds.delete(id);
+    tracker.childIdsByParent.delete(id);
+    tracker.parentIdByNode.delete(id);
+  }
 }
 
 /**
@@ -41,15 +76,28 @@ function labelBlockedElement(node: SerializedNode): void {
  * metadata so players can render a useful placeholder label.
  */
 function blockedElementLabelsPlugin(): RrwebPlugin {
+  const tracker: SerializedNodeTracker = {
+    blockedIframeIds: new Set<number>(),
+    childIdsByParent: new Map<number, Set<number>>(),
+    parentIdByNode: new Map<number, number>(),
+  };
+
   return {
     name: RecordingPluginName.BlockedElementLabels,
     options: {},
     observer: () => () => {},
     eventProcessor: event => {
       if (event.type === EventType.FullSnapshot) {
-        labelBlockedElement(event.data.node as SerializedNode);
+        tracker.blockedIframeIds.clear();
+        tracker.childIdsByParent.clear();
+        tracker.parentIdByNode.clear();
+        labelBlockedElement(event.data.node as SerializedNode, tracker);
       } else if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.Mutation) {
-        event.data.adds.forEach(add => labelBlockedElement(add.node as SerializedNode));
+        if (event.data.isAttachIframe) {
+          event.data.adds = event.data.adds.filter(add => !tracker.blockedIframeIds.has(add.parentId));
+        }
+        event.data.removes.forEach(remove => removeSerializedSubtree(remove.id, remove.parentId, tracker));
+        event.data.adds.forEach(add => labelBlockedElement(add.node as SerializedNode, tracker, add.parentId));
       }
 
       return event;