xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix and test for bug #1457 (#1481)

Browse Source 
* Fix and test for bug #1457 (Uncaught SyntaxError: Regular expression too large)

 - see test case which is extracted from a real world css file; the selector regex was able to traverse the curly brace as when looking for quotes, it wasn't taking into account that the start quote could be escaped

* Apply formatting changes

* Create fair-ducks-clean.md

* Fix @import regex bit which was stopping consumption in the middle of a url - need to consume quotes.

Thanks dave.kindel@pendo.io for reporting and isolating this case

---------

Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
This commit is contained in:
Eoghan Murray
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 711a7cbbaa
commit 1fd5c2bc00
4 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/rrweb-snapshot/src/css.ts
View File

@@ -433,7 +433,7 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
}
// Use match logic from https://github.com/NxtChg/pieces/blob/3eb39c8287a97632e9347a24f333d52d916bc816/js/css_parser/css_parse.js#L46C1-L47C1
const m = match(/^(("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^{])+)/);
const m = match(/^(((?<!\\)"(?:\\"|[^"])*"|(?<!\\)'(?:\\'|[^'])*'|[^{])+)/);
if (!m) {
return;
}
@@ -864,7 +864,17 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
*/
function _compileAtrule(name: string) {
const re = new RegExp('^@' + name + '\\s*([^;]+);');
const re = new RegExp(
'^@' +
name +
'\\s*((?:' +
[
'(?<!\\\\)"(?:\\\\"|[^"])*"',
"(?<!\\\\)'(?:\\\\'|[^'])*'",
'[^;]',
].join('|') +
')+);',
);
return () => {
const pos = position();
const m = match(re);

19
packages/rrweb-snapshot/test/rebuild.test.ts
View File

@@ -203,4 +203,23 @@ ul li.specified c:hover img, ul li.specified c.\\:hover img {
expect(getDuration(cachedEnd) * factor).toBeLessThan(getDuration(end));
});
});
it('should not incorrectly interpret escaped quotes', () => {
// the ':hover' in the below is a decoy which is not part of the selector,
// previously that part was being incorrectly consumed by the selector regex
const should_not_modify =
".tailwind :is(.before\\:content-\\[\\'\\'\\])::before { --tw-content: \":hover\"; content: var(--tw-content); }.tailwind :is(.\\[\\&\\>li\\]\\:before\\:content-\\[\\'-\\'\\] > li)::before { color: pink; }";
expect(adaptCssForReplay(should_not_modify, cache)).toEqual(
should_not_modify,
);
});
it('should not incorrectly interpret at rules', () => {
// the ':hover' in the below is a decoy which is not part of the selector,
const should_not_modify =
'@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;1,400&display=:hover");';
expect(adaptCssForReplay(should_not_modify, cache)).toEqual(
should_not_modify,
);
});
});