rrweb-io · eoghanmurray · Sep 14, 2025 · Sep 14, 2025 · Sep 15, 2025 · Sep 15, 2025
diff --git a/.changeset/cdata-rebuild-html.md b/.changeset/cdata-rebuild-html.md
@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+Fix that recording of CDATA sections were breaking rebuild
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
@@ -101,7 +101,7 @@ export function applyCssSplits(
 ): void {
   const childTextNodes = [];
   for (const scn of n.childNodes) {
-    if (scn.type === NodeType.Text) {
+    if (scn.type === NodeType.Text || scn.type === NodeType.CDATA) {
       childTextNodes.push(scn);
     }
   }
@@ -432,7 +432,13 @@ function buildNode(
       }
       return doc.createTextNode(n.textContent);
     case NodeType.CDATA:
-      return doc.createCDATASection(n.textContent);
+      /*
+        https://developer.mozilla.org/en-US/docs/Web/API/Document/createCDATASection
+        expected: DOMException: Failed to execute 'createCDATASection' on 'Document': This operation is not supported for HTML documents.
+        "createTextNode() can often be used in its place"
+      */
+      //return doc.createCDATASection(n.textContent);
+      return doc.createTextNode(n.textContent);
     case NodeType.Comment:
       return doc.createComment(n.textContent);
     default:

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -282,7 +282,7 @@
    // should warn? maybe a text node isn't attached to a parent node yet?
    return false;
  } else {
    el = dom.parentElement(node)!;
  }
  try {
    if (typeof maskTextClass === 'string') {
@@ -465,18 +465,16 @@
         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 @@
   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 @@
       ? maskTextFn(textContent, dom.parentElement(n))
       : textContent.replace(/[\S]/g, '*');
   }
-
-  return {
-    type: NodeType.Text,
-    textContent: textContent || '',
-    rootId,
-  };
+  return textContent || '';
 }
 
 function serializeElementNode(
@@ -702,10 +694,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,
        );

diff --git a/packages/rrweb-snapshot/test/__snapshots__/cdata.svg.snap.html b/packages/rrweb-snapshot/test/__snapshots__/cdata.svg.snap.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+<style>.Icon &gt; span { color: blue; }</style>
+</head>
+<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
@@ -0,0 +1,88 @@
+{
+  "type": 0,
+  "childNodes": [
+    {
+      "type": 2,
+      "tagName": "html",
+      "attributes": {},
+      "childNodes": [
+        {
+          "type": 2,
+          "tagName": "head",
+          "attributes": {},
+          "childNodes": [
+            {
+              "type": 2,
+              "tagName": "style",
+              "attributes": {
+                "_cssText": ".Icon > span { color: blue; }"
+              },
+              "childNodes": [
+                {
+                  "type": 3,
+                  "textContent": "",
+                  "id": 5
+                }
+              ],
+              "id": 4
+            }
+          ],
+          "id": 3
+        },
+        {
+          "type": 2,
+          "tagName": "body",
+          "attributes": {},
+          "childNodes": [
+            {
+              "type": 2,
+              "tagName": "svg",
+              "attributes": {
+                "xmlns": "http://www.w3.org/2000/svg",
+                "version": "1.1"
+              },
+              "childNodes": [
+                {
+                  "type": 2,
+                  "tagName": "style",
+                  "attributes": {
+                    "_cssText": ".Icon > span { color: red; }"
+                  },
+                  "childNodes": [
+                    {
+                      "type": 4,
+                      "textContent": "",
+                      "id": 9
+                    }
+                  ],
+                  "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,
+              "id": 7
+            }
+          ],
+          "id": 6
+        }
+      ],
+      "id": 2
+    }
+  ],
+  "compatMode": "BackCompat",
+  "id": 1
+}
diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts
@@ -422,6 +422,55 @@ iframe.contentDocument.querySelector('center').clientHeight
     );
     expect(snapshotResult).toMatchSnapshot();
   });
+
+  it('correctly records CDATA section in SVG', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank', {
+      waitUntil: 'load',
+    });
+    await page.evaluate(`
+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><div><![CDATA[</svg>& this is not markup<svg/>]]></div></svg>', 'image/svg+xml');
+      document.body.appendChild(defsSvg.documentElement);
+`);
+    await waitForRAF(page); // a small wait
+    const cdataType = await page.evaluate(
+      `document.querySelector('svg style').childNodes[0].nodeType`,
+    );
+    assert(cdataType === 4);
+    const snapshotResult = JSON.stringify(
+      await page.evaluate(`${code};
+        const snapshotResult = rrwebSnapshot.snapshot(document);
+        snapshotResult
+    `),
+      null,
+      2,
+    );
+    const fname = `./__snapshots__/cdata.svg.snap.json`;
+    expect(snapshotResult).toMatchFileSnapshot(fname);
+
+    await waitForRAF(page);
+    const rebuildHtml = (await page.evaluate(`
+        const x = new XMLSerializer();
+        const node = rrwebSnapshot.rebuild(JSON.parse('${snapshotResult.replace(
+          /\n/g,
+          '',
+        )}'), { doc: document })
+
+        let out = x.serializeToString(node);
+        if (document.querySelector('html').getAttribute('xmlns') !== 'http://www.w3.org/1999/xhtml') {
+          // this is just an artefact of serializeToString
+          out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', '');
+        }
+        out;  // return
+`)) as string;
+
+    const fhname = `./__snapshots__/cdata.svg.snap.html`;
+    expect(rebuildHtml.replace(/></g, '>\n<')).toMatchFileSnapshot(fhname);
+  });
 });
 
 describe('iframe integration tests', function (this: ISuite) {

diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -609,7 +609,7 @@
 export type customElementCallback = (c: customElementParam) => void;

 /**
 *  @deprecated
 */
 interface INode extends Node {
  __sn: serializedNodeWithId;
@@ -791,7 +791,7 @@
 
 export type cdataNode = {
   type: NodeType.CDATA;
-  textContent: '';
+  textContent: string;
 };
 
 export type commentNode = {