fix: masking inputs on change when maskAllInputs:false (#61)

Since `maskInputSelector` is a new configuration item, we were not handling the case for input change when `maskAllInputs:false`. Before, input masking was only done via `maskInputOptions` and `maskAllInputs`.
getsentry · Feb 24, 2023 · 6db7ad8 · 6db7ad8
1 parent d34bf3a
commit 6db7ad8
Show file tree

Hide file tree

Showing 7 changed files with 1,468 additions and 65 deletions.
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
@@ -9,6 +9,54 @@ export function isShadowRoot(n: Node): n is ShadowRoot {
   return Boolean(host && host.shadowRoot && host.shadowRoot === n);
 }
 
+interface IsInputTypeMasked {
+  maskInputOptions: MaskInputOptions;
+  tagName: string;
+  type: string | number | boolean | null;
+}
+
+/**
+ * Check `maskInputOptions` if the element, based on tag name and `type` attribute, should be masked.
+ * If `<input>` has no `type`, default to using `type="text"`.
+ */
+function isInputTypeMasked({
+  maskInputOptions,
+  tagName,
+  type,
+}: IsInputTypeMasked) {
+  return (
+    maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
+    maskInputOptions[type as keyof MaskInputOptions] ||
+    // Default to "text" option for inputs without a "type" attribute defined
+    (tagName === 'input' && !type && maskInputOptions['text'])
+  );
+}
+
+interface HasInputMaskOptions extends IsInputTypeMasked {
+  maskInputSelector: string | null;
+}
+
+/**
+ * Determine if there are masking options configured and if `maskInputValue` needs to be called
+ */
+export function hasInputMaskOptions({
+  tagName,
+  type,
+  maskInputOptions,
+  maskInputSelector,
+}: HasInputMaskOptions) {
+  return (
+    maskInputSelector || isInputTypeMasked({ maskInputOptions, tagName, type })
+  );
+}
+
+interface MaskInputValue extends HasInputMaskOptions {
+  input: HTMLElement;
+  unmaskInputSelector: string | null;
+  value: string | null;
+  maskInputFn?: MaskInputFn;
+}
+
 export function maskInputValue({
   input,
   maskInputSelector,
@@ -18,26 +66,15 @@ export function maskInputValue({
   type,
   value,
   maskInputFn,
-}: {
-  input: HTMLElement;
-  maskInputSelector: string | null;
-  unmaskInputSelector: string | null;
-  maskInputOptions: MaskInputOptions;
-  tagName: string;
-  type: string | number | boolean | null;
-  value: string | null;
-  maskInputFn?: MaskInputFn;
-}): string {
+}: MaskInputValue): string {
   let text = value || '';
 
   if (unmaskInputSelector && input.matches(unmaskInputSelector)) {
     return text;
   }
 
   if (
-    maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
-    maskInputOptions[type as keyof MaskInputOptions] ||
-    (tagName === 'input' && !type && maskInputOptions['text']) || // For inputs without a "type" attribute defined
+    isInputTypeMasked({ maskInputOptions, tagName, type }) ||
     (maskInputSelector && input.matches(maskInputSelector))
   ) {
     if (maskInputFn) {

diff --git a/packages/rrweb-snapshot/typings/utils.d.ts b/packages/rrweb-snapshot/typings/utils.d.ts
@@ -1,14 +1,21 @@
 import { INode, MaskInputFn, MaskInputOptions } from './types';
 export declare function isElement(n: Node | INode): n is Element;
 export declare function isShadowRoot(n: Node): n is ShadowRoot;
-export declare function maskInputValue({ input, maskInputSelector, unmaskInputSelector, maskInputOptions, tagName, type, value, maskInputFn, }: {
-    input: HTMLElement;
-    maskInputSelector: string | null;
-    unmaskInputSelector: string | null;
+interface IsInputTypeMasked {
     maskInputOptions: MaskInputOptions;
     tagName: string;
     type: string | number | boolean | null;
+}
+interface HasInputMaskOptions extends IsInputTypeMasked {
+    maskInputSelector: string | null;
+}
+export declare function hasInputMaskOptions({ tagName, type, maskInputOptions, maskInputSelector, }: HasInputMaskOptions): string | boolean | undefined;
+interface MaskInputValue extends HasInputMaskOptions {
+    input: HTMLElement;
+    unmaskInputSelector: string | null;
     value: string | null;
     maskInputFn?: MaskInputFn;
-}): string;
+}
+export declare function maskInputValue({ input, maskInputSelector, unmaskInputSelector, maskInputOptions, tagName, type, value, maskInputFn, }: MaskInputValue): string;
 export declare function is2DCanvasBlank(canvas: HTMLCanvasElement): boolean;
+export {};
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
@@ -1,6 +1,6 @@
 import {
   INode,
-  MaskInputOptions,
+  hasInputMaskOptions,
   maskInputValue,
 } from '@sentry-internal/rrweb-snapshot';
 import { FontFaceSet } from 'css-font-loading-module';
@@ -365,15 +365,18 @@ function initInputObserver({
     ) {
       return;
     }
+
     let text = (target as HTMLInputElement).value;
     let isChecked = false;
     if (type === 'radio' || type === 'checkbox') {
       isChecked = (target as HTMLInputElement).checked;
     } else if (
-      maskInputOptions[
-        (target as Element).tagName.toLowerCase() as keyof MaskInputOptions
-      ] ||
-      maskInputOptions[type as keyof MaskInputOptions]
+      hasInputMaskOptions({
+        maskInputOptions,
+        maskInputSelector,
+        tagName: (target as HTMLElement).tagName,
+        type,
+      })
     ) {
       text = maskInputValue({
         input: target as HTMLElement,