Don't ignore CDATA nodes, record their textContent; I don't believe any further escaping is needed

eoghanmurray · eoghanmurray · commit 18b68e520866 · 2025-09-15T10:47:01.000+01:00
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -465,18 +465,16 @@ function serializeNode(
         newlyAddedElement,
         rootId,
       });
-    case n.TEXT_NODE:
-      return serializeTextNode(n as Text, {
-        doc,
-        needsMask,
-        maskTextFn,
-        rootId,
-        cssCaptured,
-      });
     case n.CDATA_SECTION_NODE:
+    case n.TEXT_NODE:
       return {
-        type: NodeType.CDATA,
-        textContent: '',
+        type: n.nodeType === n.TEXT_NODE ? NodeType.Text : NodeType.CDATA,
+        textContent: serializeTextContent(n as Text, {
+          doc,
+          needsMask,
+          maskTextFn,
+          cssCaptured,
+        }),
         rootId,
       };
     case n.COMMENT_NODE:
@@ -496,17 +494,16 @@ function getRootId(doc: Document, mirror: Mirror): number | undefined {
   return docId === 1 ? undefined : docId;
 }
 
-function serializeTextNode(
-  n: Text,
+function serializeTextContent(
+  n: Text | CDATASection,
   options: {
     doc: Document;
     needsMask: boolean;
     maskTextFn: MaskTextFn | undefined;
-    rootId: number | undefined;
     cssCaptured?: boolean;
   },
-): serializedNode {
-  const { needsMask, maskTextFn, rootId, cssCaptured } = options;
+): string {
+  const { needsMask, maskTextFn, cssCaptured } = options;
   // The parent node may not be a html element which has a tagName attribute.
   // So just let it be undefined which is ok in this use case.
   const parent = dom.parentNode(n);
@@ -531,12 +528,7 @@ function serializeTextNode(
       ? maskTextFn(textContent, dom.parentElement(n))
       : textContent.replace(/[\S]/g, '*');
   }
-
-  return {
-    type: NodeType.Text,
-    textContent: textContent || '',
-    rootId,
-  };
+  return textContent || '';
 }
 
 function serializeElementNode(
diff --git a/packages/rrweb-snapshot/test/__snapshots__/cdata.svg.snap.html b/packages/rrweb-snapshot/test/__snapshots__/cdata.svg.snap.html
@@ -6,6 +6,7 @@
 <body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <style>.Icon &gt; span { color: red; }</style>
+<div>&lt;/svg&gt;&amp; this is not markup&lt;svg/&gt;</div>
 </svg>
 </body>
 </html>
diff --git a/packages/rrweb-snapshot/test/__snapshots__/cdata.svg.snap.json b/packages/rrweb-snapshot/test/__snapshots__/cdata.svg.snap.json
@@ -57,6 +57,20 @@
                   ],
                   "isSVG": true,
                   "id": 8
+                },
+                {
+                  "type": 2,
+                  "tagName": "div",
+                  "attributes": {},
+                  "childNodes": [
+                    {
+                      "type": 4,
+                      "textContent": "</svg>& this is not markup<svg/>",
+                      "id": 11
+                    }
+                  ],
+                  "isSVG": true,
+                  "id": 10
                 }
               ],
               "isSVG": true,
diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts
@@ -433,7 +433,7 @@ const regularStyle = document.createElement('style');
 regularStyle.innerText = '.Icon > span{ color: blue; }'
 document.head.append(regularStyle);
 const defsSvg = (new window.DOMParser()).parseFromString(
-'<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><style><![CDATA[.Icon > span{ color: red; }]]></style></svg>', 'image/svg+xml');
+'<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><style><![CDATA[.Icon > span{ color: red; }]]></style><div><![CDATA[</svg>& this is not markup<svg/>]]></div></svg>', 'image/svg+xml');
       document.body.appendChild(defsSvg.documentElement);
 `);
     await waitForRAF(page); // a small wait
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -791,7 +791,7 @@ export type textNode = {
 
 export type cdataNode = {
   type: NodeType.CDATA;
-  textContent: '';
+  textContent: string;
 };
 
 export type commentNode = {
