From 2c06b39d6c5bdd6d2e470f77a3ac1677815f393e Mon Sep 17 00:00:00 2001
From: Bastien Caudan <bastien.caudan@datadoghq.com>
Date: Thu, 11 Jan 2024 17:54:13 +0100
Subject: [PATCH] Replay: generate censored image with similar dimension than
 the original

---
 .../record/serialization/htmlAst.specHelper.ts |  2 +-
 .../record/serialization/serializationUtils.ts |  4 ++++
 .../record/serialization/serializeAttribute.ts | 18 +++++++++++++++---
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts b/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts
index 3817d8d783..8288c395b8 100644
--- a/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts
+++ b/packages/rum/src/domain/record/serialization/htmlAst.specHelper.ts
@@ -249,7 +249,7 @@ export const AST_MASK = {
               type: 2,
               tagName: 'img',
               attributes: {
-                src: 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==',
+                src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0' height='0' style='background-color:silver'%3E%3C/svg%3E",
               },
               childNodes: [],
             },
diff --git a/packages/rum/src/domain/record/serialization/serializationUtils.ts b/packages/rum/src/domain/record/serialization/serializationUtils.ts
index 5a8bf45679..218aa564b2 100644
--- a/packages/rum/src/domain/record/serialization/serializationUtils.ts
+++ b/packages/rum/src/domain/record/serialization/serializationUtils.ts
@@ -119,3 +119,7 @@ export function getValidTagName(tagName: string): string {
 
   return processedTagName
 }
+
+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`
+}
diff --git a/packages/rum/src/domain/record/serialization/serializeAttribute.ts b/packages/rum/src/domain/record/serialization/serializeAttribute.ts
index 6fb0450731..4b29ca6e0d 100644
--- a/packages/rum/src/domain/record/serialization/serializeAttribute.ts
+++ b/packages/rum/src/domain/record/serialization/serializeAttribute.ts
@@ -3,6 +3,7 @@ import { STABLE_ATTRIBUTES } from '@datadog/browser-rum-core'
 import type { RumConfiguration } from '@datadog/browser-rum-core'
 import { NodePrivacyLevel, PRIVACY_ATTR_NAME, CENSORED_STRING_MARK, CENSORED_IMG_MARK } from '../../../constants'
 import { MAX_ATTRIBUTE_VALUE_CHAR_LENGTH } from '../privacy'
+import { censoredImageForSize } from './serializationUtils'
 
 export function serializeAttribute(
   element: Element,
@@ -30,12 +31,23 @@ export function serializeAttribute(
       case 'placeholder':
         return CENSORED_STRING_MARK
     }
+
     // mask image URLs
-    if (tagName === 'IMG' || tagName === 'SOURCE') {
-      if (attributeName === 'src' || attributeName === 'srcset') {
-        return CENSORED_IMG_MARK
+    if (tagName === 'IMG' && (attributeName === 'src' || attributeName === 'srcset')) {
+      // 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()
+      return censoredImageForSize(width, height)
+    }
+
+    // mask source URLs
+    if (tagName === 'SOURCE' && (attributeName === 'src' || attributeName === 'srcset')) {
+      return CENSORED_IMG_MARK
     }
+
     // mask <a> URLs
     if (tagName === 'A' && attributeName === 'href') {
       return CENSORED_STRING_MARK