feat: Enforce masking of credit card fields (#166)

This is on top of #165, actually
fixing the behavior so that certain fields cannot be unmasked.

This is a pretty straightforward fix, a bit "hacky" but should work well
enough.

Fixes getsentry/sentry-javascript#10258

---------

Co-authored-by: mydea <[email protected]>

Author: mydea

packages/rrweb-snapshot/src/snapshot.ts

@@ -384,6 +384,24 @@ export function needMaskingText(
         : node.parentElement;
     if (el === null) return false;
 
+    if (el.tagName === 'INPUT') {
+      // Special cases: We want to enforce some masking for password & credit-card related fields,
+      // no matter the settings
+      const autocomplete = el.getAttribute('autocomplete');
+      const disallowedAutocompleteValues = [
+        'current-password',
+        'new-password',
+        'cc-number',
+        'cc-exp',
+        'cc-exp-month',
+        'cc-exp-year',
+        'cc-csc',
+      ];
+      if (disallowedAutocompleteValues.includes(autocomplete as string)) {
+        return true;
+      }
+    }
+
     let maskDistance = -1;
     let unmaskDistance = -1;
 

packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap

@@ -277,25 +277,25 @@ exports[`integration tests [html file]: form-fields-sensitive.html 1`] = `
         <input type=\\"password\\" value=\\"*******\\" />
       </label>
       <label>
-        <input autocomplete=\\"current-password\\" value=\\"initial\\" />
+        <input autocomplete=\\"current-password\\" value=\\"*******\\" />
       </label>
       <label>
-        <input autocomplete=\\"new-password\\" value=\\"initial\\" />
+        <input autocomplete=\\"new-password\\" value=\\"*******\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-number\\" value=\\"initial\\" />
+        <input autocomplete=\\"cc-number\\" value=\\"*******\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-exp\\" value=\\"initial\\" />
+        <input autocomplete=\\"cc-exp\\" value=\\"*******\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-exp-month\\" value=\\"initial\\" />
+        <input autocomplete=\\"cc-exp-month\\" value=\\"*******\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-exp-year\\" value=\\"initial\\" />
+        <input autocomplete=\\"cc-exp-year\\" value=\\"*******\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-csc\\" value=\\"initial\\" />
+        <input autocomplete=\\"cc-csc\\" value=\\"*******\\" />
       </label>
     </form>
   </body></html>"
@@ -313,25 +313,25 @@ exports[`integration tests [html file]: form-fields-sensitive-update.html 1`] =
         <input type=\\"password\\" value=\\"*********\\" />
       </label>
       <label>
-        <input autocomplete=\\"current-password\\" value=\\"new value\\" />
+        <input autocomplete=\\"current-password\\" value=\\"*********\\" />
       </label>
       <label>
-        <input autocomplete=\\"new-password\\" value=\\"new value\\" />
+        <input autocomplete=\\"new-password\\" value=\\"*********\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-number\\" value=\\"new value\\" />
+        <input autocomplete=\\"cc-number\\" value=\\"*********\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-exp\\" value=\\"new value\\" />
+        <input autocomplete=\\"cc-exp\\" value=\\"*********\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-exp-month\\" value=\\"new value\\" />
+        <input autocomplete=\\"cc-exp-month\\" value=\\"*********\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-exp-year\\" value=\\"new value\\" />
+        <input autocomplete=\\"cc-exp-year\\" value=\\"*********\\" />
       </label>
       <label>
-        <input autocomplete=\\"cc-csc\\" value=\\"new value\\" />
+        <input autocomplete=\\"cc-csc\\" value=\\"*********\\" />
       </label>
     </form>
   

packages/rrweb-snapshot/test/snapshot.test.ts

@@ -497,4 +497,34 @@ describe('needMaskingText', () => {
       ),
     ).toEqual(false);
   });
+
+  describe('enforced masking', () => {
+    it.each([
+      'current-password',
+      'new-password',
+      'cc-number',
+      'cc-exp',
+      'cc-exp-month',
+      'cc-exp-year',
+      'cc-csc',
+    ])('enforces masking for autocomplete="%s"', (autocompleteValue) => {
+      document.write(
+        `<input autocomplete='${autocompleteValue}' value='initial' class='unmaskmask'></input>`,
+      );
+      const el = document.querySelector('input')!;
+      expect(
+        needMaskingText(el, 'maskmask', '.foo', 'unmaskmask', null, false),
+      ).toEqual(true);
+    });
+
+    it('does not mask other autocomplete values', () => {
+      document.write(
+        `<input autocomplete='name' value='initial' class='unmaskmask'></input>`,
+      );
+      const el = document.querySelector('input')!;
+      expect(
+        needMaskingText(el, 'maskmask', '.foo', 'unmaskmask', null, false),
+      ).toEqual(false);
+    });
+  });
 });