fix(rrweb-snapshot): rewrite vulnerable regexes flagged by CodeQL

packages/rrweb-snapshot/src/css.ts

@@ -439,10 +439,9 @@ export function parse(css: string, options: ParserOptions = {}) {
       return;
     }
 
-    /* @fix Remove all comments from selectors
-     * http://ostermiller.org/findcomment.html */
+    /* @fix Remove all comments from selectors */
     const splitSelectors = trim(m[0])
-      .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
+      .replace(/\/\*[\s\S]*?\*\/+/g, '')
       .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (m) => {
         return m.replace(/,/g, '\u200C');
       })

packages/rrweb-snapshot/src/snapshot.ts

@@ -775,7 +775,7 @@
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
         textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
     } catch (err) {
@@ -927,7 +927,7 @@
       attributes.rel = null;
       attributes.href = null;
       attributes.crossorigin = null;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -1039,10 +1039,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
@@ -1345,7 +1345,7 @@
     (!preserveWhiteSpace &&
       _serializedNode.type === NodeType.Text &&
       !_serializedNode.isStyle &&
-      !_serializedNode.textContent.replace(/^\s+|\s+$/gm, '').length)
+      !_serializedNode.textContent.trim().length)
   ) {
     id = IGNORED_NODE;
   } else {

packages/rrweb-snapshot/test/css.test.ts

@@ -97,6 +97,29 @@ describe('css parser', () => {
     expect(decl.parent).toEqual(rule);
   });
 
+  it('should strip comments from selectors', () => {
+    const cases: Array<[string, string[]]> = [
+      ['.foo /* comment */, .bar { color: red; }', ['.foo', '.bar']],
+      ['a /* x */ b, c /* y */ d { color: red; }', ['a  b', 'c  d']],
+      ['.x /* trailing */ { color: red; }', ['.x']],
+    ];
+    for (const [css, expected] of cases) {
+      const rules = parse(css).stylesheet!.rules.filter(
+        (r): r is Rule => r.type === 'rule',
+      );
+      expect(rules[0].selectors?.map((s) => s.trim())).toEqual(expected);
+    }
+  });
+
+  it('should not catastrophically backtrack on unterminated selector comments', () => {
+    const evil = '/*' + '\n*'.repeat(40);
+    const start = Date.now();
+    expect(() =>
+      parse(`${evil} { color: red; }`, { silent: true }),
+    ).not.toThrow();
+    expect(Date.now() - start).toBeLessThan(500);
+  });
+
   // TODO(sentry): our parser can't handle this atm
   it.skip('parses { and } in attribute selectors correctly', () => {
     const result = parse('foo[someAttr~="{someId}"] { color: red; }');