Get a valid href for a <style> element so that it can be absolutified…

… more precisely
eoghanmurray · Jul 19, 2024 · 30f9b53 · 30f9b53
1 parent 53c12d6
commit 30f9b53
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -505,6 +505,7 @@ function serializeTextNode(
   const isStyle = parentTagName === 'STYLE' ? true : undefined;
   const isScript = parentTagName === 'SCRIPT' ? true : undefined;
   if (isStyle && textContent) {
+    let stringified;
     try {
       // try to read style sheet
       if (n.nextSibling || n.previousSibling) {
@@ -513,7 +514,7 @@ function serializeTextNode(
         // to _only_ include the current rule(s) added by the text node.
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
-        textContent = stringifyStylesheet(
+        stringified = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
@@ -523,7 +524,12 @@ function serializeTextNode(
         n,
       );
     }
-    textContent = absolutifyURLs(textContent, getHref(options.doc));
+    if (stringified) {
+      // absolutifyURLs already applied
+      textContent = stringified;
+    } else {
+      textContent = absolutifyURLs(textContent, getHref(options.doc));
+    }
   }
   if (isScript) {
     textContent = 'SCRIPT_PLACEHOLDER';

diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
@@ -99,8 +99,13 @@ export function stringifyStylesheet(s: CSSStyleSheet): string | null {
     if (!rules) {
       return null;
     }
+    let sheetHref = s.href;
+    if (!sheetHref && s.ownerNode && s.ownerNode.ownerDocument) {
+      // an inline <style> element
+      sheetHref = s.ownerNode.ownerDocument.location.href;
+    }
     const stringifiedRules = Array.from(rules, (rule: CSSRule) =>
-      stringifyRule(rule, s.href),
+      stringifyRule(rule, sheetHref),
     ).join('');
     return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
   } catch (error) {