fix: Session Replay text masking for whitespace (#1416)

Author: ptang-nr

src/features/session_replay/shared/recorder.js

@@ -11,7 +11,7 @@ import { stylesheetEvaluator } from './stylesheet-evaluator'
 import { handle } from '../../../common/event-emitter/handle'
 import { SUPPORTABILITY_METRIC_CHANNEL } from '../../metrics/constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
-import { buildNRMetaNode } from './utils'
+import { buildNRMetaNode, customMasker } from './utils'
 import { IDEAL_PAYLOAD_SIZE } from '../../../common/constants/agent-constants'
 import { AggregateBase } from '../../utils/aggregate-base'
 
@@ -78,14 +78,7 @@ export class Recorder {
   startRecording () {
     this.recording = true
     const { block_class, ignore_class, mask_text_class, block_selector, mask_input_options, mask_text_selector, mask_all_inputs, inline_images, collect_fonts } = this.parent.agentRef.init.session_replay
-    const customMasker = (text, element) => {
-      try {
-        if (typeof element?.type === 'string' && element.type.toLowerCase() !== 'password' && (element?.dataset?.nrUnmask !== undefined || element?.classList?.contains('nr-unmask'))) return text
-      } catch (err) {
-        // likely an element was passed to this handler that was invalid and was missing attributes or methods
-      }
-      return '*'.repeat(text?.length || 0)
-    }
+
     // set up rrweb configurations for maximum privacy --
     // https://newrelic.atlassian.net/wiki/spaces/O11Y/pages/2792293280/2023+02+28+Browser+-+Session+Replay#Configuration-options
     const stop = recorder({

src/features/session_replay/shared/utils.js

@@ -28,3 +28,15 @@ export function buildNRMetaNode (timestamp, timeKeeper) {
     originTimeDiff: Math.floor(originTime - timeKeeper.correctedOriginTime)
   }
 }
+
+export function customMasker (text, element) {
+  try {
+    if (typeof element?.type === 'string') {
+      if (element.type.toLowerCase() === 'password') return '*'.repeat(text?.length || 0)
+      if (element?.dataset?.nrUnmask !== undefined || element?.classList?.contains('nr-unmask')) return text
+    }
+  } catch (err) {
+    // likely an element was passed to this handler that was invalid and was missing attributes or methods
+  }
+  return typeof text === 'string' ? text.replace(/[\S]/g, '*') : '*'.repeat(text?.length || 0)
+}

tests/specs/session-replay/rrweb-configuration.e2e.js

@@ -84,7 +84,7 @@ describe('RRWeb Configuration', () => {
   })
 
   describe('mask_text_selector', () => {
-    it('mask_text_selector: "*" should convert all text to *', async () => {
+    it('mask_text_selector: "*" should convert text to * and leave whitespace-only text as-is', async () => {
       await Promise.all([
         sessionReplaysCapture.waitForResult({ totalCount: 1 }),
         browser.url(await browser.testHandle.assetURL('rrweb-instrumented.html', srConfig({ session_replay: { mask_all_inputs: false } })))
@@ -95,7 +95,15 @@ describe('RRWeb Configuration', () => {
       expect(sessionReplaysHarvests.length).toBeGreaterThan(1)
       expect(decodeAttributes(sessionReplaysHarvests[0].request.query.attributes).hasSnapshot).toEqual(true)
 
-      const testNodes = JSONPath({ path: '$.[*].request.body.[?(!!@ && @.type===3 && !!@.textContent && ![\'script\',\'link\',\'style\'].includes(@parent.tagName))]', json: sessionReplaysHarvests })
+      // note: we need to leave text nodes containing only whitespace as-is to avoid adding extraneous '*'
+      const whitespaceOnlyNodes = JSONPath({ path: '$.[*].request.body.[?(!!@ && @.type===3 && !!@.textContent && @.textContent.match(/^\\s+$/) && ![\'script\',\'link\',\'style\'].includes(@parent.tagName))]', json: sessionReplaysHarvests })
+      expect(whitespaceOnlyNodes.length).toBeGreaterThan(0)
+
+      whitespaceOnlyNodes.forEach(node => {
+        expect(node.textContent).toMatch(/\s+/)
+      })
+
+      const testNodes = JSONPath({ path: '$.[*].request.body.[?(!!@ && @.type===3 && !!@.textContent && @.textContent.match(/\\S+/) && ![\'script\',\'link\',\'style\'].includes(@parent.tagName))]', json: sessionReplaysHarvests })
       expect(testNodes.length).toBeGreaterThan(0)
 
       testNodes.forEach(node => {

tests/unit/features/session_replay/shared/utils.test.js

@@ -98,3 +98,52 @@ describe('buildNRMetaNode', () => {
     expect(metadata.correctedTimestamp).toEqual(expected)
   })
 })
+
+describe('customMasker', () => {
+  test('should return input text as masked when the element is a non-password field and not decorated with unmask option', async () => {
+    const text = 'foobar'
+    const element = { type: 'string' }
+
+    expect(sessionReplaySharedUtils.customMasker(text, element)).toEqual('******')
+  })
+
+  // NR-739491 - fixes issue where whitespace was masked, pushing layout/styling out-of-place
+  test('should return input text as-is when the input text is whitespace and the element is a non-password field and not decorated with unmask option', async () => {
+    const text = '   \n   '
+    const element = { type: 'string' }
+
+    expect(sessionReplaySharedUtils.customMasker(text, element)).toEqual('   \n   ')
+  })
+
+  test('should return input text as masked when the element is a password field', async () => {
+    const text = 'foobar'
+    const element = { type: 'password' }
+
+    expect(sessionReplaySharedUtils.customMasker(text, element)).toEqual('******')
+  })
+
+  test('should return input text as masked when the input text is whitespace and the element is a password field', async () => {
+    const text = '   \n   '
+    const element = { type: 'password' }
+
+    expect(sessionReplaySharedUtils.customMasker(text, element)).toEqual('*******')
+  })
+
+  test('should return input text as-is when the element is a non-password field decorated with unmask option', async () => {
+    const text = 'foobar'
+    const element = { type: 'string', dataset: { nrUnmask: true } }
+    expect(sessionReplaySharedUtils.customMasker(text, element)).toEqual('foobar')
+
+    const element2 = { type: 'string', classList: { contains: () => true } }
+    expect(sessionReplaySharedUtils.customMasker(text, element2)).toEqual('foobar')
+  })
+
+  test('should return input text as-is when input text is whitespace and the element is a non-password field decorated with unmask option', async () => {
+    const text = '   \n   '
+    const element = { type: 'string', dataset: { nrUnmask: true } }
+    expect(sessionReplaySharedUtils.customMasker(text, element)).toEqual('   \n   ')
+
+    const element2 = { type: 'string', classList: { contains: () => true } }
+    expect(sessionReplaySharedUtils.customMasker(text, element2)).toEqual('   \n   ')
+  })
+})