extract into util

packages/rrweb/src/record/mutation.ts

@@ -29,6 +29,7 @@ import {
   isSerializedStylesheet,
   inDom,
   getShadowHost,
+  getInputType,
 } from '../utils';
 
 type DoubleLinkedListNode = {
@@ -487,12 +488,11 @@ export default class MutationBuffer {
       case 'attributes': {
         const target = m.target as HTMLElement;
         let attributeName = m.attributeName as string;
-        let value = (m.target as HTMLElement).getAttribute(attributeName);
-        const type = target.hasAttribute('data-rr-is-password')
-          ? 'password'
-          : target.getAttribute('type') || null;
+        let value = (m.target as HTMLElement).getAttribute(attributeName);        
 
         if (attributeName === 'value') {
+          const type = getInputType(target);
+
           value = maskInputValue({
             maskInputOptions: this.maskInputOptions,
             tagName: target.tagName,
@@ -535,11 +535,11 @@ export default class MutationBuffer {
         // 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 (
-          m.attributeName === 'type' &&
-          (m.target as HTMLElement).tagName === 'INPUT' &&
+          attributeName === 'type' &&
+          target.tagName === 'INPUT' &&
           (m.oldValue || '').toLowerCase() === 'password'
         ) {
-          (m.target as HTMLElement).setAttribute('data-rr-is-password', 'true');
+          target.setAttribute('data-rr-is-password', 'true');
         }
 
         if (attributeName === 'style') {

packages/rrweb/src/record/observer.ts

@@ -4,6 +4,7 @@ import {
   throttle,
   on,
   hookSetter,
+  getInputType,
   getWindowScroll,
   getWindowHeight,
   getWindowWidth,
@@ -363,9 +364,7 @@ function initInputObserver({
     }
     let text = (target as HTMLInputElement).value;
     let isChecked = false;
-    const type: string = target.hasAttribute('data-rr-is-password')
-      ? 'password'
-      : ((target as HTMLInputElement).type || '').toLowerCase();
+    const type: Lowercase<string> = getInputType(target) || '';
 
     if (type === 'radio' || type === 'checkbox') {
       isChecked = (target as HTMLInputElement).checked;

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;
+}