Extended text masking function to include relevant HTMLElement (rrweb…

…-io#1310) * Extends maskTextFn to pass the HTMLElement to the deciding function --------- Authored-by: benjackwhite <[email protected]> Co-authored-by: Justin Halsall <[email protected]> Co-authored-by: Eoghan Murray <[email protected]>
getsentry · Oct 20, 2023 · 50dde79 · 50dde79
1 parent 5535ef7
commit 50dde79
Show file tree

Hide file tree

Showing 8 changed files with 495 additions and 29 deletions.
diff --git a/.changeset/swift-dancers-rest.md b/.changeset/swift-dancers-rest.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': minor
+'rrweb': minor
+---
+
+Extends maskTextFn to pass the HTMLElement to the deciding function
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -710,7 +710,7 @@ function serializeTextNode(
 
   if (!isStyle && !isScript && !isTextarea && textContent && forceMask) {
     textContent = maskTextFn
-      ? maskTextFn(textContent)
+      ? maskTextFn(textContent, n.parentElement)
       : textContent.replace(/[\S]/g, '*');
   }
   if (isTextarea && textContent && (maskInputOptions.textarea || forceMask)) {

diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
@@ -157,7 +157,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 MaskAttributeFn = (
   attributeName: string,

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -32,6 +32,7 @@ import {
   isSerializedStylesheet,
   inDom,
   getShadowHost,
+  closestElementOfNode,
 } from '../utils';
 
 type DoubleLinkedListNode = {
@@ -525,6 +526,7 @@ export default class MutationBuffer {
     switch (m.type) {
       case 'characterData': {
         const value = m.target.textContent;
+
         if (
           !isBlocked(
             m.target,
@@ -546,7 +548,7 @@ export default class MutationBuffer {
                 this.maskAllText,
               ) && value
                 ? this.maskTextFn
-                  ? this.maskTextFn(value)
+                  ? this.maskTextFn(value, closestElementOfNode(m.target))
                   : value.replace(/[\S]/g, '*')
                 : value,
             node: m.target,

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
@@ -219,6 +219,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
@@ -237,11 +254,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;
+  }
 
   const blockedPredicate = createMatchPredicate(blockClass, blockSelector);