diff --git a/.changeset/large-ants-prove.md b/.changeset/large-ants-prove.md new file mode 100644 index 0000000000..9c7681beb3 --- /dev/null +++ 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 index e8078388a7..5d348a2108 100644 --- 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)) {