@kubesense/kubesense-browser-rum 1.0.0

package/src/domain/record/serialization/serializationTransaction.ts

@@ -0,0 +1,94 @@
+import { elapsed, timeStampNow } from '@kubesense/kubesense-browser-core'
+
+import type { BrowserRecord } from '../../../types'
+import type { NodeId } from '../nodeIds'
+import type { EmitRecordCallback, EmitStatsCallback } from '../record.types'
+import type { RecordingScope } from '../recordingScope'
+import type { SerializationStats } from './serializationStats'
+import { createSerializationStats, updateSerializationStats } from './serializationStats'
+
+export type SerializationTransactionCallback = (transaction: SerializationTransaction) => void
+
+export const enum SerializationKind {
+  INITIAL_FULL_SNAPSHOT,
+  SUBSEQUENT_FULL_SNAPSHOT,
+  INCREMENTAL_SNAPSHOT,
+}
+
+/**
+ * A serialization transaction is used to build and emit a sequence of session replay
+ * records containing a serialized snapshot of the DOM.
+ */
+export interface SerializationTransaction {
+  /** Add a record to the transaction. It will be emitted when the transaction ends. */
+  add(record: BrowserRecord): void
+
+  /**
+   * Add a metric to the transaction's statistics. The aggregated statistics will be
+   * emitted when the transaction ends.
+   */
+  addMetric(metric: keyof SerializationStats, value: number): void
+
+  /**
+   * Assign and return an id to the given node. If the node has previously been assigned
+   * an id, the existing id will be reused.
+   */
+  assignId(node: Node): NodeId
+
+  /** The kind of serialization being performed in this transaction. */
+  kind: SerializationKind
+
+  /**
+   * A set used to track nodes which have been serialized in the current transaction. If
+   * undefined, this feature is disabled; this is the default state in new transactions
+   * for performance reasons. Set the property to a non-undefined value if you need this
+   * capability.
+   */
+  serializedNodeIds?: Set<NodeId>
+
+  /** The recording scope in which this transaction is occurring. */
+  scope: RecordingScope
+}
+
+/**
+ * Perform serialization within a transaction. At the end of the transaction, the
+ * generated records and statistics will be emitted.
+ */
+export function serializeInTransaction(
+  kind: SerializationKind,
+  emitRecord: EmitRecordCallback,
+  emitStats: EmitStatsCallback,
+  scope: RecordingScope,
+  serialize: SerializationTransactionCallback
+): void {
+  const records: BrowserRecord[] = []
+  const stats = createSerializationStats()
+
+  const transaction: SerializationTransaction = {
+    add(record: BrowserRecord): void {
+      records.push(record)
+    },
+    addMetric(metric: keyof SerializationStats, value: number): void {
+      updateSerializationStats(stats, metric, value)
+    },
+    assignId(node: Node): NodeId {
+      const id = scope.nodeIds.assign(node)
+      if (transaction.serializedNodeIds) {
+        transaction.serializedNodeIds.add(id)
+      }
+      return id
+    },
+    kind,
+    scope,
+  }
+
+  const start = timeStampNow()
+  serialize(transaction)
+  updateSerializationStats(stats, 'serializationDuration', elapsed(start, timeStampNow()))
+
+  for (const record of records) {
+    emitRecord(record)
+  }
+
+  emitStats(stats)
+}

package/src/domain/record/serialization/serializationUtils.ts

@@ -0,0 +1,103 @@
+import { buildUrl } from '@kubesense/kubesense-browser-core'
+import { CENSORED_STRING_MARK, shouldMaskNode } from '@kubesense/kubesense-browser-rum-core'
+import type { NodePrivacyLevel } from '@kubesense/kubesense-browser-rum-core'
+
+/**
+ * Get the element "value" to be serialized as an attribute or an input update record. It respects
+ * the input privacy mode of the element.
+ * PERFROMANCE OPTIMIZATION: Assumes that privacy level `HIDDEN` is never encountered because of earlier checks.
+ */
+export function getElementInputValue(element: Element, nodePrivacyLevel: NodePrivacyLevel) {
+  /*
+   BROWSER SPEC NOTE: <input>, <select>
+   For some <input> elements, the `value` is an exceptional property/attribute that has the
+   value synced between el.value and el.getAttribute()
+   input[type=button,checkbox,hidden,image,radio,reset,submit]
+   */
+  const tagName = element.tagName
+  const value = (element as HTMLInputElement | HTMLTextAreaElement).value
+
+  if (shouldMaskNode(element, nodePrivacyLevel)) {
+    const type = (element as HTMLInputElement | HTMLTextAreaElement).type
+    if (tagName === 'INPUT' && (type === 'button' || type === 'submit' || type === 'reset')) {
+      // Overrule `MASK` privacy level for button-like element values, as they are used during replay
+      // to display their label. They can still be hidden via the "hidden" privacy attribute or class name.
+      return value
+    } else if (!value || tagName === 'OPTION') {
+      // <Option> value provides no benefit
+      return
+    }
+    return CENSORED_STRING_MARK
+  }
+
+  if (tagName === 'OPTION' || tagName === 'SELECT') {
+    return (element as HTMLOptionElement | HTMLSelectElement).value
+  }
+
+  if (tagName !== 'INPUT' && tagName !== 'TEXTAREA') {
+    return
+  }
+
+  return value
+}
+
+export const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm
+export const ABSOLUTE_URL = /^[A-Za-z]+:|^\/\//
+export const DATA_URI = /^["']?data:.*,/i
+
+export function switchToAbsoluteUrl(cssText: string, cssHref: string | null): string {
+  return cssText.replace(
+    URL_IN_CSS_REF,
+    (
+      matchingSubstring: string,
+      singleQuote: string | undefined,
+      urlWrappedInSingleQuotes: string | undefined,
+      doubleQuote: string | undefined,
+      urlWrappedInDoubleQuotes: string | undefined,
+      urlNotWrappedInQuotes: string | undefined
+    ) => {
+      const url = urlWrappedInSingleQuotes || urlWrappedInDoubleQuotes || urlNotWrappedInQuotes
+
+      if (!cssHref || !url || ABSOLUTE_URL.test(url) || DATA_URI.test(url)) {
+        return matchingSubstring
+      }
+
+      const quote = singleQuote || doubleQuote || ''
+      return `url(${quote}${makeUrlAbsolute(url, cssHref)}${quote})`
+    }
+  )
+}
+
+function makeUrlAbsolute(url: string, baseUrl: string): string {
+  try {
+    return buildUrl(url, baseUrl).href
+  } catch {
+    return url
+  }
+}
+
+const TAG_NAME_REGEX = /[^a-z1-6-_]/
+export function getValidTagName(tagName: string): string {
+  const processedTagName = tagName.toLowerCase().trim()
+
+  if (TAG_NAME_REGEX.test(processedTagName)) {
+    // if the tag name is odd and we cannot extract
+    // anything from the string, then we return a
+    // generic div
+    return 'div'
+  }
+
+  return processedTagName
+}
+
+/**
+ * Returns the tag name of the given element, normalized to ensure a consistent lowercase
+ * representation regardless of whether the element is HTML, XHTML, or SVG.
+ */
+export function normalizedTagName(element: Element): string {
+  return element.tagName.toLowerCase()
+}
+
+export function censoredImageForSize(width: number, height: number) {
+  return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}' style='background-color:silver'%3E%3C/svg%3E`
+}

package/src/domain/record/serialization/serializeAttribute.ts

@@ -0,0 +1,55 @@
+import {
+  NodePrivacyLevel,
+  CENSORED_STRING_MARK,
+  CENSORED_IMG_MARK,
+  sanitizeIfLongDataUrl,
+  shouldMaskAttribute,
+} from '@kubesense/kubesense-browser-rum-core'
+import type { RumConfiguration } from '@kubesense/kubesense-browser-rum-core'
+import { censoredImageForSize } from './serializationUtils'
+
+// TODO: temporarily bump the Session Replay limit to 1Mb for dataUrls
+// This limit should be removed after [PANA-2843] is implemented
+export const MAX_ATTRIBUTE_VALUE_CHAR_LENGTH = 1_000_000
+
+export function serializeAttribute(
+  element: Element,
+  nodePrivacyLevel: NodePrivacyLevel,
+  attributeName: string,
+  configuration: RumConfiguration
+): string | null {
+  if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
+    // dup condition for direct access case
+    return null
+  }
+
+  const attributeValue = element.getAttribute(attributeName)
+  const tagName = element.tagName
+  if (shouldMaskAttribute(tagName, attributeName, attributeValue, nodePrivacyLevel, configuration)) {
+    // mask image URLs
+    if (tagName === 'IMG') {
+      // generate image with similar dimension than the original to have the same rendering behaviour
+      const image = element as HTMLImageElement
+      if (image.naturalWidth > 0) {
+        return censoredImageForSize(image.naturalWidth, image.naturalHeight)
+      }
+      const { width, height } = element.getBoundingClientRect()
+      if (width > 0 || height > 0) {
+        return censoredImageForSize(width, height)
+      }
+      // if we can't get the image size, fallback to the censored image
+      return CENSORED_IMG_MARK
+    }
+    if (tagName === 'SOURCE') {
+      return CENSORED_IMG_MARK
+    }
+
+    return CENSORED_STRING_MARK
+  }
+
+  if (!attributeValue) {
+    return attributeValue
+  }
+
+  return sanitizeIfLongDataUrl(attributeValue, MAX_ATTRIBUTE_VALUE_CHAR_LENGTH)
+}

package/src/domain/record/serialization/serializeAttributes.ts

@@ -0,0 +1,194 @@
+import { NodePrivacyLevel, shouldMaskNode } from '@kubesense/kubesense-browser-rum-core'
+import { isSafari } from '@kubesense/kubesense-browser-core'
+import { getElementInputValue, normalizedTagName, switchToAbsoluteUrl } from './serializationUtils'
+import { serializeAttribute } from './serializeAttribute'
+import type { SerializationTransaction } from './serializationTransaction'
+import { SerializationKind } from './serializationTransaction'
+import type { VirtualAttributes } from './serialization.types'
+
+export function serializeAttributes(
+  element: Element,
+  nodePrivacyLevel: NodePrivacyLevel,
+  transaction: SerializationTransaction
+): Record<string, number | string> {
+  return {
+    ...serializeDOMAttributes(element, nodePrivacyLevel, transaction),
+    ...serializeVirtualAttributes(element, nodePrivacyLevel, transaction),
+  }
+}
+
+export function serializeDOMAttributes(
+  element: Element,
+  nodePrivacyLevel: NodePrivacyLevel,
+  transaction: SerializationTransaction
+): Record<string, string> {
+  if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
+    return {}
+  }
+
+  const attrs: Record<string, string> = {}
+  const tagName = normalizedTagName(element)
+
+  for (let i = 0; i < element.attributes.length; i += 1) {
+    const attribute = element.attributes.item(i)!
+    const attributeName = attribute.name
+    const attributeValue = serializeAttribute(element, nodePrivacyLevel, attributeName, transaction.scope.configuration)
+    if (attributeValue !== null) {
+      attrs[attributeName] = attributeValue
+    }
+  }
+
+  if (
+    (element as HTMLInputElement).value &&
+    (tagName === 'textarea' || tagName === 'select' || tagName === 'option' || tagName === 'input')
+  ) {
+    const formValue = getElementInputValue(element, nodePrivacyLevel)
+    if (formValue !== undefined) {
+      attrs.value = formValue
+    }
+  }
+
+  /**
+   * <Option> can be selected, which occurs if its `value` matches ancestor `<Select>.value`
+   */
+  if (tagName === 'option') {
+    const optionElement = element as HTMLOptionElement
+    if (optionElement.selected && !shouldMaskNode(optionElement, nodePrivacyLevel)) {
+      attrs.selected = ''
+    } else {
+      delete attrs.selected
+    }
+  }
+
+  /**
+   * Forms: input[type=checkbox,radio]
+   * The `checked` property for <input> is a little bit special:
+   * 1. el.checked is a setter that returns if truthy.
+   * 2. getAttribute returns the string value
+   * getAttribute('checked') does not sync with `Element.checked`, so use JS property
+   * NOTE: `checked` property exists on `HTMLInputElement`. For serializer assumptions, we check for type=radio|check.
+   */
+  const inputElement = element as HTMLInputElement
+  if (tagName === 'input' && (inputElement.type === 'radio' || inputElement.type === 'checkbox')) {
+    if (inputElement.checked && !shouldMaskNode(inputElement, nodePrivacyLevel)) {
+      attrs.checked = ''
+    } else {
+      delete attrs.checked
+    }
+  }
+
+  return attrs
+}
+
+export function serializeVirtualAttributes(
+  element: Element,
+  nodePrivacyLevel: NodePrivacyLevel,
+  transaction: SerializationTransaction
+): VirtualAttributes {
+  if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
+    return {}
+  }
+
+  const attrs: VirtualAttributes = {}
+  const doc = element.ownerDocument
+  const tagName = normalizedTagName(element)
+
+  // remote css
+  if (tagName === 'link') {
+    const stylesheet = Array.from(doc.styleSheets).find((s) => s.href === (element as HTMLLinkElement).href)
+    const cssText = getCssRulesString(stylesheet)
+    if (cssText && stylesheet) {
+      transaction.addMetric('cssText', cssText.length)
+      attrs._cssText = cssText
+    }
+  }
+
+  // dynamic stylesheet
+  if (tagName === 'style' && (element as HTMLStyleElement).sheet) {
+    const cssText = getCssRulesString((element as HTMLStyleElement).sheet)
+    if (cssText) {
+      transaction.addMetric('cssText', cssText.length)
+      attrs._cssText = cssText
+    }
+  }
+
+  /**
+   * Serialize the media playback state
+   */
+  if (tagName === 'audio' || tagName === 'video') {
+    const mediaElement = element as HTMLMediaElement
+    attrs.rr_mediaState = mediaElement.paused ? 'paused' : 'played'
+  }
+
+  /**
+   * Serialize the scroll state for each element only for full snapshot
+   */
+  let scrollTop: number | undefined
+  let scrollLeft: number | undefined
+  switch (transaction.kind) {
+    case SerializationKind.INITIAL_FULL_SNAPSHOT:
+      scrollTop = Math.round(element.scrollTop)
+      scrollLeft = Math.round(element.scrollLeft)
+      if (scrollTop || scrollLeft) {
+        transaction.scope.elementsScrollPositions.set(element, { scrollTop, scrollLeft })
+      }
+      break
+    case SerializationKind.SUBSEQUENT_FULL_SNAPSHOT:
+      if (transaction.scope.elementsScrollPositions.has(element)) {
+        ;({ scrollTop, scrollLeft } = transaction.scope.elementsScrollPositions.get(element)!)
+      }
+      break
+  }
+  if (scrollLeft) {
+    attrs.rr_scrollLeft = scrollLeft
+  }
+  if (scrollTop) {
+    attrs.rr_scrollTop = scrollTop
+  }
+
+  return attrs
+}
+
+export function getCssRulesString(cssStyleSheet: CSSStyleSheet | undefined | null): string | null {
+  if (!cssStyleSheet) {
+    return null
+  }
+  let rules: CSSRuleList | undefined
+  try {
+    rules = cssStyleSheet.rules || cssStyleSheet.cssRules
+  } catch {
+    // if css is protected by CORS we cannot access cssRules see: https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface
+  }
+  if (!rules) {
+    return null
+  }
+  const styleSheetCssText = Array.from(rules, isSafari() ? getCssRuleStringForSafari : getCssRuleString).join('')
+  return switchToAbsoluteUrl(styleSheetCssText, cssStyleSheet.href)
+}
+
+function getCssRuleStringForSafari(rule: CSSRule): string {
+  // Safari does not escape attribute selectors containing : properly
+  // https://bugs.webkit.org/show_bug.cgi?id=184604
+  if (isCSSStyleRule(rule) && rule.selectorText.includes(':')) {
+    // This regex replaces [foo:bar] by [foo\\:bar]
+    const escapeColon = /(\[[\w-]+[^\\])(:[^\]]+\])/g
+    return rule.cssText.replace(escapeColon, '$1\\$2')
+  }
+
+  return getCssRuleString(rule)
+}
+
+function getCssRuleString(rule: CSSRule): string {
+  // If it's an @import rule, try to inline sub-rules recursively with `getCssRulesString`. This
+  // operation can fail if the imported stylesheet is protected by CORS, in which case we fallback
+  // to the @import rule CSS text.
+  return (isCSSImportRule(rule) && getCssRulesString(rule.styleSheet)) || rule.cssText
+}
+
+function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
+  return 'styleSheet' in rule
+}
+
+function isCSSStyleRule(rule: CSSRule): rule is CSSStyleRule {
+  return 'selectorText' in rule
+}

package/src/domain/record/serialization/serializeDocument.ts

@@ -0,0 +1,13 @@
+import type { DocumentNode, SerializedNodeWithId } from '../../../types'
+import { serializeNode } from './serializeNode'
+import type { SerializationTransaction } from './serializationTransaction'
+
+export function serializeDocument(
+  document: Document,
+  transaction: SerializationTransaction
+): DocumentNode & SerializedNodeWithId {
+  const defaultPrivacyLevel = transaction.scope.configuration.defaultPrivacyLevel
+  const serializedNode = serializeNode(document, defaultPrivacyLevel, transaction)
+  // We are sure that Documents are never ignored, so this function never returns null
+  return serializedNode as DocumentNode & SerializedNodeWithId
+}

package/src/domain/record/serialization/serializeNode.ts

@@ -0,0 +1,229 @@
+import {
+  reducePrivacyLevel,
+  getNodeSelfPrivacyLevel,
+  getTextContent,
+  isNodeShadowRoot,
+  hasChildNodes,
+  forEachChildNodes,
+  NodePrivacyLevel,
+  PRIVACY_ATTR_NAME,
+  PRIVACY_ATTR_VALUE_HIDDEN,
+} from '@kubesense/kubesense-browser-rum-core'
+import type {
+  DocumentFragmentNode,
+  DocumentNode,
+  SerializedNodeWithId,
+  CDataNode,
+  DocumentTypeNode,
+  ElementNode,
+  TextNode,
+} from '../../../types'
+import { NodeType } from '../../../types'
+import { getValidTagName } from './serializationUtils'
+import type { ParentNodePrivacyLevel } from './serialization.types'
+import { serializeStyleSheets } from './serializeStyleSheets'
+import { serializeAttributes } from './serializeAttributes'
+import type { SerializationTransaction } from './serializationTransaction'
+
+export function serializeNode(
+  node: Element,
+  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  transaction: SerializationTransaction
+): (SerializedNodeWithId & ElementNode) | null
+export function serializeNode(
+  node: Node,
+  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  transaction: SerializationTransaction
+): SerializedNodeWithId | null
+export function serializeNode(
+  node: Node,
+  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  transaction: SerializationTransaction
+): SerializedNodeWithId | null {
+  switch (node.nodeType) {
+    case node.DOCUMENT_NODE:
+      return serializeDocumentNode(node as Document, parentNodePrivacyLevel, transaction)
+    case node.DOCUMENT_FRAGMENT_NODE:
+      return serializeDocumentFragmentNode(node as DocumentFragment, parentNodePrivacyLevel, transaction)
+    case node.DOCUMENT_TYPE_NODE:
+      return serializeDocumentTypeNode(node as DocumentType, transaction)
+    case node.ELEMENT_NODE:
+      return serializeElementNode(node as Element, parentNodePrivacyLevel, transaction)
+    case node.TEXT_NODE:
+      return serializeTextNode(node as Text, parentNodePrivacyLevel, transaction)
+    case node.CDATA_SECTION_NODE:
+      return serializeCDataNode(node as CDATASection, transaction)
+    default:
+      return null
+  }
+}
+
+export function serializeChildNodes(
+  node: Node,
+  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  transaction: SerializationTransaction
+): SerializedNodeWithId[] {
+  const result: SerializedNodeWithId[] = []
+  forEachChildNodes(node, (childNode) => {
+    const serializedChildNode = serializeNode(childNode, parentNodePrivacyLevel, transaction)
+    if (serializedChildNode) {
+      result.push(serializedChildNode)
+    }
+  })
+  return result
+}
+
+export function serializeDocumentNode(
+  document: Document,
+  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  transaction: SerializationTransaction
+): DocumentNode & SerializedNodeWithId {
+  return {
+    type: NodeType.Document,
+    id: transaction.assignId(document),
+    childNodes: serializeChildNodes(document, parentNodePrivacyLevel, transaction),
+    adoptedStyleSheets: serializeStyleSheets(document.adoptedStyleSheets),
+  }
+}
+
+function serializeDocumentFragmentNode(
+  element: DocumentFragment,
+  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  transaction: SerializationTransaction
+): DocumentFragmentNode & SerializedNodeWithId {
+  const isShadowRoot = isNodeShadowRoot(element)
+  if (isShadowRoot) {
+    transaction.scope.shadowRootsController.addShadowRoot(element, transaction.scope)
+  }
+
+  return {
+    type: NodeType.DocumentFragment,
+    id: transaction.assignId(element),
+    childNodes: serializeChildNodes(element, parentNodePrivacyLevel, transaction),
+    isShadowRoot,
+    adoptedStyleSheets: isShadowRoot ? serializeStyleSheets(element.adoptedStyleSheets) : undefined,
+  }
+}
+
+function serializeDocumentTypeNode(
+  documentType: DocumentType,
+  transaction: SerializationTransaction
+): DocumentTypeNode & SerializedNodeWithId {
+  return {
+    type: NodeType.DocumentType,
+    id: transaction.assignId(documentType),
+    name: documentType.name,
+    publicId: documentType.publicId,
+    systemId: documentType.systemId,
+  }
+}
+
+/**
+ * Serializing Element nodes involves capturing:
+ * 1. HTML ATTRIBUTES:
+ * 2. JS STATE:
+ * - scroll offsets
+ * - Form fields (input value, checkbox checked, option selection, range)
+ * - Canvas state,
+ * - Media (video/audio) play mode + currentTime
+ * - iframe contents
+ * - webcomponents
+ * 3. CUSTOM PROPERTIES:
+ * - height+width for when `hidden` to cover the element
+ * 4. EXCLUDED INTERACTION STATE:
+ * - focus (possible, but not worth perf impact)
+ * - hover (tracked only via mouse activity)
+ * - fullscreen mode
+ */
+
+function serializeElementNode(
+  element: Element,
+  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  transaction: SerializationTransaction
+): (ElementNode & SerializedNodeWithId) | null {
+  const tagName = getValidTagName(element.tagName)
+  const isSVG = isSVGElement(element) || undefined
+
+  // For performance reason, we don't use getNodePrivacyLevel directly: we leverage the
+  // parentNodePrivacyLevel option to avoid iterating over all parents
+  const nodePrivacyLevel = reducePrivacyLevel(getNodeSelfPrivacyLevel(element), parentNodePrivacyLevel)
+
+  if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
+    const { width, height } = element.getBoundingClientRect()
+    return {
+      type: NodeType.Element,
+      id: transaction.assignId(element),
+      tagName,
+      attributes: {
+        rr_width: `${width}px`,
+        rr_height: `${height}px`,
+        [PRIVACY_ATTR_NAME]: PRIVACY_ATTR_VALUE_HIDDEN,
+      },
+      childNodes: [],
+      isSVG,
+    }
+  }
+
+  // Ignore Elements like Script and some Link, Metas
+  if (nodePrivacyLevel === NodePrivacyLevel.IGNORE) {
+    return null
+  }
+
+  const id = transaction.assignId(element)
+  const attributes = serializeAttributes(element, nodePrivacyLevel, transaction)
+
+  let childNodes: SerializedNodeWithId[] = []
+  if (
+    hasChildNodes(element) &&
+    // Do not serialize style children as the css rules are already in the _cssText attribute
+    tagName !== 'style'
+  ) {
+    childNodes = serializeChildNodes(element, nodePrivacyLevel, transaction)
+  }
+
+  return {
+    type: NodeType.Element,
+    id,
+    tagName,
+    attributes,
+    childNodes,
+    isSVG,
+  }
+}
+
+function isSVGElement(el: Element): boolean {
+  return el.tagName === 'svg' || el instanceof SVGElement
+}
+
+/**
+ * Text Nodes are dependant on Element nodes
+ * Privacy levels are set on elements so we check the parentElement of a text node
+ * for privacy level.
+ */
+
+function serializeTextNode(
+  textNode: Text,
+  parentNodePrivacyLevel: ParentNodePrivacyLevel,
+  transaction: SerializationTransaction
+): (TextNode & SerializedNodeWithId) | null {
+  const textContent = getTextContent(textNode, parentNodePrivacyLevel)
+  if (textContent === undefined) {
+    return null
+  }
+  return {
+    type: NodeType.Text,
+    id: transaction.assignId(textNode),
+    textContent,
+  }
+}
+
+function serializeCDataNode(
+  node: CDATASection,
+  transaction: SerializationTransaction
+): CDataNode & SerializedNodeWithId {
+  return {
+    type: NodeType.CDATA,
+    id: transaction.assignId(node),
+    textContent: '',
+  }
+}