apply text mask settings to inputs #1096

Author: mdellanoce

packages/rrweb-snapshot/src/snapshot.ts

@@ -554,6 +554,11 @@ function serializeNode(
         keepIframeSrcFn,
         newlyAddedElement,
         rootId,
+        maskAllText,
+        maskTextClass,
+        unmaskTextClass,
+        maskTextSelector,
+        unmaskTextSelector,
       });
     case n.TEXT_NODE:
       return serializeTextNode(n as Text, {
@@ -683,6 +688,11 @@ function serializeElementNode(
      */
     newlyAddedElement?: boolean;
     rootId: number | undefined;
+    maskAllText: boolean;
+    maskTextClass: string | RegExp;
+    unmaskTextClass: string | RegExp;
+    maskTextSelector: string | null;
+    unmaskTextSelector: string | null;
   },
 ): serializedNode | false {
   const {
@@ -698,6 +708,11 @@ function serializeElementNode(
     keepIframeSrcFn,
     newlyAddedElement = false,
     rootId,
+    maskAllText,
+    maskTextClass,
+    unmaskTextClass,
+    maskTextSelector,
+    unmaskTextSelector,
   } = options;
   const needBlock = _isBlockedElement(n, blockClass, blockSelector);
   const tagName = getValidTagName(n);
@@ -752,12 +767,21 @@ function serializeElementNode(
       attributes.type !== 'button' &&
       value
     ) {
+      const forceMask = needMaskingText(
+        n,
+        maskTextClass,
+        maskTextSelector,
+        unmaskTextClass,
+        unmaskTextSelector,
+        maskAllText,
+      );
       attributes.value = maskInputValue({
         type: attributes.type,
         tagName,
         value,
         maskInputOptions,
         maskInputFn,
+        forceMask,
       });
     } else if (checked) {
       attributes.checked = checked;

packages/rrweb-snapshot/src/utils.ts

@@ -153,17 +153,20 @@ export function maskInputValue({
   type,
   value,
   maskInputFn,
+  forceMask,
 }: {
   maskInputOptions: MaskInputOptions;
   tagName: string;
   type: string | number | boolean | null;
   value: string | null;
   maskInputFn?: MaskInputFn;
+  forceMask?: boolean;
 }): string {
   let text = value || '';
   if (
     maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
-    maskInputOptions[type as keyof MaskInputOptions]
+    maskInputOptions[type as keyof MaskInputOptions] ||
+    forceMask
   ) {
     if (maskInputFn) {
       text = maskInputFn(text);

packages/rrweb/src/record/index.ts

@@ -353,6 +353,7 @@ function record<T = eventWithTime>(
       unmaskTextSelector,
       inlineStylesheet,
       maskAllInputs: maskInputOptions,
+      maskInputFn,
       maskTextFn,
       slimDOM: slimDOMOptions,
       dataURLOptions,

packages/rrweb/src/record/mutation.ts

@@ -511,12 +511,21 @@ export default class MutationBuffer {
         const target = m.target as HTMLElement;
         let value = (m.target as HTMLElement).getAttribute(m.attributeName!);
         if (m.attributeName === 'value') {
+          const forceMask = needMaskingText(
+            m.target,
+            this.maskTextClass,
+            this.maskTextSelector,
+            this.unmaskTextClass,
+            this.unmaskTextSelector,
+            this.maskAllText,
+          );
           value = maskInputValue({
             maskInputOptions: this.maskInputOptions,
             tagName: (m.target as HTMLElement).tagName,
             type: (m.target as HTMLElement).getAttribute('type'),
             value,
             maskInputFn: this.maskInputFn,
+            forceMask,
           });
         }
         if (

packages/rrweb/src/record/observer.ts

@@ -1,4 +1,9 @@
-import { MaskInputOptions, maskInputValue, Mirror } from 'rrweb-snapshot';
+import {
+  MaskInputOptions,
+  maskInputValue,
+  Mirror,
+  needMaskingText,
+} from 'rrweb-snapshot';
 import type { FontFaceSet } from 'css-font-loading-module';
 import {
   throttle,
@@ -339,6 +344,11 @@ function initInputObserver({
   maskInputFn,
   sampling,
   userTriggeredOnInput,
+  maskAllText,
+  maskTextClass,
+  unmaskTextClass,
+  maskTextSelector,
+  unmaskTextSelector,
 }: observerParam): listenerHandler {
   function eventHandler(event: Event) {
     let target = getEventTarget(event);
@@ -363,20 +373,30 @@ function initInputObserver({
     }
     let text = (target as HTMLInputElement).value;
     let isChecked = false;
+    const forceMask = needMaskingText(
+      target as Node,
+      maskTextClass,
+      maskTextSelector,
+      unmaskTextClass,
+      unmaskTextSelector,
+      maskAllText,
+    );
     if (type === 'radio' || type === 'checkbox') {
       isChecked = (target as HTMLInputElement).checked;
     } else if (
       maskInputOptions[
         (target as Element).tagName.toLowerCase() as keyof MaskInputOptions
       ] ||
-      maskInputOptions[type as keyof MaskInputOptions]
+      maskInputOptions[type as keyof MaskInputOptions] ||
+      forceMask
     ) {
       text = maskInputValue({
         maskInputOptions,
         tagName: (target as HTMLElement).tagName,
         type,
         value: text,
         maskInputFn,
+        forceMask,
       });
     }
     cbWithDedup(