feat: add SR support for maskAllInputs and maskInputOptions (#354)

## Summary

Support additional granular masking configurations on the SDK.

## How did you test this change?

CI + local deploy

<img width="878" height="886" alt="image"
src="https://github.com/user-attachments/assets/20d90754-4a3a-4c5f-8da5-a52815113cec"
/>
<img width="878" height="886" alt="image"
src="https://github.com/user-attachments/assets/d2837aeb-cda5-4550-8f1c-1cf829e0e9f9"
/>


## Are there any deployment considerations?

<!--
 Backend - Do we need to consider migrations or backfilling data?
-->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduces configurable input masking for session replay while
preserving existing defaults.
> 
> - Adds `maskAllInputs` and `maskInputOptions` to
`HighlightClassOptions`/`RecordOptions` and defines `MaskInputOptions`
type
> - New `determineMaskInputOptions` utility computes
`maskAllInputs`/`maskInputOptions` from `privacySetting`, always masking
`password`
> - Wires options into `rrweb.record` in both `client/index.tsx` and
`sdk/record.ts`; minor cleanup with property shorthand
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
09b7cfe. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Vadman97

sdk/highlight-run/src/client/index.tsx

@@ -123,6 +123,7 @@ import { createLog, defaultLogOptions } from './listeners/console-listener'
 import { CustomSampler } from './otel/sampling/CustomSampler'
 import randomUuidV4 from './utils/randomUuidV4'
 import { LDContext } from '@launchdarkly/js-client-sdk'
+import { MaskInputOptions } from './types/record'
 
 export const HighlightWarning = (context: string, msg: any) => {
 	console.warn(`Highlight Warning: (${context}): `, { output: msg })
@@ -141,6 +142,8 @@ export type HighlightClassOptions = {
 	reportConsoleErrors?: boolean
 	consoleMethodsToRecord?: ConsoleMethods[]
 	privacySetting?: PrivacySettingOption
+	maskAllInputs?: boolean
+	maskInputOptions?: MaskInputOptions
 	maskTextClass?: string | RegExp
 	maskTextSelector?: string
 	blockClass?: string | RegExp
@@ -829,6 +832,8 @@ SessionSecureID: ${this.sessionData.sessionSecureID}`,
 
 			const [maskAllInputs, maskInputOptions] = determineMaskInputOptions(
 				this.privacySetting,
+				this.options.maskAllInputs,
+				this.options.maskInputOptions,
 			)
 
 			this._recordStop = record({

sdk/highlight-run/src/client/types/record.ts

@@ -5,6 +5,25 @@ import type {
 	SamplingStrategy,
 } from './types'
 
+export type MaskInputOptions = Partial<{
+	color: boolean
+	date: boolean
+	'datetime-local': boolean
+	email: boolean
+	month: boolean
+	number: boolean
+	range: boolean
+	search: boolean
+	tel: boolean
+	text: boolean
+	time: boolean
+	url: boolean
+	week: boolean
+	textarea: boolean
+	select: boolean
+	password: boolean
+}>
+
 export type RecordOptions = CommonOptions & {
 	/**
 	 * Specifies where the backend of the app lives. If specified, the SDK will attach the
@@ -37,6 +56,16 @@ export type RecordOptions = CommonOptions & {
 	 */
 	privacySetting?: PrivacySettingOption
 
+	/**
+	 * Enable masking all <input/> elements. Only applies if privacySetting is `none`.
+	 */
+	maskAllInputs?: boolean
+
+	/**
+	 * Customize the input element types that are masked. Only applies if privacySetting is `none`.
+	 */
+	maskInputOptions?: MaskInputOptions
+
 	/**
 	 * Customize which elements' text should be masked by specifying a CSS class name or RegExp.
 	 * Default class is 'highlight-mask'.

sdk/highlight-run/src/client/utils/privacy.ts

@@ -1,17 +1,19 @@
-import { MaskInputOptions } from 'rrweb-snapshot'
 import { PrivacySettingOption } from '../types/types'
+import { MaskInputOptions } from '../types/record'
 
 // returns (1) whether all inputs should be masked and (2) which inputs should be masked
 export const determineMaskInputOptions = (
 	privacyPolicy: PrivacySettingOption,
+	maskAllInputs?: boolean,
+	maskInputOptions?: MaskInputOptions,
 ): [maskAllOptions: boolean, maskOptions?: MaskInputOptions] => {
 	switch (privacyPolicy) {
 		case 'strict':
 			return [true, undefined]
 		case 'default':
 			return [true, undefined]
 		case 'none': {
-			return [false, { password: true }]
+			return [!!maskAllInputs, { ...maskInputOptions, password: true }]
 		}
 	}
 }

sdk/highlight-run/src/sdk/record.ts

@@ -602,6 +602,8 @@ SessionSecureID: ${this.sessionData.sessionSecureID}`,
 
 			const [maskAllInputs, maskInputOptions] = determineMaskInputOptions(
 				this.privacySetting,
+				this.options.maskAllInputs,
+				this.options.maskInputOptions,
 			)
 
 			this._recordStop = record({
@@ -613,7 +615,7 @@ SessionSecureID: ${this.sessionData.sessionSecureID}`,
 				recordCrossOriginIframes: this.options.recordCrossOriginIframe,
 				privacySetting: this.privacySetting,
 				maskAllInputs,
-				maskInputOptions: maskInputOptions,
+				maskInputOptions,
 				maskTextClass: this.options.maskTextClass,
 				maskTextSelector: this.options.maskTextSelector,
 				recordCanvas: this.enableCanvasRecording,