fix(replay): Make maskAllText selector more specific (#6544)

Sometimes, we seemed to be masking e.g. content of style tags. This new selector should be more specific to not mask anything that we know is not actually text.

Author: mydea

packages/replay/src/constants.ts

@@ -25,3 +25,6 @@ export const MAX_SESSION_LIFE = 1_800_000; // 30 minutes
  */
 export const DEFAULT_SESSION_SAMPLE_RATE = 0.1;
 export const DEFAULT_ERROR_SAMPLE_RATE = 1.0;
+
+/** The select to use for the `maskAllText` option  */
+export const MASK_ALL_TEXT_SELECTOR = 'body *:not(style,script)';

packages/replay/src/integration.ts

@@ -2,7 +2,7 @@ import type { BrowserClient, BrowserOptions } from '@sentry/browser';
 import { getCurrentHub } from '@sentry/core';
 import { Integration } from '@sentry/types';
 
-import { DEFAULT_ERROR_SAMPLE_RATE, DEFAULT_SESSION_SAMPLE_RATE } from './constants';
+import { DEFAULT_ERROR_SAMPLE_RATE, DEFAULT_SESSION_SAMPLE_RATE, MASK_ALL_TEXT_SELECTOR } from './constants';
 import { ReplayContainer } from './replay';
 import type { RecordingOptions, ReplayConfiguration, ReplayPluginOptions } from './types';
 import { isBrowser } from './util/isBrowser';
@@ -107,7 +107,7 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
       // `maskAllText` is a more user friendly option to configure
       // `maskTextSelector`. This means that all nodes will have their text
       // content masked.
-      this.recordingOptions.maskTextSelector = '*';
+      this.recordingOptions.maskTextSelector = MASK_ALL_TEXT_SELECTOR;
     }
 
     if (this.options.blockAllMedia) {

packages/replay/test/unit/index-integrationSettings.test.ts

@@ -1,3 +1,4 @@
+import { MASK_ALL_TEXT_SELECTOR } from '../../src/constants';
 import { mockSdk } from './../index';
 
 describe('integration settings', () => {
@@ -168,13 +169,13 @@ describe('integration settings', () => {
       const { replay } = await mockSdk({ replayOptions: {} });
 
       // Default is true
-      expect(replay['_recordingOptions'].maskTextSelector).toBe('*');
+      expect(replay['_recordingOptions'].maskTextSelector).toBe(MASK_ALL_TEXT_SELECTOR);
     });
 
     it('works with true', async () => {
       const { replay } = await mockSdk({ replayOptions: { maskAllText: true } });
 
-      expect(replay['_recordingOptions'].maskTextSelector).toBe('*');
+      expect(replay['_recordingOptions'].maskTextSelector).toBe(MASK_ALL_TEXT_SELECTOR);
     });
 
     it('works with false', async () => {
@@ -186,7 +187,7 @@ describe('integration settings', () => {
     it('overwrites custom maskTextSelector option', async () => {
       const { replay } = await mockSdk({ replayOptions: { maskAllText: true, maskTextSelector: '[custom]' } });
 
-      expect(replay['_recordingOptions'].maskTextSelector).toBe('*');
+      expect(replay['_recordingOptions'].maskTextSelector).toBe(MASK_ALL_TEXT_SELECTOR);
     });
   });
 

packages/replay/test/unit/index.test.ts

@@ -1,7 +1,13 @@
 import { getCurrentHub } from '@sentry/core';
 import { EventType } from 'rrweb';
 
-import { MAX_SESSION_LIFE, REPLAY_SESSION_KEY, VISIBILITY_CHANGE_TIMEOUT, WINDOW } from '../../src/constants';
+import {
+  MASK_ALL_TEXT_SELECTOR,
+  MAX_SESSION_LIFE,
+  REPLAY_SESSION_KEY,
+  VISIBILITY_CHANGE_TIMEOUT,
+  WINDOW,
+} from '../../src/constants';
 import { ReplayContainer } from '../../src/replay';
 import type { RecordingEvent } from '../../src/types';
 import { addEvent } from '../../src/util/addEvent';
@@ -39,7 +45,7 @@ describe('Replay with custom mock', () => {
         "ignoreClass": "sentry-test-ignore",
         "maskAllInputs": true,
         "maskTextClass": "sentry-mask",
-        "maskTextSelector": "*",
+        "maskTextSelector": "${MASK_ALL_TEXT_SELECTOR}",
       }
     `);
   });