fix(snapshot): Set <link> attributes to null for remote CSS (#227)

When in-lining CSS for remote CSS, set attributes to `null` instead of deleting the attributes. The former does not generate a mutation for the attributes. Also include `crossorigin` as an attribute to be removed.
getsentry · Dec 10, 2024 · 542e0d0 · 542e0d0
1 parent a6b4a88
commit 542e0d0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -870,8 +870,9 @@ function serializeElementNode(
       cssText = stringifyStylesheet(stylesheet);
     }
     if (cssText) {
-      delete attributes.rel;
-      delete attributes.href;
+      attributes.rel = null;
+      attributes.href = null;
+      attributes.crossorigin = null;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }

diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap
@@ -271,6 +271,7 @@ exports[`record captures CORS stylesheets that are still loading 1`] = `
             \\"tagName\\": \\"link\\",
             \\"attributes\\": {
               \\"rel\\": \\"stylesheet\\",
+              \\"crossorigin\\": \\"\\",
               \\"href\\": \\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\"
             },
             \\"childNodes\\": [],
@@ -279,6 +280,26 @@ exports[`record captures CORS stylesheets that are still loading 1`] = `
         }
       ]
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 9,
+          \\"attributes\\": {
+            \\"rel\\": null,
+            \\"crossorigin\\": null,
+            \\"href\\": null,
+            \\"_cssText\\": \\"body { font-family: verdana, helvetica, arial; }.exampleList { margin: 0px; padding: 0px; list-style-type: none; }h3 { margin: 1em 0px 0.3em; float: left; clear: both; }a { color: rgb(51, 102, 153); text-decoration: none; outline: none; padding: 0px 0.5em; }a:hover { background: rgb(51, 102, 153); color: rgb(255, 255, 255); }.run, .debug { display: block; float: left; margin: 1.3em 0px 0px 1em; }.sources, .template { clear: both; padding: 1em; background: rgb(221, 238, 255); margin: 0px 0px 0px 1em; overflow: auto; }#chooseLib a { font-size: 0.8em; background: rgb(255, 255, 187); padding: 0.3em; text-decoration: underline; }#chooseLib a:hover { background: rgb(51, 102, 153); }#examples { display: none; }#chooseLib { line-height: 1.5em; border: 1px solid rgb(204, 204, 204); padding: 1em; background: rgb(255, 255, 204); }input.lib { font-weight: bold; }.note { color: rgb(153, 153, 153); font-size: 0.75em; }pre { font-family: Monaco, \\\\\\"Courier New\\\\\\", monospace; color: rgb(68, 68, 68); font-size: 75%; }#sourceCodes { clear: both; }.sourceCode { background: rgb(238, 238, 255); border: 1px solid rgb(204, 204, 204); padding: 1%; margin: 1%; overflow: auto; max-height: 300px; }.sourceCode pre { }.cols2 .sourceCode { float: left; width: 44%; }.cols3 .sourceCode { float: left; width: 27%; }.playerList td { padding: 0px 1em; border: 1px solid rgb(153, 153, 153); }.odd td { background: rgb(255, 255, 255); }.partialTable td { padding: 0px 1em; border: 1px solid rgb(153, 153, 153); }.teamPlace table { width: 100%; }.scoreBoard td { padding: 0px 1em; border: 1px solid rgb(153, 153, 153); }\\"
+          }
+        }
+      ]
+    }
   }
 ]"
 `;
@@ -2303,6 +2324,9 @@ exports[`record captures stylesheets in iframes with \`blob:\` url 1`] = `
                         \\"type\\": 2,
                         \\"tagName\\": \\"link\\",
                         \\"attributes\\": {
+                          \\"rel\\": null,
+                          \\"href\\": null,
+                          \\"crossorigin\\": null,
                           \\"_cssText\\": \\"body { color: pink; }\\"
                         },
                         \\"childNodes\\": [],
@@ -2377,6 +2401,9 @@ exports[`record captures stylesheets with \`blob:\` url 1`] = `
                     \\"type\\": 2,
                     \\"tagName\\": \\"link\\",
                     \\"attributes\\": {
+                      \\"rel\\": null,
+                      \\"href\\": null,
+                      \\"crossorigin\\": null,
                       \\"_cssText\\": \\"body { color: pink; }\\"
                     },
                     \\"childNodes\\": [],
@@ -3349,6 +3376,9 @@ exports[`record loading stylesheets captures stylesheets in iframes that are sti
         {
           \\"id\\": 36,
           \\"attributes\\": {
+            \\"rel\\": null,
+            \\"href\\": null,
+            \\"crossorigin\\": null,
             \\"_cssText\\": \\"body { color: pink; }\\"
           }
         }
@@ -3529,6 +3559,9 @@ exports[`record loading stylesheets captures stylesheets that are still loading
         {
           \\"id\\": 18,
           \\"attributes\\": {
+            \\"rel\\": null,
+            \\"href\\": null,
+            \\"crossorigin\\": null,
             \\"_cssText\\": \\"body { color: pink; }\\"
           }
         }

diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
@@ -937,6 +937,7 @@ describe('record', function (this: ISuite) {
 
       const link1 = document.createElement('link');
       link1.setAttribute('rel', 'stylesheet');
+      link1.setAttribute('crossorigin', '');
       link1.setAttribute('href', corsStylesheetURL);
       document.head.appendChild(link1);
     }, corsStylesheetURL);