feat: Ensure password inputs are masked when switching type

.changeset/new-snakes-call.md

@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': minor
+'rrweb': minor
+---
+
+feat: Ensure password inputs remain masked when switching input type

packages/rrweb-snapshot/src/snapshot.ts

@@ -674,8 +674,13 @@ function serializeElementNode(
       attributes.type !== 'button' &&
       value
     ) {
+      const type: string | null = n.hasAttribute('data-rr-is-password')
+        ? 'password'
+        : typeof attributes.type === 'string'
+        ? attributes.type.toLowerCase()
+        : null;
       attributes.value = maskInputValue({
-        type: attributes.type,
+        type,
         tagName,
         value,
         maskInputOptions,

packages/rrweb-snapshot/src/utils.ts

@@ -162,14 +162,16 @@ export function maskInputValue({
 }: {
   maskInputOptions: MaskInputOptions;
   tagName: string;
-  type: string | number | boolean | null;
+  type: string | null;
   value: string | null;
   maskInputFn?: MaskInputFn;
 }): string {
   let text = value || '';
+  const actualType = type && type.toLowerCase();
+
   if (
     maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
-    maskInputOptions[type as keyof MaskInputOptions]
+    (actualType && maskInputOptions[actualType as keyof MaskInputOptions])
   ) {
     if (maskInputFn) {
       text = maskInputFn(text);

packages/rrweb/src/record/mutation.ts

@@ -29,6 +29,7 @@ import {
   isSerializedStylesheet,
   inDom,
   getShadowHost,
+  getInputType,
 } from '../utils';
 
 type DoubleLinkedListNode = {
@@ -488,11 +489,14 @@ export default class MutationBuffer {
         const target = m.target as HTMLElement;
         let attributeName = m.attributeName as string;
         let value = (m.target as HTMLElement).getAttribute(attributeName);
+
         if (attributeName === 'value') {
+          const type = getInputType(target);
+
           value = maskInputValue({
             maskInputOptions: this.maskInputOptions,
-            tagName: (m.target as HTMLElement).tagName,
-            type: (m.target as HTMLElement).getAttribute('type'),
+            tagName: target.tagName,
+            type,
             value,
             maskInputFn: this.maskInputFn,
           });
@@ -527,6 +531,17 @@ export default class MutationBuffer {
           };
           this.attributes.push(item);
         }
+
+        // Keep this property on inputs that used to be password inputs
+        // This is used to ensure we do not unmask value when using e.g. a "Show password" type button
+        if (
+          attributeName === 'type' &&
+          target.tagName === 'INPUT' &&
+          (m.oldValue || '').toLowerCase() === 'password'
+        ) {
+          target.setAttribute('data-rr-is-password', 'true');
+        }
+
         if (attributeName === 'style') {
           const old = this.doc.createElement('span');
           if (m.oldValue) {

packages/rrweb/src/record/observer.ts

@@ -4,6 +4,7 @@ import {
   throttle,
   on,
   hookSetter,
+  getInputType,
   getWindowScroll,
   getWindowHeight,
   getWindowWidth,
@@ -338,39 +339,42 @@ function initInputObserver({
   userTriggeredOnInput,
 }: observerParam): listenerHandler {
   function eventHandler(event: Event) {
-    let target = getEventTarget(event);
+    let target = getEventTarget(event) as HTMLElement | null;
     const userTriggered = event.isTrusted;
+    const tagName = target && target.tagName;
+
     /**
      * If a site changes the value 'selected' of an option element, the value of its parent element, usually a select element, will be changed as well.
      * We can treat this change as a value change of the select element the current target belongs to.
      */
-    if (target && (target as Element).tagName === 'OPTION')
-      target = (target as Element).parentElement;
+    if (target && tagName === 'OPTION') {
+      target = target.parentElement;
+    }
     if (
       !target ||
-      !(target as Element).tagName ||
-      INPUT_TAGS.indexOf((target as Element).tagName) < 0 ||
+      !tagName ||
+      INPUT_TAGS.indexOf(tagName) < 0 ||
       isBlocked(target as Node, blockClass, blockSelector, true)
     ) {
       return;
     }
-    const type: string | undefined = (target as HTMLInputElement).type;
-    if ((target as HTMLElement).classList.contains(ignoreClass)) {
+
+    if (target.classList.contains(ignoreClass)) {
       return;
     }
     let text = (target as HTMLInputElement).value;
     let isChecked = false;
+    const type: Lowercase<string> = getInputType(target) || '';
+
     if (type === 'radio' || type === 'checkbox') {
       isChecked = (target as HTMLInputElement).checked;
     } else if (
-      maskInputOptions[
-        (target as Element).tagName.toLowerCase() as keyof MaskInputOptions
-      ] ||
+      maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
       maskInputOptions[type as keyof MaskInputOptions]
     ) {
       text = maskInputValue({
         maskInputOptions,
-        tagName: (target as HTMLElement).tagName,
+        tagName,
         type,
         value: text,
         maskInputFn,

packages/rrweb/src/utils.ts

@@ -563,3 +563,17 @@ export function inDom(n: Node): boolean {
   if (!doc) return false;
   return doc.contains(n) || shadowHostInDom(n);
 }
+
+/**
+ * Get the type of an input element.
+ * This takes care of the case where a password input is changed to a text input.
+ * In this case, we continue to consider this of type password, in order to avoid leaking sensitive data
+ * where passwords should be masked.
+ */
+export function getInputType(element: HTMLElement): Lowercase<string> | null {
+  return element.hasAttribute('data-rr-is-password')
+    ? 'password'
+    : element.hasAttribute('type')
+    ? (element.getAttribute('type')!.toLowerCase() as Lowercase<string>)
+    : null;
+}