fix: Ensure <input type='submit' value='Btn text'> is masked (#69)

This should be considered "Text", and should thus be masked by `maskAllText`. This is both for `<input type='button'>` as well as `<input type='submit'>`.
getsentry · Mar 1, 2023 · 5df2651 · 5df2651
1 parent 209abfe
commit 5df2651
Show file tree

Hide file tree

Showing 6 changed files with 784 additions and 143 deletions.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -236,6 +236,7 @@ function getHref() {
 
 export function transformAttribute(
   doc: Document,
+  element: HTMLElement,
   tagName: string,
   name: string,
   value: string | null,
@@ -265,7 +266,13 @@ export function transformAttribute(
     return absoluteToDoc(doc, value);
   } else if (
     maskAllText &&
-    ['placeholder', 'title', 'aria-label'].indexOf(name) > -1
+    (['placeholder', 'title', 'aria-label'].indexOf(name) > -1 ||
+      (tagName === 'input' &&
+        name === 'value' &&
+        element.getAttribute('type') &&
+        ['submit', 'button'].indexOf(
+          element.getAttribute('type')!.toLowerCase(),
+        ) > -1))
   ) {
     return maskTextFn ? maskTextFn(value) : defaultMaskFn(value);
   }
@@ -468,8 +475,8 @@ function serializeNode(
   } = options;
   // Only record root id when document object is not the base document
   let rootId: number | undefined;
-  if (((doc as unknown) as INode).__sn) {
-    const docId = ((doc as unknown) as INode).__sn.id;
+  if ((doc as unknown as INode).__sn) {
+    const docId = (doc as unknown as INode).__sn.id;
     rootId = docId === 1 ? undefined : docId;
   }
   switch (n.nodeType) {
@@ -509,6 +516,7 @@ function serializeNode(
         if (!skipAttribute(tagName, name, value)) {
           attributes[name] = transformAttribute(
             doc,
+            n as HTMLElement,
             tagName,
             name,
             value,
@@ -773,7 +781,9 @@ function serializeNode(
   }
 }
 
-function lowerIfExists(maybeAttr: string | number | boolean | null | undefined): string {
+function lowerIfExists(
+  maybeAttr: string | number | boolean | null | undefined,
+): string {
   if (maybeAttr === undefined || maybeAttr === null) {
     return '';
   } else {

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, 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, 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
@@ -543,9 +543,11 @@ export default class MutationBuffer {
           }
         } else {
           // overwrite attribute if the mutations was triggered in same time
+          const element = m.target as HTMLElement;
           item.attributes[m.attributeName!] = transformAttribute(
             this.doc,
-            (m.target as HTMLElement).tagName,
+            element,
+            element.tagName,
             m.attributeName!,
             value!,
             this.maskAllText,