feat(v8/replay): Mask srcdoc iframe contents per default (#14779)

Author: chargome

packages/replay-internal/src/util/getPrivacyOptions.ts

@@ -25,7 +25,7 @@ function getOption(selectors: string[], defaultSelectors: string[]): string {
  * Returns privacy related configuration for use in rrweb
  */
 export function getPrivacyOptions({ mask, unmask, block, unblock, ignore }: GetPrivacyOptions): GetPrivacyReturn {
-  const defaultBlockedElements = ['base[href="/"]'];
+  const defaultBlockedElements = ['base', 'iframe[srcdoc]:not([src])'];
 
   const maskSelector = getOption(mask, ['.sentry-mask', '[data-sentry-mask]']);
   const unmaskSelector = getOption(unmask, []);

packages/replay-internal/test/integration/integrationSettings.test.ts

@@ -17,7 +17,9 @@ describe('Integration | integrationSettings', () => {
     it('sets the correct configuration when `blockAllMedia` is disabled', async () => {
       const { replay } = await mockSdk({ replayOptions: { blockAllMedia: false } });
 
-      expect(replay['_recordingOptions'].blockSelector).toBe('.sentry-block,[data-sentry-block],base[href="/"]');
+      expect(replay['_recordingOptions'].blockSelector).toBe(
+        '.sentry-block,[data-sentry-block],base,iframe[srcdoc]:not([src])',
+      );
     });
   });
 

packages/replay-internal/test/integration/rrweb.test.ts

@@ -23,7 +23,7 @@ describe('Integration | rrweb', () => {
     });
     expect(mockRecord.mock.calls[0]?.[0]).toMatchInlineSnapshot(`
       {
-        "blockSelector": ".sentry-block,[data-sentry-block],base[href="/"],img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"]",
+        "blockSelector": ".sentry-block,[data-sentry-block],base,iframe[srcdoc]:not([src]),img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"]",
         "collectFonts": true,
         "emit": [Function],
         "errorHandler": [Function],
@@ -62,7 +62,7 @@ describe('Integration | rrweb', () => {
 
     expect(mockRecord.mock.calls[0]?.[0]).toMatchInlineSnapshot(`
       {
-        "blockSelector": ".sentry-block,[data-sentry-block],base[href="/"],img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"]",
+        "blockSelector": ".sentry-block,[data-sentry-block],base,iframe[srcdoc]:not([src]),img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"]",
         "checkoutEveryNms": 360000,
         "collectFonts": true,
         "emit": [Function],

packages/replay-internal/test/unit/util/getPrivacyOptions.test.ts

@@ -21,7 +21,7 @@ describe('Unit | util | getPrivacyOptions', () => {
       }),
     ).toMatchInlineSnapshot(`
       {
-        "blockSelector": ".custom-block,.sentry-block,[data-sentry-block],base[href="/"]",
+        "blockSelector": ".custom-block,.sentry-block,[data-sentry-block],base,iframe[srcdoc]:not([src])",
         "ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore],input[type="file"]",
         "maskTextSelector": ".custom-mask,.sentry-mask,[data-sentry-mask]",
         "unblockSelector": ".custom-unblock",