apply text mask settings to inputs #1096

Author: mdellanoce

.changeset/brave-spoons-sleep.md

@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+text masking settings apply to inputs

packages/rrweb-snapshot/src/snapshot.ts

@@ -321,6 +321,7 @@ export function needMaskingText(
         ? (node as HTMLElement)
         : node.parentElement;
     if (el === null) return false;
+    if (maskTextSelector === '*') return true;
     if (typeof maskTextClass === 'string') {
       if (checkAncestors) {
         if (el.closest(`.${maskTextClass}`)) return true;
@@ -503,11 +504,14 @@ function serializeNode(
         keepIframeSrcFn,
         newlyAddedElement,
         rootId,
+        needsMask,
       });
     case n.TEXT_NODE:
       return serializeTextNode(n as Text, {
         needsMask,
         maskTextFn,
+        maskInputOptions,
+        maskInputFn,
         rootId,
       });
     case n.CDATA_SECTION_NODE:
@@ -538,16 +542,20 @@ function serializeTextNode(
   options: {
     needsMask: boolean | undefined;
     maskTextFn: MaskTextFn | undefined;
+    maskInputOptions: MaskInputOptions;
+    maskInputFn: MaskInputFn | undefined;
     rootId: number | undefined;
   },
 ): serializedNode {
-  const { needsMask, maskTextFn, rootId } = options;
+  const { needsMask, maskTextFn, maskInputOptions, maskInputFn, rootId } =
+    options;
   // The parent node may not be a html element which has a tagName attribute.
   // So just let it be undefined which is ok in this use case.
   const parentTagName = n.parentNode && (n.parentNode as HTMLElement).tagName;
   let textContent = n.textContent;
   const isStyle = parentTagName === 'STYLE' ? true : undefined;
   const isScript = parentTagName === 'SCRIPT' ? true : undefined;
+  const isTextarea = parentTagName === 'TEXTAREA' ? true : undefined;
   if (isStyle && textContent) {
     try {
       // try to read style sheet
@@ -577,6 +585,11 @@ function serializeTextNode(
       ? maskTextFn(textContent, n.parentElement)
       : textContent.replace(/[\S]/g, '*');
   }
+  if (isTextarea && textContent && maskInputOptions.textarea) {
+    textContent = maskInputFn
+      ? maskInputFn(textContent, n.parentNode as HTMLElement)
+      : textContent.replace(/[\S]/g, '*');
+  }
 
   return {
     type: NodeType.Text,
@@ -604,6 +617,7 @@ function serializeElementNode(
      */
     newlyAddedElement?: boolean;
     rootId: number | undefined;
+    needsMask?: boolean;
   },
 ): serializedNode | false {
   const {
@@ -619,6 +633,7 @@ function serializeElementNode(
     keepIframeSrcFn,
     newlyAddedElement = false,
     rootId,
+    needsMask,
   } = options;
   const needBlock = _isBlockedElement(n, blockClass, blockSelector);
   const tagName = getValidTagName(n);
@@ -682,6 +697,7 @@ function serializeElementNode(
         value,
         maskInputOptions,
         maskInputFn,
+        needsMask,
       });
     } else if (checked) {
       attributes.checked = checked;
@@ -1246,7 +1262,7 @@ function snapshot(
     inlineStylesheet?: boolean;
     maskAllInputs?: boolean | MaskInputOptions;
     maskTextFn?: MaskTextFn;
-    maskInputFn?: MaskTextFn;
+    maskInputFn?: MaskInputFn;
     slimDOM?: 'all' | boolean | SlimDOMOptions;
     dataURLOptions?: DataURLOptions;
     inlineImages?: boolean;

packages/rrweb-snapshot/src/utils.ts

@@ -219,20 +219,23 @@ export function maskInputValue({
   type,
   value,
   maskInputFn,
+  needsMask,
 }: {
   element: HTMLElement;
   maskInputOptions: MaskInputOptions;
   tagName: string;
   type: string | null;
   value: string | null;
   maskInputFn?: MaskInputFn;
+  needsMask?: boolean;
 }): string {
   let text = value || '';
   const actualType = type && toLowerCase(type);
 
   if (
     maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
-    (actualType && maskInputOptions[actualType as keyof MaskInputOptions])
+    (actualType && maskInputOptions[actualType as keyof MaskInputOptions]) ||
+    needsMask
   ) {
     if (maskInputFn) {
       text = maskInputFn(text, element);

packages/rrweb/src/record/index.ts

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

packages/rrweb/src/record/mutation.ts

@@ -566,13 +566,21 @@ export default class MutationBuffer {
         if (attributeName === 'value') {
           const type = getInputType(target);
 
+          const needsMask = needMaskingText(
+            m.target,
+            this.maskTextClass,
+            this.maskTextSelector,
+            true,
+          );
+
           value = maskInputValue({
             element: target,
             maskInputOptions: this.maskInputOptions,
             tagName: target.tagName,
             type,
             value,
             maskInputFn: this.maskInputFn,
+            needsMask,
           });
         }
         if (

packages/rrweb/src/record/observer.ts

@@ -4,6 +4,7 @@ import {
   Mirror,
   getInputType,
   toLowerCase,
+  needMaskingText,
 } from 'rrweb-snapshot';
 import type { FontFaceSet } from 'css-font-loading-module';
 import {
@@ -420,6 +421,8 @@ function initInputObserver({
   maskInputFn,
   sampling,
   userTriggeredOnInput,
+  maskTextClass,
+  maskTextSelector,
 }: observerParam): listenerHandler {
   function eventHandler(event: Event) {
     let target = getEventTarget(event) as HTMLElement | null;
@@ -452,11 +455,19 @@ function initInputObserver({
     let isChecked = false;
     const type: Lowercase<string> = getInputType(target) || '';
 
+    const needsMask = needMaskingText(
+      target as Node,
+      maskTextClass,
+      maskTextSelector,
+      true,
+    );
+
     if (type === 'radio' || type === 'checkbox') {
       isChecked = (target as HTMLInputElement).checked;
     } else if (
       maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
-      maskInputOptions[type as keyof MaskInputOptions]
+      maskInputOptions[type as keyof MaskInputOptions] ||
+      needsMask
     ) {
       text = maskInputValue({
         element: target,
@@ -465,6 +476,7 @@ function initInputObserver({
         type,
         value: text,
         maskInputFn,
+        needsMask,
       });
     }
     cbWithDedup(