✨ [RUM-162] Truncate resources URL containing data URLs

packages/rum-core/src/domain/resource/resourceCollection.ts

 url: entry.name, 
 url: entry.name, 
@@ -17,8 +17,8 @@ import { RumPerformanceEntryType } from '../../browser/performanceCollection'
 import type { RumXhrResourceEventDomainContext, RumFetchResourceEventDomainContext } from '../../domainContext.types'
 import type { RawRumResourceEvent } from '../../rawRumEvent.types'
 import { RumEventType } from '../../rawRumEvent.types'
-import type { LifeCycle, RawRumEventCollectedData } from '../lifeCycle'
 import { LifeCycleEventType } from '../lifeCycle'
+import type { RawRumEventCollectedData, LifeCycle } from '../lifeCycle'
 import type { RequestCompleteEvent } from '../requestCollection'
 import type { RumSessionManager } from '../rumSessionManager'
 import type { PageStateHistory } from '../contexts/pageStateHistory'
@@ -30,6 +30,8 @@ import {
   computeResourceKind,
   computeSize,
   isRequestKind,
+  isLongDataUrl,
+  sanitizeDataUrl,
 } from './resourceUtils'
 
 export function startResourceCollection(
@@ -91,7 +93,7 @@ function processRequest(
         duration,
         method: request.method,
         status_code: request.status,
-        url: request.url,
+        url: isLongDataUrl(request.url) ? sanitizeDataUrl(request.url) : request.url,
       },
       type: RumEventType.RESOURCE as const,
       _dd: {

packages/rum-core/src/domain/resource/resourceUtils.spec.ts

@@ -4,10 +4,13 @@ import { RumPerformanceEntryType, type RumPerformanceResourceTiming } from '../.
 import type { RumConfiguration } from '../configuration'
 import { validateAndBuildRumConfiguration } from '../configuration'
 import {
+  MAX_ATTRIBUTE_VALUE_CHAR_LENGTH,
   computePerformanceResourceDetails,
   computePerformanceResourceDuration,
   computeResourceKind,
   isAllowedRequestUrl,
+  isLongDataUrl,
+  sanitizeDataUrl,
 } from './resourceUtils'
 
 function generateResourceWith(overrides: Partial<RumPerformanceResourceTiming>) {
@@ -313,3 +316,45 @@ describe('shouldTrackResource', () => {
     expect(isAllowedRequestUrl(configuration, 'https://my-domain.com/hello?a=b')).toBe(true)
   })
 })
+
+describe('isLongDataUrl and sanitizeDataUrl', () => {
+  const longString = new Array(MAX_ATTRIBUTE_VALUE_CHAR_LENGTH).join('a')
+  it('returns truncated url when detects data url of json', () => {
+    const longDataUrl = `data:text/json; charset=utf-8,${longString}`
+    expect(isLongDataUrl(longDataUrl)).toEqual(true)
+    expect(sanitizeDataUrl(longDataUrl)).toEqual('data:text/json; charset=utf-8,[...]')
+  })
+
+  it('returns truncated url when detects data url of html', () => {
+    const longDataUrl = `data:text/html,${longString}`
+    expect(isLongDataUrl(longDataUrl)).toEqual(true)
+    expect(sanitizeDataUrl(longDataUrl)).toEqual('data:text/html,[...]')
+  })
+
+  it('returns truncated url when detects data url of image', () => {
+    const longDataUrl = `data:image/svg+xml;base64,${longString}`
+    expect(isLongDataUrl(longDataUrl)).toEqual(true)
+    expect(sanitizeDataUrl(longDataUrl)).toEqual('data:image/svg+xml;base64,[...]')
+  })
+  it('returns truncated url when detects plain data url', () => {
+    const plainDataUrl = `data:,${longString}`
+    expect(isLongDataUrl(plainDataUrl)).toEqual(true)
+    expect(sanitizeDataUrl(plainDataUrl)).toEqual('data:,[...]')
+  })
+
+  it('returns truncated url when detects data url with exotic mime type', () => {
+    const exoticTypeDataUrl = `data:application/vnd.openxmlformats;fileName=officedocument.presentationxml;base64,${longString}`
+    expect(isLongDataUrl(exoticTypeDataUrl)).toEqual(true)
+    expect(sanitizeDataUrl(exoticTypeDataUrl)).toEqual(
+      'data:application/vnd.openxmlformats;fileName=officedocument.presentationxml;base64,[...]'
+    )
+  })
+
+  it('returns the original url when the data url is within limit', () => {
+    expect(isLongDataUrl(`data:,${longString.substring(5)}`)).toEqual(false)
+  })
+
+  it('returns false when no data url found', () => {
+    expect(isLongDataUrl('https://static.datad0g.com/static/c/70086/chunk.min.js')).toEqual(false)
+  })
+})

packages/rum-core/src/domain/resource/resourceUtils.ts

@@ -215,3 +215,21 @@ export function computeSize(entry: RumPerformanceResourceTiming) {
 export function isAllowedRequestUrl(configuration: RumConfiguration, url: string) {
   return url && !configuration.isIntakeUrl(url)
 }
+
+const DATA_URL_REGEX = /data:(.+)?(;base64)?,/g
+export const MAX_ATTRIBUTE_VALUE_CHAR_LENGTH = 24_000
+
+export function isLongDataUrl(url: string): boolean {
+  if (url.length <= MAX_ATTRIBUTE_VALUE_CHAR_LENGTH) {
+    return false
+  } else if (url.substring(0, 5) === 'data:') {
+    // Avoid String.match RangeError: Maximum call stack size exceeded
+    url = url.substring(0, MAX_ATTRIBUTE_VALUE_CHAR_LENGTH)
+    return true
+  }
+  return false
+}
+
+export function sanitizeDataUrl(url: string): string {
+  return `${url.match(DATA_URL_REGEX)![0]}[...]`
+}

packages/rum-core/src/index.ts

@@ -35,3 +35,4 @@ export { STABLE_ATTRIBUTES } from './domain/getSelectorFromElement'
 export * from './browser/htmlDomUtils'
 export * from './browser/polyfills'
 export { getSessionReplayUrl } from './domain/getSessionReplayUrl'
+export { isLongDataUrl, sanitizeDataUrl, MAX_ATTRIBUTE_VALUE_CHAR_LENGTH } from './domain/resource/resourceUtils'

packages/rum/src/domain/record/privacy.ts

@@ -14,8 +14,6 @@ import {
   CENSORED_STRING_MARK,
 } from '../../constants'
 
-export const MAX_ATTRIBUTE_VALUE_CHAR_LENGTH = 100_000
-
 const TEXT_MASKING_CHAR = 'x'
 
 export type NodePrivacyLevelCache = Map<Node, NodePrivacyLevel>

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

@@ -1,9 +1,12 @@
 import { isIE } from '@datadog/browser-core'
 
 import type { RumConfiguration } from '@datadog/browser-rum-core'
-import { STABLE_ATTRIBUTES, DEFAULT_PROGRAMMATIC_ACTION_NAME_ATTRIBUTE } from '@datadog/browser-rum-core'
+import {
+  STABLE_ATTRIBUTES,
+  DEFAULT_PROGRAMMATIC_ACTION_NAME_ATTRIBUTE,
+  MAX_ATTRIBUTE_VALUE_CHAR_LENGTH,
+} from '@datadog/browser-rum-core'
 import { NodePrivacyLevel, PRIVACY_ATTR_NAME } from '../../../constants'
-import { MAX_ATTRIBUTE_VALUE_CHAR_LENGTH } from '../privacy'
 import { serializeAttribute } from './serializeAttribute'
 
 const DEFAULT_CONFIGURATION = {} as RumConfiguration
@@ -18,13 +21,16 @@ describe('serializeAttribute', () => {
   it('truncates "data:" URIs after long string length', () => {
     const node = document.createElement('p')
 
-    const longString = new Array(MAX_ATTRIBUTE_VALUE_CHAR_LENGTH + 1 - 5).join('a')
-    const maxAttributeValue = `data:${longString}`
-    const exceededAttributeValue = `data:${longString}1`
-    const ignoredAttributeValue = `foos:${longString}`
+    const longString = new Array(MAX_ATTRIBUTE_VALUE_CHAR_LENGTH - 5).join('a')
+    const maxAttributeValue = `data:,${longString}`
+    const exceededAttributeValue = `data:,${longString}aa`
+    const dataUrlAttributeValue = `data:,${longString}a`
+    const truncatedValue = 'data:,[...]'
+    const ignoredAttributeValue = `foos:,${longString}`
 
     node.setAttribute('test-okay', maxAttributeValue)
     node.setAttribute('test-truncate', exceededAttributeValue)
+    node.setAttribute('test-truncate', dataUrlAttributeValue)
     node.setAttribute('test-ignored', ignoredAttributeValue)
 
     expect(serializeAttribute(node, NodePrivacyLevel.ALLOW, 'test-okay', DEFAULT_CONFIGURATION)).toBe(maxAttributeValue)
@@ -35,11 +41,10 @@ describe('serializeAttribute', () => {
     )
 
     expect(serializeAttribute(node, NodePrivacyLevel.ALLOW, 'test-truncate', DEFAULT_CONFIGURATION)).toBe(
-      'data:truncated'
-    )
-    expect(serializeAttribute(node, NodePrivacyLevel.MASK, 'test-truncate', DEFAULT_CONFIGURATION)).toBe(
-      'data:truncated'
+      truncatedValue
     )
+    expect(serializeAttribute(node, NodePrivacyLevel.MASK, 'test-truncate', DEFAULT_CONFIGURATION)).toBe(truncatedValue)
+    expect(serializeAttribute(node, NodePrivacyLevel.MASK, 'test-truncate', DEFAULT_CONFIGURATION)).toBe(truncatedValue)
   })
 
   it('does not mask the privacy attribute', () => {

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

@@ -1,8 +1,7 @@
 import { startsWith } from '@datadog/browser-core'
-import { STABLE_ATTRIBUTES } from '@datadog/browser-rum-core'
+import { STABLE_ATTRIBUTES, isLongDataUrl, sanitizeDataUrl } 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(
@@ -69,8 +68,8 @@ export function serializeAttribute(
   }
 
   // Minimum Fix for customer.
-  if (attributeValue.length > MAX_ATTRIBUTE_VALUE_CHAR_LENGTH && attributeValue.slice(0, 5) === 'data:') {
-    return 'data:truncated'
+  if (isLongDataUrl(attributeValue)) {
+    return sanitizeDataUrl(attributeValue)
   }
 
   return attributeValue