fix: Ensure unmaskTextSelector is used for masked attributes (#81)

Closes #79 --------- Co-authored-by: Billy Vong <billyvg@users.noreply.github.com>
getsentry · Mar 17, 2023 · 0eb738a · 0eb738a
1 parent abf4bcb
commit 0eb738a
Show file tree

Hide file tree

Showing 6 changed files with 488 additions and 25 deletions.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -241,6 +241,7 @@ export function transformAttribute(
   name: string,
   value: string | null,
   maskAllText: boolean,
+  unmaskTextSelector: string | undefined | null,
   maskTextFn: MaskTextFn | undefined,
 ): string | null {
   if (!value) {
@@ -266,20 +267,34 @@ export function transformAttribute(
     return absoluteToDoc(doc, value);
   } else if (
     maskAllText &&
-    (['placeholder', 'title', 'aria-label'].indexOf(name) > -1 ||
-      (tagName === 'input' &&
-        name === 'value' &&
-        element.getAttribute('type') &&
-        ['submit', 'button'].indexOf(
-          element.getAttribute('type')!.toLowerCase(),
-        ) > -1))
+    _shouldMaskAttribute(element, name, tagName, unmaskTextSelector)
   ) {
     return maskTextFn ? maskTextFn(value) : defaultMaskFn(value);
   }
 
   return value;
 }
 
+function _shouldMaskAttribute(
+  element: HTMLElement,
+  attribute: string,
+  tagName: string,
+  unmaskTextSelector: string | undefined | null,
+): boolean {
+  if (unmaskTextSelector && element.matches(unmaskTextSelector)) {
+    return false;
+  }
+  return (
+    ['placeholder', 'title', 'aria-label'].indexOf(attribute) > -1 ||
+    (tagName === 'input' &&
+      attribute === 'value' &&
+      element.hasAttribute('type') &&
+      ['submit', 'button'].indexOf(
+        element.getAttribute('type')!.toLowerCase(),
+      ) > -1)
+  );
+}
+
 export function _isBlockedElement(
   element: HTMLElement,
   blockClass: string | RegExp,
@@ -521,6 +536,7 @@ function serializeNode(
             name,
             value,
             maskAllText,
+            unmaskTextSelector,
             maskTextFn,
           );
         }

diff --git a/packages/rrweb-snapshot/typings/snapshot.d.ts b/packages/rrweb-snapshot/typings/snapshot.d.ts
@@ -2,7 +2,7 @@ import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOption
 export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
-export declare function transformAttribute(doc: Document, element: HTMLElement, tagName: string, name: string, value: string | null, maskAllText: boolean, maskTextFn: MaskTextFn | undefined): string | null;
+export declare function transformAttribute(doc: Document, element: HTMLElement, tagName: string, name: string, value: string | null, maskAllText: boolean, unmaskTextSelector: string | undefined | null, maskTextFn: MaskTextFn | undefined): string | null;
 export declare function _isBlockedElement(element: HTMLElement, blockClass: string | RegExp, blockSelector: string | null, unblockSelector: string | null): boolean;
 export declare function needMaskingText(node: Node | null, maskTextClass: string | RegExp, maskTextSelector: string | null, unmaskTextSelector: string | null, maskAllText: boolean): boolean;
 export declare function serializeNodeWithId(n: Node | INode, options: {

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -562,6 +562,7 @@ export default class MutationBuffer {
             m.attributeName!,
             value!,
             this.maskAllText,
+            this.unmaskTextSelector,
             this.maskTextFn
           );
         }