feat(rrweb): Extend ignoreCSSAttributes to support inline styles

packages/rrweb-snapshot/src/index.ts

@@ -10,6 +10,7 @@ import snapshot, {
   classMatchesRegex,
   IGNORED_NODE,
   genId,
+  filterCSSPropertiesFromInlineStyle,
 } from './snapshot';
 import rebuild, {
   buildNodeWithSN,
@@ -36,4 +37,5 @@ export {
   classMatchesRegex,
   IGNORED_NODE,
   genId,
+  filterCSSPropertiesFromInlineStyle,
 };

packages/rrweb-snapshot/src/snapshot.ts

@@ -76,6 +76,48 @@
 const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
 const URL_WWW_MATCH = /^www\..*/i;
 const DATA_URI = /^(data:)([^,]*),(.*)/i;
+export function filterCSSPropertiesFromInlineStyle(
+  cssText: string,
+  ignoredProperties: Set<string>,
+): string {
+  if (!cssText || ignoredProperties.size === 0) {
+    return cssText;
+  }
+
+  try {
+    // Split CSS by semicolons to get individual property-value pairs
+    const properties = cssText.split(';');
+    const filteredProperties = [];
+
+    for (let property of properties) {
+      property = property.trim();
+      if (!property) continue;
+
+      const colonIndex = property.indexOf(':');
+      if (colonIndex === -1) {
+        // Invalid property, keep it as is
+        filteredProperties.push(property);
+        continue;
+      }
+
+      const propertyName = property.slice(0, colonIndex).trim();
+
+      // If this property is not in the ignore set, keep it
+      if (!ignoredProperties.has(propertyName)) {
+        filteredProperties.push(property);
+      }
+    }
+
+    return (
+      filteredProperties.join('; ') +
+      (filteredProperties.length > 0 && cssText.endsWith(';') ? ';' : '')
+    );
+  } catch (error) {
+    console.warn('Error filtering CSS properties:', error);
+    return cssText;
+  }
+}
+
 export function absoluteToStylesheet(
   cssText: string | null,
   href: string,
@@ -238,6 +280,7 @@
   value: string | null,
   element: HTMLElement,
   maskAttributeFn: MaskAttributeFn | undefined,
+  ignoreCSSAttributes?: Set<string>,
 ): string | null {
   if (!value) {
     return value;
@@ -261,7 +304,14 @@
   } else if (name === 'srcset') {
     return getAbsoluteSrcsetString(doc, value);
   } else if (name === 'style') {
-    return absoluteToStylesheet(value, getHref(doc));
+    let processedStyle = absoluteToStylesheet(value, getHref(doc));
+    if (ignoreCSSAttributes && ignoreCSSAttributes.size > 0) {
+      processedStyle = filterCSSPropertiesFromInlineStyle(
+        processedStyle,
+        ignoreCSSAttributes,
+      );
+    }
+    return processedStyle;
   } else if (tagName === 'object' && name === 'data') {
     return absoluteToDoc(doc, value);
   }
@@ -570,6 +620,7 @@
      * `newlyAddedElement: true` skips scrollTop and scrollLeft check
      */
     newlyAddedElement?: boolean;
+    ignoreCSSAttributes?: Set<string>;
   },
 ): serializedNode | false {
   const {
@@ -593,6 +644,7 @@
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
+    ignoreCSSAttributes,
   } = options;
   // Only record root id when document object is not the base document
   const rootId = getRootId(doc, mirror);
@@ -639,6 +691,7 @@
         unmaskTextClass,
         maskTextSelector,
         unmaskTextSelector,
+        ignoreCSSAttributes,
       });
     case n.TEXT_NODE:
       return serializeTextNode(n as Text, {
@@ -719,7 +772,7 @@
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
         textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
     } catch (err) {
@@ -809,6 +862,7 @@
     unmaskTextClass: string | RegExp | null;
     maskTextSelector: string | null;
     unmaskTextSelector: string | null;
+    ignoreCSSAttributes?: Set<string>;
   },
 ): serializedNode | false {
   const {
@@ -830,6 +884,7 @@
     unmaskTextClass,
     maskTextSelector,
     unmaskTextSelector,
+    ignoreCSSAttributes,
   } = options;
   const needBlock = _isBlockedElement(
     n,
@@ -852,6 +907,7 @@
         attr.value,
         n,
         maskAttributeFn,
+        ignoreCSSAttributes,
       );
     }
   }
@@ -868,7 +924,7 @@
       attributes.rel = null;
       attributes.href = null;
       attributes.crossorigin = null;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -980,10 +1036,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,
         );
@@ -1213,6 +1269,7 @@
       node: serializedElementNodeWithId,
     ) => unknown;
     stylesheetLoadTimeout?: number;
+    ignoreCSSAttributes?: Set<string>;
   },
 ): serializedNodeWithId | null {
   const {
@@ -1244,6 +1301,7 @@
     stylesheetLoadTimeout = 5000,
     keepIframeSrcFn = () => false,
     newlyAddedElement = false,
+    ignoreCSSAttributes,
   } = options;
   let { preserveWhiteSpace = true } = options;
   const _serializedNode = serializeNode(n, {
@@ -1267,6 +1325,7 @@
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement,
+    ignoreCSSAttributes,
   });
   if (!_serializedNode) {
     // TODO: dev only
@@ -1350,6 +1409,7 @@
       onStylesheetLoad,
       stylesheetLoadTimeout,
       keepIframeSrcFn,
+      ignoreCSSAttributes,
     };
     const childNodes = n.childNodes ? Array.from(n.childNodes) : [];
     for (const childN of childNodes) {
@@ -1417,6 +1477,7 @@
             onStylesheetLoad,
             stylesheetLoadTimeout,
             keepIframeSrcFn,
+            ignoreCSSAttributes,
           });
 
           if (serializedIframeNode) {
@@ -1502,6 +1563,7 @@
             onStylesheetLoad,
             stylesheetLoadTimeout,
             keepIframeSrcFn,
+            ignoreCSSAttributes,
           });
 
           if (serializedLinkNode) {
@@ -1563,6 +1625,7 @@
     ) => unknown;
     stylesheetLoadTimeout?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
+    ignoreCSSAttributes?: Set<string>;
   },
 ): serializedNodeWithId | null {
   const {
@@ -1592,6 +1655,7 @@
     onStylesheetLoad,
     stylesheetLoadTimeout,
     keepIframeSrcFn = () => false,
+    ignoreCSSAttributes = new Set([]),
   } = options || {};
   const maskInputOptions: MaskInputOptions =
     maskAllInputs === true
@@ -1663,6 +1727,7 @@
     stylesheetLoadTimeout,
     keepIframeSrcFn,
     newlyAddedElement: false,
+    ignoreCSSAttributes,
   });
 }
 

packages/rrweb/src/record/index.ts

@@ -404,6 +404,7 @@
             canvasManager,
             keepIframeSrcFn,
             processedNodeManager,
+            ignoreCSSAttributes,
           },
           mirror,
         });
@@ -489,6 +490,7 @@
         });
       },
       keepIframeSrcFn,
+      ignoreCSSAttributes,
     });
 
     if (!node) {
@@ -641,7 +643,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -659,7 +661,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);

packages/rrweb/src/record/mutation.ts

@@ -199,6 +199,7 @@
   private shadowDomManager: observerParam['shadowDomManager'];
   private canvasManager: observerParam['canvasManager'];
   private processedNodeManager: observerParam['processedNodeManager'];
+  private ignoreCSSAttributes: observerParam['ignoreCSSAttributes'];
   private unattachedDoc: HTMLDocument;
 
   public init(options: MutationBufferParam) {
@@ -230,6 +231,7 @@
         'shadowDomManager',
         'canvasManager',
         'processedNodeManager',
+        'ignoreCSSAttributes',
       ] as const
     ).forEach((key) => {
       // just a type trick, the runtime result is correct
@@ -393,6 +395,7 @@
             ],
           });
         },
+        ignoreCSSAttributes: this.ignoreCSSAttributes,
       });
       if (sn) {
         adds.push({
@@ -405,13 +408,13 @@
     };
 
     while (this.mapRemoves.length) {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
     for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(n.parentNode!)
       ) {
         continue;
       }

packages/rrweb/src/types.ts

@@ -178,6 +178,7 @@ export type MutationBufferParam = Pick<
   | 'shadowDomManager'
   | 'canvasManager'
   | 'processedNodeManager'
+  | 'ignoreCSSAttributes'
 >;
 
 export type ReplayPlugin = {

packages/rrweb/test/__snapshots__/record.test.ts.snap

@@ -2558,6 +2558,107 @@ exports[`record > handles \`!important\` with "all" CSS property 1`] = `
 ]"
 `;
 
+exports[`record > ignoreCSSAttributes works on inline styles for snapshots and mutations 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"style\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"id\\": 5
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"style\\": \\"margin: 1px\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"Button\\",
+                        \\"id\\": 11
+                      }
+                    ],
+                    \\"id\\": 10
+                  }
+                ],
+                \\"id\\": 6
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  }
+]"
+`;
+
 exports[`record > is safe to checkout during async callbacks 1`] = `
 "[
   {