upstream: 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

@@ -263,7 +263,7 @@
 export function ignoreAttribute(
   tagName: string,
   name: string,
   _value: unknown,
 ): boolean {
   return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
 }
@@ -500,7 +500,7 @@
   iframeEl.addEventListener('load', listener);
 }
 
 function isStylesheetLoaded(link: HTMLLinkElement) {
   if (!link.getAttribute('href')) return true; // nothing to load
   return link.sheet !== null;
 }
@@ -707,7 +707,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) {
@@ -732,7 +732,7 @@
 
   if (!isStyle && !isScript && !isTextarea && textContent && forceMask) {
     textContent = maskTextFn
-      ? maskTextFn(textContent)
+      ? maskTextFn(textContent, n.parentElement)
       : textContent.replace(/[\S]/g, '*');
   }
   if (isTextarea && textContent && (maskInputOptions.textarea || forceMask)) {
@@ -814,7 +814,7 @@
     keepIframeSrcFn,
     newlyAddedElement = false,
     rootId,
     maskAllText,
     maskTextClass,
     unmaskTextClass,
     maskTextSelector,
@@ -856,7 +856,7 @@
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -967,10 +967,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,
         );

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,

packages/rrweb/src/record/mutation.ts

@@ -32,6 +32,7 @@
   isSerializedStylesheet,
   inDom,
   getShadowHost,
+  closestElementOfNode,
 } from '../utils';
 
 type DoubleLinkedListNode = {
@@ -358,13 +359,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;
       }
@@ -525,6 +526,7 @@
     switch (m.type) {
       case 'characterData': {
         const value = m.target.textContent;
+
         if (
           !isBlocked(
             m.target,
@@ -546,7 +548,7 @@
                 this.maskAllText,
               ) && 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

@@ -34,7 +34,7 @@
   'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
   '\r\n' +
   'or you can use record.mirror to access the mirror instance during recording.';
 /** @deprecated */
 export let _mirror: DeprecatedMirror = {
   map: {},
   getId() {
@@ -118,7 +118,7 @@
           set(value) {
             // put hooked setter into event loop to avoid of set latency
             setTimeout(() => {
               d.set!.call(this, value);
             }, 0);
             if (original && original.set) {
               original.set.call(this, value);
@@ -131,7 +131,7 @@
 
 // copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
 export function patch(
   source: { [key: string]: any },
   name: string,
   replacement: (...args: unknown[]) => unknown,
 ): () => void {
@@ -219,6 +219,23 @@
   );
 }
 
+/**
+ * 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 @@
   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);