🐛 propagate privacy defined on shadow hosts

packages/rum-core/src/browser/htmlDomUtils.spec.ts

@@ -1,5 +1,5 @@
 import { isIE } from '@datadog/browser-core'
-import { appendElement } from '../../test'
+import { appendElement, appendText } from '../../test'
 import {
   isTextNode,
   isCommentNode,
@@ -8,6 +8,7 @@ import {
   getParentNode,
   isNodeShadowHost,
   forEachChildNodes,
+  hasChildNodes,
 } from './htmlDomUtils'
 
 describe('isTextNode', () => {
@@ -125,6 +126,31 @@ if (!isIE()) {
   })
 }
 
+describe('hasChildNode', () => {
+  beforeEach(() => {
+    if (isIE()) {
+      pending('IE not supported')
+    }
+  })
+
+  it('should return `true` if the element has a direct child node', () => {
+    expect(hasChildNodes(appendElement('<div>foo</div>'))).toBe(true)
+    expect(hasChildNodes(appendElement('<div><hr /></div>'))).toBe(true)
+    expect(hasChildNodes(appendElement('<div><!--  --></div>'))).toBe(true)
+  })
+
+  it('should return `true` if the element is a shadow host', () => {
+    const container = appendElement('<div></div>')
+    container.attachShadow({ mode: 'open' })
+    expect(hasChildNodes(container)).toBe(true)
+  })
+
+  it('should return `false` otherwise', () => {
+    expect(hasChildNodes(appendElement('<div></div>'))).toBe(false)
+    expect(hasChildNodes(appendText('foo'))).toBe(false)
+  })
+})
+
 describe('forEachChildNodes', () => {
   it('should iterate over the direct children for a normal node', () => {
     if (isIE()) {

packages/rum-core/src/browser/htmlDomUtils.ts

@@ -19,6 +19,10 @@ export function isNodeShadowRoot(node: Node): node is ShadowRoot {
   return !!shadowRoot.host && shadowRoot.nodeType === Node.DOCUMENT_FRAGMENT_NODE && isElementNode(shadowRoot.host)
 }
 
+export function hasChildNodes(node: Node) {
+  return node.childNodes.length > 0 || isNodeShadowHost(node)
+}
+
 export function forEachChildNodes(node: Node, callback: (child: Node) => void) {
   node.childNodes.forEach(callback)
   if (isNodeShadowHost(node)) {

packages/rum/src/domain/record/serialization/serializeNode.spec.ts

@@ -451,68 +451,94 @@ describe('serializeNodeWithId', () => {
       })
     })
 
-    it('serializes a shadow host', () => {
-      const div = document.createElement('div')
-      div.attachShadow({ mode: 'open' })
-      expect(serializeElement(div, DEFAULT_OPTIONS)).toEqual({
-        type: NodeType.Element,
-        tagName: 'div',
-        attributes: {},
-        isSVG: undefined,
-        childNodes: [
-          {
-            type: NodeType.DocumentFragment,
-            isShadowRoot: true,
-            childNodes: [],
-            id: jasmine.any(Number) as unknown as number,
-            adoptedStyleSheets: undefined,
-          },
-        ],
-        id: jasmine.any(Number) as unknown as number,
+    describe('shadow dom', () => {
+      it('serializes a shadow host', () => {
+        const div = document.createElement('div')
+        div.attachShadow({ mode: 'open' })
+        expect(serializeElement(div, DEFAULT_OPTIONS)).toEqual({
+          type: NodeType.Element,
+          tagName: 'div',
+          attributes: {},
+          isSVG: undefined,
+          childNodes: [
+            {
+              type: NodeType.DocumentFragment,
+              isShadowRoot: true,
+              childNodes: [],
+              id: jasmine.any(Number) as unknown as number,
+              adoptedStyleSheets: undefined,
+            },
+          ],
+          id: jasmine.any(Number) as unknown as number,
+        })
       })
-    })
 
-    it('serializes a shadow host with children', () => {
-      const div = document.createElement('div')
-      div.attachShadow({ mode: 'open' })
-      div.shadowRoot!.appendChild(document.createElement('hr'))
+      it('serializes a shadow host with children', () => {
+        const div = document.createElement('div')
+        div.attachShadow({ mode: 'open' })
+        div.shadowRoot!.appendChild(document.createElement('hr'))
 
-      const options: SerializeOptions = {
-        ...DEFAULT_OPTIONS,
-        serializationContext: {
-          ...DEFAULT_SERIALIZATION_CONTEXT,
-          shadowRootsController: {
-            ...DEFAULT_SHADOW_ROOT_CONTROLLER,
-            addShadowRoot: addShadowRootSpy,
+        const options: SerializeOptions = {
+          ...DEFAULT_OPTIONS,
+          serializationContext: {
+            ...DEFAULT_SERIALIZATION_CONTEXT,
+            shadowRootsController: {
+              ...DEFAULT_SHADOW_ROOT_CONTROLLER,
+              addShadowRoot: addShadowRootSpy,
+            },
           },
-        },
-      }
-      expect(serializeElement(div, options)).toEqual({
-        type: NodeType.Element,
-        tagName: 'div',
-        attributes: {},
-        isSVG: undefined,
-        childNodes: [
-          {
-            type: NodeType.DocumentFragment,
-            isShadowRoot: true,
-            adoptedStyleSheets: undefined,
+        }
+        expect(serializeElement(div, options)).toEqual({
+          type: NodeType.Element,
+          tagName: 'div',
+          attributes: {},
+          isSVG: undefined,
+          childNodes: [
+            {
+              type: NodeType.DocumentFragment,
+              isShadowRoot: true,
+              adoptedStyleSheets: undefined,
+              childNodes: [
+                {
+                  type: NodeType.Element,
+                  tagName: 'hr',
+                  attributes: {},
+                  isSVG: undefined,
+                  childNodes: [],
+                  id: jasmine.any(Number) as unknown as number,
+                },
+              ],
+              id: jasmine.any(Number) as unknown as number,
+            },
+          ],
+          id: jasmine.any(Number) as unknown as number,
+        })
+        expect(addShadowRootSpy).toHaveBeenCalledWith(div.shadowRoot!)
+      })
+
+      it('propagates the privacy mode to the shadow root children', () => {
+        const div = document.createElement('div')
+        div.setAttribute(PRIVACY_ATTR_NAME, PRIVACY_ATTR_VALUE_MASK)
+        div.attachShadow({ mode: 'open' })
+        div.shadowRoot!.appendChild(document.createTextNode('foo'))
+
+        expect(serializeElement(div, DEFAULT_OPTIONS)).toEqual(
+          jasmine.objectContaining({
+            attributes: {
+              [PRIVACY_ATTR_NAME]: PRIVACY_ATTR_VALUE_MASK,
+            },
             childNodes: [
-              {
-                type: NodeType.Element,
-                tagName: 'hr',
-                attributes: {},
-                isSVG: undefined,
-                childNodes: [],
-                id: jasmine.any(Number) as unknown as number,
-              },
+              jasmine.objectContaining({
+                childNodes: [
+                  jasmine.objectContaining({
+                    textContent: 'xxx',
+                  }),
+                ],
+              }),
             ],
-            id: jasmine.any(Number) as unknown as number,
-          },
-        ],
-        id: jasmine.any(Number) as unknown as number,
+          })
+        )
       })
-      expect(addShadowRootSpy).toHaveBeenCalledWith(div.shadowRoot!)
     })
 
     describe('<style> elements', () => {

packages/rum/src/domain/record/serialization/serializeNode.ts

@@ -1,4 +1,4 @@
-import { isNodeShadowRoot, isNodeShadowHost } from '@datadog/browser-rum-core'
+import { isNodeShadowRoot, hasChildNodes, forEachChildNodes } from '@datadog/browser-rum-core'
 import { assign } from '@datadog/browser-core'
 import type {
   DocumentFragmentNode,
@@ -42,7 +42,7 @@ export function generateNextId(): number {
 
 export function serializeChildNodes(node: Node, options: SerializeOptions): SerializedNodeWithId[] {
   const result: SerializedNodeWithId[] = []
-  node.childNodes.forEach((childNode) => {
+  forEachChildNodes(node, (childNode) => {
     const serializedChildNode = serializeNodeWithId(childNode, options)
     if (serializedChildNode) {
       result.push(serializedChildNode)
@@ -80,19 +80,14 @@ function serializeDocumentFragmentNode(
   element: DocumentFragment,
   options: SerializeOptions
 ): DocumentFragmentNode | undefined {
-  let childNodes: SerializedNodeWithId[] = []
-  if (element.childNodes.length) {
-    childNodes = serializeChildNodes(element, options)
-  }
-
   const isShadowRoot = isNodeShadowRoot(element)
   if (isShadowRoot) {
     options.serializationContext.shadowRootsController.addShadowRoot(element)
   }
 
   return {
     type: NodeType.DocumentFragment,
-    childNodes,
+    childNodes: serializeChildNodes(element, options),
     isShadowRoot,
     adoptedStyleSheets: isShadowRoot ? serializeStyleSheets(element.adoptedStyleSheets) : undefined,
   }
@@ -157,7 +152,7 @@ function serializeElementNode(element: Element, options: SerializeOptions): Elem
 
   let childNodes: SerializedNodeWithId[] = []
   if (
-    element.childNodes.length &&
+    hasChildNodes(element) &&
     // Do not serialize style children as the css rules are already in the _cssText attribute
     tagName !== 'style'
   ) {
@@ -176,13 +171,6 @@ function serializeElementNode(element: Element, options: SerializeOptions): Elem
     childNodes = serializeChildNodes(element, childNodesSerializationOptions)
   }
 
-  if (isNodeShadowHost(element)) {
-    const shadowRoot = serializeNodeWithId(element.shadowRoot, options)
-    if (shadowRoot !== null) {
-      childNodes.push(shadowRoot)
-    }
-  }
-
   return {
     type: NodeType.Element,
     tagName,