fix: Set style properties directly in mutation

packages/rrweb/src/record/mutation.ts

@@ -34,6 +34,7 @@
   inDom,
   getShadowHost,
   closestElementOfNode,
+  splitStyleAttributes,
 } from '../utils';
 
 type DoubleLinkedListNode = {
@@ -365,13 +366,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;
       }
@@ -659,7 +660,15 @@
             }
             const old = this.unattachedDoc.createElement('span');
             if (m.oldValue) {
-              old.setAttribute('style', m.oldValue);
+              // Split the style string into individual style rules
+              const styleAttributes = splitStyleAttributes(m.oldValue);
+
+              // set each style property individually to avoid csp error
+              styleAttributes.forEach(({ property, value }) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                old.style[property] = value;
+              });
             }
             for (const pname of Array.from(target.style)) {
               const newValue = target.style.getPropertyValue(pname);

packages/rrweb/src/utils.ts

@@ -34,7 +34,7 @@
   'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
   '\r\n' +
   'or you can use record.mirror to access the mirror instance during recording.';
 /** @deprecated */
 export let _mirror: DeprecatedMirror = {
   map: {},
   getId() {
@@ -118,7 +118,7 @@
           set(value) {
             // put hooked setter into event loop to avoid of set latency
             setTimeout(() => {
               d.set!.call(this, value);
             }, 0);
             if (original && original.set) {
               original.set.call(this, value);
@@ -131,7 +131,7 @@
 
 // copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
 export function patch(
   source: { [key: string]: any },
   name: string,
   replacement: (...args: unknown[]) => unknown,
 ): () => void {
@@ -670,3 +670,28 @@
 ): ReturnType<typeof window.clearTimeout> {
   return getImplementation('clearTimeout')(...rest);
 }
+
+/**
+ * Takes a styles attribute string and converts it to key value pairs
+ * @param styles - The full styles attributes string
+ *
+ */
+export function splitStyleAttributes(styles: string) {
+  const splitStyles = styles.split(';');
+  return splitStyles
+    .filter((value) => value.split(':').length == 2)
+    .map((style) => {
+      let [property, value] = style.trim().split(':');
+
+      property = property.trim();
+      value = value.trim();
+
+      // Convert kebab-case to camelCase
+      const camelCasedProperty = property.replace(
+        /-([a-z])/g,
+        (match, letter: string) => letter.toUpperCase(),
+      );
+
+      return { property: camelCasedProperty, value };
+    });
+}

packages/rrweb/test/util.test.ts

@@ -7,6 +7,7 @@ import {
   inDom,
   shadowHostInDom,
   getShadowHost,
+  splitStyleAttributes,
 } from '../src/utils';
 
 describe('Utilities for other modules', () => {
@@ -142,5 +143,18 @@ describe('Utilities for other modules', () => {
       expect(shadowHostInDom(a.childNodes[0])).toBeTruthy();
       expect(inDom(a.childNodes[0])).toBeTruthy();
     });
+
+    it('should split styles attributes', () => {
+      const styleAttribute =
+        'background-color: peachpuff; padding: 20px; margin-top: 0;';
+
+      const splitStyles = splitStyleAttributes(styleAttribute);
+
+      expect(splitStyles).toEqual([
+        { property: 'backgroundColor', value: 'peachpuff' },
+        { property: 'padding', value: '20px' },
+        { property: 'marginTop', value: '0' },
+      ]);
+    });
   });
 });