feat: Added support maskInputFn with HTMLElement (rrweb-io#1188)

eoghanmurray · Aug 8, 2023 · d294a71 · d294a71
1 parent c7d7a4b
commit d294a71
Show file tree

Hide file tree

Showing 11 changed files with 917 additions and 9 deletions.
diff --git a/.changeset/nervous-tables-travel.md b/.changeset/nervous-tables-travel.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': minor
+'rrweb': minor
+---
+
+feat: Extends maskInputFn to pass the HTMLElement to the deciding function
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -685,6 +685,7 @@ function serializeElementNode(
     ) {
       const type = getInputType(n);
       attributes.value = maskInputValue({
+        element: n,
         type,
         tagName,
         value,

diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
@@ -154,7 +154,7 @@ export type DataURLOptions = Partial<{
 }>;
 
 export type MaskTextFn = (text: string) => string;
-export type MaskInputFn = (text: string) => string;
+export type MaskInputFn = (text: string, element: HTMLElement) => string;
 
 export type KeepIframeSrcFn = (src: string) => boolean;
 

diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
@@ -154,12 +154,14 @@ export function createMirror(): Mirror {
 }
 
 export function maskInputValue({
+  element,
   maskInputOptions,
   tagName,
   type,
   value,
   maskInputFn,
 }: {
+  element: HTMLElement;
   maskInputOptions: MaskInputOptions;
   tagName: string;
   type: string | null;
@@ -174,7 +176,7 @@ export function maskInputValue({
     (actualType && maskInputOptions[actualType as keyof MaskInputOptions])
   ) {
     if (maskInputFn) {
-      text = maskInputFn(text);
+      text = maskInputFn(text, element);
     } else {
       text = '*'.repeat(text.length);
     }

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -494,6 +494,7 @@ export default class MutationBuffer {
           const type = getInputType(target);
 
           value = maskInputValue({
+            element: target,
             maskInputOptions: this.maskInputOptions,
             tagName: target.tagName,
             type,

diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
@@ -444,6 +444,7 @@ function initInputObserver({
       maskInputOptions[type as keyof MaskInputOptions]
     ) {
       text = maskInputValue({
+        element: target,
         maskInputOptions,
         tagName,
         type,