feat(replay): Add more default block filters (#7233)

Author: lucas-zimerman

packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-chromium.json

@@ -32,9 +32,8 @@
                 "type": 2,
                 "tagName": "link",
                 "attributes": {
-                  "rel": "icon",
-                  "type": "image/png",
-                  "href": "file://assets/icon/favicon.png"
+                  "rr_width": "[0-50]px",
+                  "rr_height": "[0-50]px"
                 },
                 "childNodes": [],
                 "id": 6

packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-firefox.json

@@ -32,9 +32,8 @@
                 "type": 2,
                 "tagName": "link",
                 "attributes": {
-                  "rel": "icon",
-                  "type": "image/png",
-                  "href": "file:///icon/favicon.png"
+                  "rr_width": "[0-50]px",
+                  "rr_height": "[0-50]px"
                 },
                 "childNodes": [],
                 "id": 6

packages/integration-tests/suites/replay/privacyDefault/test.ts-snapshots/privacy-webkit.json

@@ -32,9 +32,8 @@
                 "type": 2,
                 "tagName": "link",
                 "attributes": {
-                  "rel": "icon",
-                  "type": "image/png",
-                  "href": "file://assets/icon/favicon.png"
+                  "rr_width": "[0-50]px",
+                  "rr_height": "[0-50]px"
                 },
                 "childNodes": [],
                 "id": 6

packages/replay/src/integration.ts

@@ -8,7 +8,8 @@ import type { RecordingOptions, ReplayConfiguration, ReplayPluginOptions } from
 import { getPrivacyOptions } from './util/getPrivacyOptions';
 import { isBrowser } from './util/isBrowser';
 
-const MEDIA_SELECTORS = 'img,image,svg,video,object,picture,embed,map,audio';
+const MEDIA_SELECTORS =
+  'img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"]';
 
 let _initialized = false;
 

packages/replay/src/util/getPrivacyOptions.ts

@@ -69,6 +69,8 @@ export function getPrivacyOptions({
   // eslint-disable-next-line deprecation/deprecation
   ignoreClass,
 }: GetPrivacyOptions): GetPrivacyReturn {
+  const defaultBlockedElements = ['base[href="/"]'];
+
   const maskSelector = getOption(mask, ['.sentry-mask', '[data-sentry-mask]'], maskTextClass, maskTextSelector);
   const unmaskSelector = getOption(unmask, ['.sentry-unmask', '[data-sentry-unmask]']);
 
@@ -79,7 +81,12 @@ export function getPrivacyOptions({
     maskInputSelector: maskSelector,
     unmaskInputSelector: unmaskSelector,
 
-    blockSelector: getOption(block, ['.sentry-block', '[data-sentry-block]'], blockClass, blockSelector),
+    blockSelector: getOption(
+      block,
+      ['.sentry-block', '[data-sentry-block]', ...defaultBlockedElements],
+      blockClass,
+      blockSelector,
+    ),
     unblockSelector: getOption(unblock, ['.sentry-unblock', '[data-sentry-unblock]']),
     ignoreSelector: getOption(ignore, ['.sentry-ignore', '[data-sentry-ignore]'], ignoreClass),
   };

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

@@ -9,14 +9,14 @@ 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]');
+      expect(replay['_recordingOptions'].blockSelector).toBe('.sentry-block,[data-sentry-block],base[href="/"]');
     });
 
     it('sets the correct configuration when `blockSelector` is empty and `blockAllMedia` is enabled', async () => {
       const { replay } = await mockSdk({ replayOptions: { blockSelector: '' } });
 
       expect(replay['_recordingOptions'].blockSelector).toMatchInlineSnapshot(
-        '",.sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio"',
+        '",.sentry-block,[data-sentry-block],base[href=\\"/\\"],img,image,svg,video,object,picture,embed,map,audio,link[rel=\\"icon\\"],link[rel=\\"apple-touch-icon\\"]"',
       );
     });
 
@@ -26,7 +26,7 @@ describe('Integration | integrationSettings', () => {
       });
 
       expect(replay['_recordingOptions'].blockSelector).toMatchInlineSnapshot(
-        '"[data-test-blockSelector],.sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio"',
+        '"[data-test-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\\"]"',
       );
     });
   });

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

@@ -17,7 +17,7 @@ describe('Integration | rrweb', () => {
     });
     expect(mockRecord.mock.calls[0][0]).toMatchInlineSnapshot(`
       Object {
-        "blockSelector": ".sentry-block,[data-sentry-block],img,image,svg,video,object,picture,embed,map,audio",
+        "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\\"]",
         "collectFonts": true,
         "emit": [Function],
         "ignoreSelector": ".sentry-test-ignore,.sentry-ignore,[data-sentry-ignore]",

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

@@ -19,7 +19,7 @@ describe('Unit | util | getPrivacyOptions', () => {
       }),
     ).toMatchInlineSnapshot(`
       Object {
-        "blockSelector": ".custom-block,.sentry-block,[data-sentry-block]",
+        "blockSelector": ".custom-block,.sentry-block,[data-sentry-block],base[href=\\"/\\"]",
         "ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore]",
         "maskInputSelector": ".custom-mask,.sentry-mask,[data-sentry-mask]",
         "maskTextSelector": ".custom-mask,.sentry-mask,[data-sentry-mask]",
@@ -47,7 +47,7 @@ describe('Unit | util | getPrivacyOptions', () => {
       }),
     ).toMatchInlineSnapshot(`
       Object {
-        "blockSelector": ".custom-block,.deprecated-block-selector,.sentry-block,[data-sentry-block],.deprecated-block-class",
+        "blockSelector": ".custom-block,.deprecated-block-selector,.sentry-block,[data-sentry-block],base[href=\\"/\\"],.deprecated-block-class",
         "ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore],.deprecated-ignore-class",
         "maskInputSelector": ".custom-mask,.deprecated-mask-selector,.sentry-mask,[data-sentry-mask],.deprecated-mask-class",
         "maskTextSelector": ".custom-mask,.deprecated-mask-selector,.sentry-mask,[data-sentry-mask],.deprecated-mask-class",
@@ -73,7 +73,7 @@ describe('Unit | util | getPrivacyOptions', () => {
     ).toMatchInlineSnapshot(`
       Object {
         "blockClass": /deprecated-block-\\*/,
-        "blockSelector": ".custom-block,.sentry-block,[data-sentry-block]",
+        "blockSelector": ".custom-block,.sentry-block,[data-sentry-block],base[href=\\"/\\"]",
         "ignoreSelector": ".custom-ignore,.sentry-ignore,[data-sentry-ignore]",
         "maskInputSelector": ".custom-mask,.sentry-mask,[data-sentry-mask]",
         "maskTextClass": /deprecated-mask-\\*/,