feat: Ensure password inputs are masked when switching type (#1170)

* feat: Ensure password inputs are masked when switching type


Apply formatting changes

use data- attribute


ref: Ensure type is always lowercased


add changeset

* extract into util

* Apply formatting changes

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);