text masking settings apply to inputs

.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

@@ -255,7 +255,7 @@
 export function ignoreAttribute(
   tagName: string,
   name: string,
   _value: unknown,
 ): boolean {
   return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
 }
@@ -321,6 +321,7 @@
         ? (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;
@@ -393,7 +394,7 @@
   iframeEl.addEventListener('load', listener);
 }
 
 function isStylesheetLoaded(link: HTMLLinkElement) {
   if (!link.getAttribute('href')) return true; // nothing to load
   return link.sheet !== null;
 }
@@ -503,11 +504,14 @@
         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 @@
   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
@@ -558,7 +566,7 @@
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
         textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
     } catch (err) {
@@ -577,6 +585,11 @@
       ? 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 @@
      */
     newlyAddedElement?: boolean;
     rootId: number | undefined;
+    needsMask?: boolean;
   },
 ): serializedNode | false {
   const {
@@ -619,6 +633,7 @@
     keepIframeSrcFn,
     newlyAddedElement = false,
     rootId,
+    needsMask,
   } = options;
   const needBlock = _isBlockedElement(n, blockClass, blockSelector);
   const tagName = getValidTagName(n);
@@ -647,7 +662,7 @@
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -682,6 +697,7 @@
         value,
         maskInputOptions,
         maskInputFn,
+        needsMask,
       });
     } else if (checked) {
       attributes.checked = checked;
@@ -740,10 +756,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
@@ -1246,7 +1262,7 @@
     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

@@ -71,7 +71,7 @@
  * Browsers sometimes incorrectly escape `@import` on `.cssText` statements.
  * This function tries to correct the escaping.
  * more info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
  * @param cssImportRule
  * @returns `cssText` with browser inconsistencies fixed, or null if not applicable.
  */
 export function escapeImportStatement(rule: CSSImportRule): string {
@@ -219,20 +219,23 @@
   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 @@
       maskTextSelector,
       inlineStylesheet,
       maskAllInputs: maskInputOptions,
+      maskInputFn,
       maskTextFn,
       slimDOM: slimDOMOptions,
       dataURLOptions,
@@ -534,7 +535,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -552,7 +553,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);

packages/rrweb/src/record/mutation.ts

@@ -348,13 +348,13 @@
     };
 
     while (this.mapRemoves.length) {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
     for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(n.parentNode!)
       ) {
         continue;
       }
@@ -566,13 +566,21 @@
         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 @@
   Mirror,
   getInputType,
   toLowerCase,
+  needMaskingText,
 } from 'rrweb-snapshot';
 import type { FontFaceSet } from 'css-font-loading-module';
 import {
@@ -161,7 +162,7 @@
           | IncrementalSource.TouchMove
           | IncrementalSource.Drag,
       ) => {
         const totalOffset = Date.now() - timeBaseline!;
         mousemoveCb(
           positions.map((p) => {
             p.timeOffset -= totalOffset;
@@ -420,6 +421,8 @@
   maskInputFn,
   sampling,
   userTriggeredOnInput,
+  maskTextClass,
+  maskTextSelector,
 }: observerParam): listenerHandler {
   function eventHandler(event: Event) {
     let target = getEventTarget(event) as HTMLElement | null;
@@ -452,11 +455,19 @@
     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 @@
         type,
         value: text,
         maskInputFn,
+        needsMask,
       });
     }
     cbWithDedup(