From 7dd52bdf2efbae7f6a7216f1c42cef7386119e8d Mon Sep 17 00:00:00 2001
From: Francesco Novy <francesco.novy@sentry.io>
Date: Thu, 15 Dec 2022 09:17:20 +0100
Subject: [PATCH] fix(replay): Make `maskAllText` selector more specific

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.
---
 packages/replay/src/constants.ts                       |  3 +++
 packages/replay/src/integration.ts                     |  4 ++--
 .../replay/test/unit/index-integrationSettings.test.ts |  7 ++++---
 packages/replay/test/unit/index.test.ts                | 10 ++++++++--
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/replay/src/constants.ts b/packages/replay/src/constants.ts
index 47da014c0e78..467ca0df3436 100644
--- a/packages/replay/src/constants.ts
+++ b/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)';
diff --git a/packages/replay/src/integration.ts b/packages/replay/src/integration.ts
index 97ef5a2eb903..ee5ebe14229a 100644
--- a/packages/replay/src/integration.ts
+++ b/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) {
diff --git a/packages/replay/test/unit/index-integrationSettings.test.ts b/packages/replay/test/unit/index-integrationSettings.test.ts
index bea5deeab9a6..049fb87ae117 100644
--- a/packages/replay/test/unit/index-integrationSettings.test.ts
+++ b/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);
     });
   });
 
diff --git a/packages/replay/test/unit/index.test.ts b/packages/replay/test/unit/index.test.ts
index eda6e10c3b1f..d4f516a515ca 100644
--- a/packages/replay/test/unit/index.test.ts
+++ b/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}",
       }
     `);
   });