PostHog · pauldambra · Sep 14, 2025
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
@@ -361,6 +361,11 @@ function buildNode(
         return null;
       }
 
+      /*
+        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);
     case NodeType.Comment:
       return doc.createComment(n.textContent);

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,10 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+</head>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+<style>.Icon &gt; span { color: red; }</style>
+</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,58 @@
+{
+  "type": 0,
+  "childNodes": [
+    {
+      "type": 2,
+      "tagName": "html",
+      "attributes": {},
+      "childNodes": [
+        {
+          "type": 2,
+          "tagName": "head",
+          "attributes": {},
+          "childNodes": [],
+          "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": 7
+                    }
+                  ],
+                  "isSVG": true,
+                  "id": 6
+                }
+              ],
+              "isSVG": true,
+              "id": 5
+            }
+          ],
+          "id": 4
+        }
+      ],
+      "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,51 @@ 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 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');
+      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) {