feat: add new mask attributes fn

Author: billyvg

packages/browser-integration-tests/suites/replay/customEvents/test.ts

@@ -117,7 +117,7 @@ sentryTest(
             nodeId: expect.any(Number),
             node: {
               attributes: {
-                'aria-label': '** ***** ** **********',
+                'aria-label': 'An Error in aria-label',
                 class: 'btn btn-error',
                 id: 'error',
                 role: 'button',

packages/replay/src/integration.ts

@@ -81,6 +81,7 @@ export class Replay implements Integration {
     networkResponseHeaders = [],
 
     mask = [],
+    maskAttributes = ['title', 'placeholder'],
     unmask = [],
     block = [],
     unblock = [],
@@ -110,6 +111,14 @@ export class Replay implements Integration {
       maskInputOptions: { ...(maskInputOptions || {}), password: true },
       maskTextFn: maskFn,
       maskInputFn: maskFn,
+      maskAttributeFn: (key: string, value: string): string => {
+        // For now, always mask these attributes
+        if (maskAttributes.includes(key)) {
+          return value.replace(/[\S]/g, '*');
+        }
+
+        return value;
+      },
 
       ...getPrivacyOptions({
         mask,

packages/replay/src/types/replay.ts

@@ -264,7 +264,12 @@ export interface ReplayIntegrationPrivacyOptions {
 }
 
 // These are optional for ReplayPluginOptions because the plugin sets default values
-type OptionalReplayPluginOptions = Partial<ReplayPluginOptions>;
+type OptionalReplayPluginOptions = Partial<ReplayPluginOptions> & {
+  /**
+   * Mask element attributes that are contained in list
+   */
+  maskAttributes?: string[];
+};
 
 export interface DeprecatedPrivacyOptions {
   /**
@@ -288,7 +293,7 @@ export interface DeprecatedPrivacyOptions {
    */
   maskTextClass?: RecordingOptions['maskTextClass'];
   /**
-   * @deprecated Use `mask` which accepts an array of CSS selectors
+   * @derecated Use `mask` which accepts an array of CSS selectors
    */
   maskTextSelector?: RecordingOptions['maskTextSelector'];
 }