Extended text masking function to include relevant HTMLElement

.changeset/swift-dancers-rest.md

@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': minor
+'rrweb': minor
+---
+
+Extends maskTextFn to pass the HTMLElement to the deciding function

packages/rrweb-snapshot/src/snapshot.ts

@@ -575,7 +575,7 @@ function serializeTextNode(
     needMaskingText(n, maskTextClass, maskTextSelector)
   ) {
     textContent = maskTextFn
-      ? maskTextFn(textContent)
+      ? maskTextFn(textContent, n.parentElement)
       : textContent.replace(/[\S]/g, '*');
   }
 

packages/rrweb-snapshot/src/types.ts

@@ -153,7 +153,7 @@ export type DataURLOptions = Partial<{
   quality: number;
 }>;
 
-export type MaskTextFn = (text: string) => string;
+export type MaskTextFn = (text: string, element: HTMLElement | null) => string;
 export type MaskInputFn = (text: string, element: HTMLElement) => string;
 
 export type KeepIframeSrcFn = (src: string) => boolean;

packages/rrweb/src/record/mutation.ts

@@ -30,6 +30,7 @@ import {
   isSerializedStylesheet,
   inDom,
   getShadowHost,
+  closestElementOfNode,
 } from '../utils';
 
 type DoubleLinkedListNode = {
@@ -508,6 +509,7 @@ export default class MutationBuffer {
     switch (m.type) {
       case 'characterData': {
         const value = m.target.textContent;
+
         if (
           !isBlocked(m.target, this.blockClass, this.blockSelector, false) &&
           value !== m.oldValue
@@ -520,7 +522,7 @@ export default class MutationBuffer {
                 this.maskTextSelector,
               ) && value
                 ? this.maskTextFn
-                  ? this.maskTextFn(value)
+                  ? this.maskTextFn(value, closestElementOfNode(m.target))
                   : value.replace(/[\S]/g, '*')
                 : value,
             node: m.target,

packages/rrweb/src/utils.ts

@@ -215,6 +215,23 @@ export function getWindowWidth(): number {
   );
 }
 
+/**
+ * Returns the given node as an HTMLElement if it is one, otherwise the parent node as an HTMLElement
+ * @param node - node to check
+ * @returns HTMLElement or null
+ */
+
+export function closestElementOfNode(node: Node | null): HTMLElement | null {
+  if (!node) {
+    return null;
+  }
+  const el: HTMLElement | null =
+    node.nodeType === node.ELEMENT_NODE
+      ? (node as HTMLElement)
+      : node.parentElement;
+  return el;
+}
+
 /**
  * Checks if the given element set to be blocked by rrweb
  * @param node - node to check
@@ -232,11 +249,11 @@ export function isBlocked(
   if (!node) {
     return false;
   }
-  const el: HTMLElement | null =
-    node.nodeType === node.ELEMENT_NODE
-      ? (node as HTMLElement)
-      : node.parentElement;
-  if (!el) return false;
+  const el = closestElementOfNode(node);
+
+  if (!el) {
+    return false;
+  }
 
   try {
     if (typeof blockClass === 'string') {