feat(rrweb-snapshot): mask attributes wip

amplitude · Oct 15, 2024 · 5883944 · 5883944
1 parent 91e937c
commit 5883944
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -668,23 +668,35 @@ function serializeElementNode(
   }
   // form fields
   if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
-    const value = (n as HTMLInputElement | HTMLTextAreaElement).value;
     const checked = (n as HTMLInputElement).checked;
     if (
       attributes.type !== 'radio' &&
       attributes.type !== 'checkbox' &&
       attributes.type !== 'submit' &&
-      attributes.type !== 'button' &&
-      value
+      attributes.type !== 'button'
     ) {
-      attributes.value = maskInputValue({
-        element: n,
-        type: getInputType(n),
-        tagName,
-        value,
-        maskInputOptions,
-        maskInputFn,
-      });
+      // optionally mask attributes
+      for (const [maskedAttributeName, shouldMaskAttribute] of Object.entries(
+        maskInputOptions.attributes ?? {},
+      )) {
+        if (!shouldMaskAttribute) {
+          continue;
+        }
+
+        const elementAttrValue = (n as Partial<HTMLInputElement>)[
+          maskedAttributeName as keyof HTMLInputElement
+        ];
+        if (elementAttrValue) {
+          attributes.placeholder = maskInputValue({
+            element: n,
+            type: getInputType(n),
+            tagName,
+            value: String(elementAttrValue),
+            maskInputOptions,
+            maskInputFn,
+          });
+        }
+      }
     } else if (checked) {
       attributes.checked = checked;
     }

diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
@@ -133,6 +133,11 @@ export type MaskInputOptions = Partial<{
   textarea: boolean;
   select: boolean;
   password: boolean;
+
+  // attributes to mask
+  attributes: {
+    [k in keyof HTMLInputElement | keyof HTMLTextAreaElement]?: boolean;
+  };
 }>;
 
 export type SlimDOMOptions = Partial<{

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -128,6 +128,7 @@ function record<T = eventWithTime>(
   const maskInputOptions: MaskInputOptions =
     maskAllInputs === true
       ? {
+          ...(_maskInputOptions ?? {}),
           color: true,
           date: true,
           'datetime-local': true,