From 1bfa38c0463c224c6ddc14c5dae3fe6f9dd3a72a Mon Sep 17 00:00:00 2001
From: Meg Boehlert <meg.boehlert@pendo.io>
Date: Tue, 17 Jun 2025 10:12:26 -0400
Subject: [PATCH] use node.baseURI for stringifying stylesheet hrefs

---
 .changeset/lucky-trainers-joke.md          |  5 +++
 packages/rrweb-snapshot/src/utils.ts       |  4 +-
 packages/rrweb-snapshot/test/utils.test.ts | 45 ++++++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/lucky-trainers-joke.md

diff --git a/.changeset/lucky-trainers-joke.md b/.changeset/lucky-trainers-joke.md
new file mode 100644
index 0000000000..a91920d378
--- /dev/null
+++ b/.changeset/lucky-trainers-joke.md
@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+use ownerNode.baseURI for stringifying sheet hrefs
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
index 102787c666..418ce8230a 100644
--- a/packages/rrweb-snapshot/src/utils.ts
+++ b/packages/rrweb-snapshot/src/utils.ts
@@ -118,9 +118,9 @@ export function stringifyStylesheet(s: CSSStyleSheet): string | null {
       return null;
     }
     let sheetHref = s.href;
-    if (!sheetHref && s.ownerNode && s.ownerNode.ownerDocument) {
+    if (!sheetHref && s.ownerNode) {
       // an inline <style> element
-      sheetHref = s.ownerNode.ownerDocument.location.href;
+      sheetHref = s.ownerNode.baseURI;
     }
     const stringifiedRules = Array.from(rules, (rule: CSSRule) =>
       stringifyRule(rule, sheetHref),
diff --git a/packages/rrweb-snapshot/test/utils.test.ts b/packages/rrweb-snapshot/test/utils.test.ts
index 0a82d8c16c..b657ce52c4 100644
--- a/packages/rrweb-snapshot/test/utils.test.ts
+++ b/packages/rrweb-snapshot/test/utils.test.ts
@@ -280,4 +280,49 @@ describe('utils', () => {
       expect(out3).toEqual('[data-aa\\:other] { color: red; }');
     });
   });
+
+  describe('stringifyStylesheet', () => {
+    it('returns null if rules are missing', () => {
+      const mockSheet = {
+        rules: null,
+        cssRules: null,
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toBeNull();
+    });
+
+    it('stringifies rules using .cssRules if .rules is missing', () => {
+      const mockRule1 = { cssText: 'div { margin: 0; }' } as CSSRule;
+      const mockSheet = {
+        cssRules: [mockRule1],
+        href: 'https://example.com/main.css',
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toBe('div { margin: 0; }');
+    });
+
+    it('uses ownerNode.baseURI for inline styles', () => {
+      const mockFontFaceRule = {
+        cssText: `
+          @font-face {
+            font-family: 'MockFont';
+            src: url('../fonts/mockfont.woff2') format('woff2');
+            font-weight: normal;
+            font-style: normal;
+          }
+        `,
+      } as CSSRule;
+      const mockOwnerNode = {
+        baseURI: 'https://example.com/fonts/',
+      } as unknown as Node;
+      const mockSheet = {
+        cssRules: [mockFontFaceRule],
+        href: null,
+        ownerNode: mockOwnerNode,
+      } as unknown as CSSStyleSheet;
+      expect(
+        stringifyStylesheet(mockSheet)?.replace(/\s+/g, ' ').trim(),
+      ).toEqual(
+        "@font-face { font-family: 'MockFont'; src: url('https://example.com/fonts/mockfont.woff2') format('woff2'); font-weight: normal; font-style: normal; }",
+      );
+    });
+  });
 });