feat: Ensure password inputs are always masked

packages/rrweb-snapshot/src/snapshot.ts

@@ -1201,12 +1201,9 @@ function snapshot(
  week: true,
  textarea: true,
  select: true,
- password: true,
  }
  : maskAllInputs === false
- ? {
- password: true,
- }
+ ? {}
  : maskAllInputs;
  const slimDOMOptions: SlimDOMOptions =
  slimDOM === true || slimDOM === 'all'

packages/rrweb-snapshot/src/types.ts

@@ -96,7 +96,7 @@ export type MaskInputOptions = Partial<{
  // unify textarea and select element with text input
  textarea: boolean;
  select: boolean;
- password: boolean;
+ // password is _always_ masked, can't opt out of this
  radio: boolean;
  checkbox: boolean;
 }>;

packages/rrweb-snapshot/src/utils.ts

@@ -29,9 +29,13 @@ function isInputTypeMasked({
  tagName = 'select';
  }
 
+ // We only care about the type if it is a string
+ const actualType = typeof type === 'string' ? type.toLowerCase() : undefined;
+
  return (
  maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
- maskInputOptions[type as keyof MaskInputOptions] ||
+ (actualType && maskInputOptions[actualType as keyof MaskInputOptions]) ||
+ actualType === 'password' ||
  // Default to "text" option for inputs without a "type" attribute defined
  (tagName === 'input' && !type && maskInputOptions['text'])
  );
@@ -78,6 +82,10 @@ export function maskInputValue({
  return text;
  }
 
+ if (input.hasAttribute('rr_is_password')) {
+ type = 'password';
+ }
+
  if (
  isInputTypeMasked({ maskInputOptions, tagName, type }) ||
  (maskInputSelector && input.matches(maskInputSelector))

packages/rrweb-snapshot/typings/types.d.ts

@@ -77,7 +77,6 @@ export type MaskInputOptions = Partial<{
  week: boolean;
  textarea: boolean;
  select: boolean;
- password: boolean;
  radio: boolean;
  checkbox: boolean;
 }>;

packages/rrweb/src/record/index.ts

@@ -104,13 +104,12 @@ function record<T = eventWithTime>(
  week: true,
  textarea: true,
  select: true,
- password: true,
  radio: true,
  checkbox: true,
  }
  : _maskInputOptions !== undefined
  ? _maskInputOptions
- : { password: true };
+ : {};
 
  const slimDOMOptions: SlimDOMOptions =
  _slimDOMOptions === true || _slimDOMOptions === 'all'

packages/rrweb/src/record/mutation.ts

@@ -476,15 +476,15 @@ export default class MutationBuffer {
  }
  case 'attributes': {
  const target = m.target as HTMLElement;
- let value = (m.target as HTMLElement).getAttribute(m.attributeName!);
+ let value = target.getAttribute(m.attributeName!);
  if (m.attributeName === 'value') {
  value = maskInputValue({
  input: target,
  maskInputSelector: this.maskInputSelector,
  unmaskInputSelector: this.unmaskInputSelector,
  maskInputOptions: this.maskInputOptions,
- tagName: (m.target as HTMLElement).tagName,
- type: (m.target as HTMLElement).getAttribute('type'),
+ tagName: target.tagName,
+ type: target.getAttribute('type'),
  value,
  maskInputFn: this.maskInputFn,
  });
@@ -502,6 +502,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 (
+ m.attributeName === 'type' &&
+ (m.target as HTMLElement).tagName === 'INPUT' &&
+ (m.oldValue || '').toLowerCase() === 'password'
+ ) {
+ (m.target as HTMLElement).setAttribute('rr_is_password', 'true');
+ }
+
  if (m.attributeName === 'style') {
  const old = this.doc.createElement('span');
  if (m.oldValue) {

packages/rrweb/src/record/observer.ts

@@ -365,7 +365,7 @@ function initInputObserver({
  ) {
  return;
  }
- const type: string | undefined = (target as HTMLInputElement).type;
+ let type: string | undefined = (target as HTMLInputElement).type;
  if (
  (target as HTMLElement).classList.contains(ignoreClass) ||
  (ignoreSelector && (target as HTMLElement).matches(ignoreSelector))
@@ -375,6 +375,11 @@ function initInputObserver({
 
  let text = (target as HTMLInputElement).value;
  let isChecked = false;
+
+ if ((target as HTMLElement).hasAttribute('rr_is_password')) {
+ type = 'password';
+ }
+
  if (type === 'radio' || type === 'checkbox') {
  isChecked = (target as HTMLInputElement).checked;
  } else if (