From 43689b753177651d674fc2aa9f5aa98b09b160bd Mon Sep 17 00:00:00 2001
From: Meg Boehlert <meg.boehlert@pendo.io>
Date: Wed, 4 Jun 2025 15:30:18 -0400
Subject: [PATCH] use node.baseURI for sheetHref when handling inline styles

---
 .changeset/angry-roses-beam.md             |  5 +++
 .changeset/twelve-nails-occur.md           |  5 +++
 packages/rrweb-snapshot/src/utils.ts       |  4 +-
 packages/rrweb-snapshot/test/utils.test.ts | 46 ++++++++++++++++++++++
 4 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/angry-roses-beam.md
 create mode 100644 .changeset/twelve-nails-occur.md

diff --git a/.changeset/angry-roses-beam.md b/.changeset/angry-roses-beam.md
new file mode 100644
index 0000000000..cd19e39cd9
--- /dev/null
+++ b/.changeset/angry-roses-beam.md
@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+use ownerNode baseURI for stringifying stylesheet href
diff --git a/.changeset/twelve-nails-occur.md b/.changeset/twelve-nails-occur.md
new file mode 100644
index 0000000000..948bc2279a
--- /dev/null
+++ b/.changeset/twelve-nails-occur.md
@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+Prefer the <base href> for resolving inline <style> URLs, falling back to document location if not present.
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..0d0c1eb1ae 100644
--- a/packages/rrweb-snapshot/test/utils.test.ts
+++ b/packages/rrweb-snapshot/test/utils.test.ts
@@ -7,6 +7,7 @@ import {
   extractFileExtension,
   fixSafariColons,
   isNodeMetaEqual,
+  stringifyStylesheet
 } from '../src/utils';
 import { NodeType } from '@rrweb/types';
 import type { serializedNode, serializedNodeWithId } from '@rrweb/types';
@@ -280,4 +281,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; }"
+      );
+    });
+  });
 });