fix: Mask <option> values for selects & radio/checkbox value

packages/rrweb-snapshot/src/snapshot.ts

@@ -475,8 +475,8 @@ function serializeNode(
   } = options;
   // Only record root id when document object is not the base document
   let rootId: number | undefined;
-  if ((doc as unknown as INode).__sn) {
-    const docId = (doc as unknown as INode).__sn.id;
+  if (((doc as unknown) as INode).__sn) {
+    const docId = ((doc as unknown) as INode).__sn.id;
     rootId = docId === 1 ? undefined : docId;
   }
   switch (n.nodeType) {
@@ -561,22 +561,29 @@ function serializeNode(
           attributes._cssText = absoluteToStylesheet(cssText, getHref());
         }
       }
+
       // form fields
       if (
         tagName === 'input' ||
         tagName === 'textarea' ||
-        tagName === 'select'
+        tagName === 'select' ||
+        tagName === 'option'
       ) {
-        const value = (n as HTMLInputElement | HTMLTextAreaElement).value;
+        const el = n as
+          | HTMLInputElement
+          | HTMLTextAreaElement
+          | HTMLSelectElement
+          | HTMLOptionElement;
+        const value = getInputValue(tagName, el, attributes);
+        const checked = (n as HTMLInputElement).checked;
+
         if (
-          attributes.type !== 'radio' &&
-          attributes.type !== 'checkbox' &&
           attributes.type !== 'submit' &&
           attributes.type !== 'button' &&
           value
         ) {
           attributes.value = maskInputValue({
-            input: n as HTMLElement,
+            input: el,
             type: attributes.type,
             tagName,
             value,
@@ -585,10 +592,12 @@ function serializeNode(
             maskInputOptions,
             maskInputFn,
           });
-        } else if ((n as HTMLInputElement).checked) {
-          attributes.checked = (n as HTMLInputElement).checked;
+        }
+        if (checked) {
+          attributes.checked = checked;
         }
       }
+
       if (tagName === 'option') {
         if ((n as HTMLOptionElement).selected && !maskInputOptions['select']) {
           attributes.selected = true;
@@ -741,6 +750,20 @@ function serializeNode(
       if (parentTagName === 'TEXTAREA' && textContent) {
         // textarea textContent should be masked via `value` attributes
         textContent = '';
+      } else if (parentTagName === 'OPTION' && textContent) {
+        // mask option text like value
+        const option = n.parentNode as HTMLOptionElement;
+
+        textContent = maskInputValue({
+          input: option,
+          type: null,
+          tagName: parentTagName,
+          value: textContent,
+          maskInputSelector,
+          unmaskInputSelector,
+          maskInputOptions,
+          maskInputFn,
+        });
       } else if (
         !isStyle &&
         !isScript &&
@@ -1269,3 +1292,24 @@ function skipAttribute(
     (tagName === 'video' || tagName === 'audio') && attributeName === 'autoplay'
   );
 }
+
+function getInputValue(
+  tagName: string,
+  el:
+    | HTMLInputElement
+    | HTMLTextAreaElement
+    | HTMLSelectElement
+    | HTMLOptionElement,
+  attributes: attributes,
+): string {
+  if (
+    tagName === 'input' &&
+    (attributes.type === 'radio' || attributes.type === 'checkbox')
+  ) {
+    // checkboxes & radio buttons return `on` as their el.value when no value is specified
+    // we only want to get the value if it is specified as `value='xxx'`
+    return el.getAttribute('value') || '';
+  }
+
+  return el.value;
+}

packages/rrweb-snapshot/src/types.ts

@@ -97,6 +97,8 @@ export type MaskInputOptions = Partial<{
   textarea: boolean;
   select: boolean;
   password: boolean;
+  radio: boolean;
+  checkbox: boolean;
 }>;
 
 export type SlimDOMOptions = Partial<{

packages/rrweb-snapshot/src/utils.ts

@@ -24,6 +24,11 @@ function isInputTypeMasked({
   tagName,
   type,
 }: IsInputTypeMasked) {
+  // Handle options as part of select
+  if (tagName.toLowerCase() === 'option') {
+    tagName = 'select';
+  }
+
   return (
     maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
     maskInputOptions[type as keyof MaskInputOptions] ||

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

@@ -78,6 +78,8 @@ export type MaskInputOptions = Partial<{
     textarea: boolean;
     select: boolean;
     password: boolean;
+    radio: boolean;
+    checkbox: boolean;
 }>;
 export type SlimDOMOptions = Partial<{
     script: boolean;

packages/rrweb/src/record/index.ts

@@ -105,6 +105,8 @@ function record<T = eventWithTime>(
           textarea: true,
           select: true,
           password: true,
+          radio: true,
+          checkbox: true,
         }
       : _maskInputOptions !== undefined
       ? _maskInputOptions