Fix relative path detection in stylesheet URLs (#1130)

* Fix relative path detection in stylesheet URLs * Add a check for www. * Update packages/rrweb-snapshot/src/snapshot.ts * Update packages/rrweb-snapshot/src/snapshot.ts * Create large-ants-prove.md * Update large-ants-prove.md --------- Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
rrweb-io · Feb 15, 2023 · f6f07e9 · f6f07e9
1 parent 06031a6
commit f6f07e9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/large-ants-prove.md b/.changeset/large-ants-prove.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Fix: Make relative path detection in stylesheet URLs to detect more types of URL protocols when inlining stylesheets.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -71,7 +71,8 @@ let canvasService: HTMLCanvasElement | null;
 let canvasCtx: CanvasRenderingContext2D | null;
 
 const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
-const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
+const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
+const URL_WWW_MATCH = /^www\..*/i;
 const DATA_URI = /^(data:)([^,]*),(.*)/i;
 export function absoluteToStylesheet(
   cssText: string | null,
@@ -92,7 +93,7 @@ export function absoluteToStylesheet(
       if (!filePath) {
         return origin;
       }
-      if (!RELATIVE_PATH.test(filePath)) {
+      if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
         return `url(${maybeQuote}${filePath}${maybeQuote})`;
       }
       if (DATA_URI.test(filePath)) {