feat: add mask attribute function

packages/rrweb-snapshot/src/snapshot.ts

@@ -6,6 +6,7 @@
   KeepIframeSrcFn,
   ICanvas,
   DialogAttributes,
+  MaskAttributeFn,
 } from './types';
 import { NodeType } from '@posthog-internal/rrweb-types';
 import type {
@@ -166,7 +167,7 @@
   } else if (customHref.startsWith('blob:') || customHref.startsWith('data:')) {
     return customHref;
   }
   // note: using `new URL` is slower. See #1434 or https://jsbench.me/uqlud17rxo/1
   a.setAttribute('href', customHref);
   return a.href;
 }
@@ -283,7 +284,7 @@
     // should warn? maybe a text node isn't attached to a parent node yet?
     return false;
   } else {
     el = dom.parentElement(node)!;
   }
   try {
     if (typeof maskTextClass === 'string') {
@@ -399,6 +400,7 @@
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
+    maskAttributeFn: MaskAttributeFn | undefined;
     dataURLOptions?: DataURLOptions;
     inlineImages: boolean;
     recordCanvas: boolean;
@@ -420,6 +422,7 @@
     maskInputOptions = {},
     maskTextFn,
     maskInputFn,
+    maskAttributeFn,
     dataURLOptions = {},
     inlineImages,
     recordCanvas,
@@ -465,6 +468,7 @@
         keepIframeSrcFn,
         newlyAddedElement,
         rootId,
+        maskAttributeFn,
       });
     case n.TEXT_NODE:
       return serializeTextNode(n as Text, {
@@ -574,6 +578,7 @@
      */
     newlyAddedElement?: boolean;
     rootId: number | undefined;
+    maskAttributeFn: MaskAttributeFn | undefined;
   },
 ): serializedNode | false {
   const {
@@ -589,6 +594,8 @@
     keepIframeSrcFn,
     newlyAddedElement = false,
     rootId,
+    // by default, we can just pass the attribute through
+    maskAttributeFn = (_name, value, _element) => value,
   } = options;
   const needBlock = _isBlockedElement(n, blockClass, blockSelector);
   const tagName = getValidTagName(n);
@@ -597,11 +604,10 @@
   for (let i = 0; i < len; i++) {
     const attr = n.attributes[i];
     if (!ignoreAttribute(tagName, attr.name, attr.value)) {
-      attributes[attr.name] = transformAttribute(
-        doc,
-        tagName,
-        toLowerCase(attr.name),
-        attr.value,
+      attributes[attr.name] = maskAttributeFn(
+        attr.name,
+        transformAttribute(doc, tagName, toLowerCase(attr.name), attr.value),
+        n,
       );
     }
   }
@@ -734,10 +740,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
@@ -963,6 +969,7 @@
     ) => unknown;
     stylesheetLoadTimeout?: number;
     cssCaptured?: boolean;
+    maskAttributeFn?: MaskAttributeFn;
   },
 ): serializedNodeWithId | null {
   const {
@@ -989,6 +996,7 @@
     keepIframeSrcFn = () => false,
     newlyAddedElement = false,
     cssCaptured = false,
+    maskAttributeFn,
   } = options;
   let { needsMask } = options;
   let { preserveWhiteSpace = true } = options;
@@ -1020,6 +1028,7 @@
     keepIframeSrcFn,
     newlyAddedElement,
     cssCaptured,
+    maskAttributeFn,
   });
   if (!_serializedNode) {
     // TODO: dev only
@@ -1100,6 +1109,7 @@
       stylesheetLoadTimeout,
       keepIframeSrcFn,
       cssCaptured: false,
+      maskAttributeFn,
     };
 
     if (
@@ -1256,6 +1266,7 @@
     maskAllInputs?: boolean | MaskInputOptions;
     maskTextFn?: MaskTextFn;
     maskInputFn?: MaskInputFn;
+    maskAttributeFn?: MaskAttributeFn;
     slimDOM?: 'all' | boolean | SlimDOMOptions;
     dataURLOptions?: DataURLOptions;
     inlineImages?: boolean;
@@ -1287,6 +1298,7 @@
     maskAllInputs = false,
     maskTextFn,
     maskInputFn,
+    maskAttributeFn,
     slimDOM = false,
     dataURLOptions,
     preserveWhiteSpace,
@@ -1352,6 +1364,7 @@
     maskInputOptions,
     maskTextFn,
     maskInputFn,
+    maskAttributeFn,
     slimDOMOptions,
     dataURLOptions,
     inlineImages,

packages/rrweb-snapshot/src/types.ts

@@ -68,6 +68,11 @@ export type SlimDOMOptions = Partial<{
 
 export type MaskTextFn = (text: string, element: HTMLElement | null) => string;
 export type MaskInputFn = (text: string, element: HTMLElement) => string;
+export type MaskAttributeFn = (
+  name: string,
+  value: string | null,
+  element: HTMLElement,
+) => string | null;
 
 export type KeepIframeSrcFn = (src: string) => boolean;
 

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

@@ -9,13 +9,13 @@ import { splitCssText, stringifyStylesheet } from './../src/utils';
 import { applyCssSplits } from './../src/rebuild';
 import * as fs from 'fs';
 import * as path from 'path';
-import type {
-  serializedElementNodeWithId,
-  BuildCache,
+import {
   textNode,
-} from '../src/types';
-import { NodeType } from '@posthog-internal/rrweb-types';
+  NodeType,
+  serializedElementNodeWithId,
+} from '@posthog-internal/rrweb-types';
 import { Window } from 'happy-dom';
+import { BuildCache } from '../src';
 
 describe('css parser', () => {
   function parse(plugin: AcceptedPlugin, input: string): string {