🐛 allow untrusted event for httpRequest xhr event listeners

packages/core/src/transport/httpRequest.spec.ts

@@ -1,6 +1,6 @@
-import { collectAsyncCalls, mockEndpointBuilder, interceptRequests } from '../../test'
+import { collectAsyncCalls, mockEndpointBuilder, interceptRequests, createNewEvent } from '../../test'
 import type { Request } from '../../test'
-import type { EndpointBuilder, Configuration } from '../domain/configuration'
+import type { EndpointBuilder } from '../domain/configuration'
 import { createEndpointBuilder } from '../domain/configuration'
 import { noop } from '../tools/utils/functionUtils'
 import { createHttpRequest, fetchKeepAliveStrategy, sendXHR } from './httpRequest'
@@ -13,14 +13,12 @@ describe('httpRequest', () => {
   let requests: Request[]
   let endpointBuilder: EndpointBuilder
   let request: HttpRequest
-  let configuration: Configuration
 
   beforeEach(() => {
-    configuration = {} as Configuration
     interceptor = interceptRequests()
     requests = interceptor.requests
     endpointBuilder = mockEndpointBuilder(ENDPOINT_URL)
-    request = createHttpRequest(configuration, endpointBuilder, BATCH_BYTES_LIMIT, noop)
+    request = createHttpRequest(endpointBuilder, BATCH_BYTES_LIMIT, noop)
   })
 
   describe('send', () => {
@@ -105,7 +103,6 @@ describe('httpRequest', () => {
       interceptor.withFetch(() => Promise.resolve({ status: 429, type: 'cors' }))
 
       fetchKeepAliveStrategy(
-        configuration,
         endpointBuilder,
         BATCH_BYTES_LIMIT,
         { data: '{"foo":"bar1"}\n{"foo":"bar2"}', bytesCount: 10 },
@@ -129,7 +126,6 @@ describe('httpRequest', () => {
       })
 
       fetchKeepAliveStrategy(
-        configuration,
         endpointBuilder,
         BATCH_BYTES_LIMIT,
         { data: '{"foo":"bar1"}\n{"foo":"bar2"}', bytesCount: 10 },
@@ -148,7 +144,6 @@ describe('httpRequest', () => {
       })
 
       fetchKeepAliveStrategy(
-        configuration,
         endpointBuilder,
         BATCH_BYTES_LIMIT,
         { data: '{"foo":"bar1"}\n{"foo":"bar2"}', bytesCount: BATCH_BYTES_LIMIT },
@@ -177,7 +172,7 @@ describe('httpRequest', () => {
         })
       })
 
-      sendXHR(configuration, 'foo', '', onResponseSpy)
+      sendXHR('foo', '', onResponseSpy)
 
       setTimeout(() => {
         expect(onResponseSpy).toHaveBeenCalledTimes(1)
@@ -187,6 +182,23 @@ describe('httpRequest', () => {
         done()
       }, 100)
     })
+
+    it('should handle synthetic events', (done) => {
+      const onResponseSpy = jasmine.createSpy('xhrOnResponse')
+
+      interceptor.withMockXhr((xhr) => {
+        const syntheticEvent = createNewEvent('loadend', {}, false)
+
+        setTimeout(() => xhr.dispatchEvent(syntheticEvent))
+      })
+
+      sendXHR('foo', '', onResponseSpy)
+
+      setTimeout(() => {
+        expect(onResponseSpy).toHaveBeenCalledTimes(1)
+        done()
+      }, 100)
+    })
   })
 
   describe('sendOnExit', () => {
@@ -257,14 +269,12 @@ describe('httpRequest intake parameters', () => {
   let requests: Request[]
   let endpointBuilder: EndpointBuilder
   let request: HttpRequest
-  let configuration: Configuration
 
   beforeEach(() => {
-    configuration = {} as Configuration
     interceptor = interceptRequests()
     requests = interceptor.requests
     endpointBuilder = createEndpointBuilder({ clientToken }, 'logs', [])
-    request = createHttpRequest(configuration, endpointBuilder, BATCH_BYTES_LIMIT, noop)
+    request = createHttpRequest(endpointBuilder, BATCH_BYTES_LIMIT, noop)
   })
 
   it('should have a unique request id', () => {

packages/core/src/transport/httpRequest.ts

@@ -1,4 +1,4 @@
-import type { EndpointBuilder, Configuration } from '../domain/configuration'
+import type { EndpointBuilder } from '../domain/configuration'
 import { addTelemetryError } from '../domain/telemetry'
 import type { Context } from '../tools/serialisation/context'
 import { monitor } from '../tools/monitor'
@@ -35,14 +35,13 @@ export interface RetryInfo {
 }
 
 export function createHttpRequest(
-  configuration: Configuration,
   endpointBuilder: EndpointBuilder,
   bytesLimit: number,
   reportError: (error: RawError) => void
 ) {
   const retryState = newRetryState()
   const sendStrategyForRetry = (payload: Payload, onResponse: (r: HttpResponse) => void) =>
-    fetchKeepAliveStrategy(configuration, endpointBuilder, bytesLimit, payload, onResponse)
+    fetchKeepAliveStrategy(endpointBuilder, bytesLimit, payload, onResponse)
 
   return {
     send: (payload: Payload) => {
@@ -53,17 +52,12 @@ export function createHttpRequest(
      * keep using sendBeaconStrategy on exit
      */
     sendOnExit: (payload: Payload) => {
-      sendBeaconStrategy(configuration, endpointBuilder, bytesLimit, payload)
+      sendBeaconStrategy(endpointBuilder, bytesLimit, payload)
     },
   }
 }
 
-function sendBeaconStrategy(
-  configuration: Configuration,
-  endpointBuilder: EndpointBuilder,
-  bytesLimit: number,
-  payload: Payload
-) {
+function sendBeaconStrategy(endpointBuilder: EndpointBuilder, bytesLimit: number, payload: Payload) {
   const canUseBeacon = !!navigator.sendBeacon && payload.bytesCount < bytesLimit
   if (canUseBeacon) {
     try {
@@ -79,7 +73,7 @@ function sendBeaconStrategy(
   }
 
   const xhrUrl = endpointBuilder.build('xhr', payload)
-  sendXHR(configuration, xhrUrl, payload.data)
+  sendXHR(xhrUrl, payload.data)
 }
 
 let hasReportedBeaconError = false
@@ -92,7 +86,6 @@ function reportBeaconError(e: unknown) {
 }
 
 export function fetchKeepAliveStrategy(
-  configuration: Configuration,
   endpointBuilder: EndpointBuilder,
   bytesLimit: number,
   payload: Payload,
@@ -106,12 +99,12 @@ export function fetchKeepAliveStrategy(
       monitor(() => {
         const xhrUrl = endpointBuilder.build('xhr', payload)
         // failed to queue the request
-        sendXHR(configuration, xhrUrl, payload.data, onResponse)
+        sendXHR(xhrUrl, payload.data, onResponse)
       })
     )
   } else {
     const xhrUrl = endpointBuilder.build('xhr', payload)
-    sendXHR(configuration, xhrUrl, payload.data, onResponse)
+    sendXHR(xhrUrl, payload.data, onResponse)
   }
 }
 
@@ -124,12 +117,7 @@ function isKeepAliveSupported() {
   }
 }
 
-export function sendXHR(
-  configuration: Configuration,
-  url: string,
-  data: Payload['data'],
-  onResponse?: (r: HttpResponse) => void
-) {
+export function sendXHR(url: string, data: Payload['data'], onResponse?: (r: HttpResponse) => void) {
   const request = new XMLHttpRequest()
   request.open('POST', url, true)
   if (data instanceof Blob) {
@@ -139,7 +127,8 @@ export function sendXHR(
     request.setRequestHeader('Content-Type', data.type)
   }
   addEventListener(
-    configuration,
+    // allow untrusted event to acount for synthetic event dispatched by third party xhr wrapper
+    { allowUntrustedEvents: true },
     request,
     'loadend',
     () => {

packages/core/src/transport/startBatchWithReplica.ts

@@ -32,7 +32,7 @@ export function startBatchWithReplica<T extends Context>(
   function createBatchFromConfig(configuration: Configuration, { endpoint, encoder }: BatchConfiguration) {
     return batchFactoryImp({
       encoder,
-      request: createHttpRequest(configuration, endpoint, configuration.batchBytesLimit, reportError),
+      request: createHttpRequest(endpoint, configuration.batchBytesLimit, reportError),
       flushController: createFlushController({
         messagesLimit: configuration.batchMessagesLimit,
         bytesLimit: configuration.batchBytesLimit,

packages/core/test/emulate/createNewEvent.ts

@@ -2,23 +2,36 @@ import type { MouseEventOnElement } from '@datadog/browser-rum-core'
 import type { TrustableEvent } from '../../src'
 import { objectEntries } from '../../src'
 
-export function createNewEvent(eventName: 'click', properties?: Partial<MouseEvent>): MouseEvent
-export function createNewEvent(eventName: 'pointerup', properties?: Partial<PointerEvent>): MouseEventOnElement
-export function createNewEvent(eventName: 'message', properties?: Partial<MessageEvent>): MessageEvent
+export function createNewEvent(eventName: 'click', properties?: Partial<MouseEvent>, trusted?: boolean): MouseEvent
+export function createNewEvent(
+  eventName: 'pointerup',
+  properties?: Partial<PointerEvent>,
+  trusted?: boolean
+): MouseEventOnElement
+export function createNewEvent(
+  eventName: 'message',
+  properties?: Partial<MessageEvent>,
+  trusted?: boolean
+): MessageEvent
 export function createNewEvent(
   eventName: 'securitypolicyviolation',
-  properties?: Partial<SecurityPolicyViolationEvent>
+  properties?: Partial<SecurityPolicyViolationEvent>,
+  trusted?: boolean
 ): SecurityPolicyViolationEvent
-export function createNewEvent(eventName: string, properties?: { [name: string]: unknown }): Event
-export function createNewEvent(eventName: string, properties: { [name: string]: unknown } = {}) {
+export function createNewEvent(eventName: string, properties?: { [name: string]: unknown }, trusted?: boolean): Event
+export function createNewEvent(
+  eventName: string,
+  properties: { [name: string]: unknown } = {},
+  trusted: boolean = true
+) {
   let event: TrustableEvent
   if (typeof Event === 'function') {
     event = new Event(eventName)
   } else {
     event = document.createEvent('Event')
     event.initEvent(eventName, true, true)
   }
-  event.__ddIsTrusted = true
+  event.__ddIsTrusted = trusted
   objectEntries(properties).forEach(([name, value]) => {
     // Setting values directly or with a `value` descriptor seems unsupported in IE11
     Object.defineProperty(event, name, {

packages/core/test/emulate/mockXhr.ts

@@ -49,11 +49,12 @@ class MockEventEmitter {
     this.listeners[name] = this.listeners[name].filter((listener) => listener !== callback)
   }
 
-  protected dispatchEvent(name: string) {
-    if (!this.listeners[name]) {
+  dispatchEvent(evt: Event) {
+    if (!this.listeners[evt.type]) {
       return
     }
-    this.listeners[name].forEach((listener) => listener.apply(this, [createNewEvent(name)]))
+
+    this.listeners[evt.type].forEach((listener) => listener.apply(this, [evt]))
   }
 }
 
@@ -85,8 +86,8 @@ export class MockXhr extends MockEventEmitter {
     this.hasEnded = true
     this.readyState = XMLHttpRequest.DONE
     this.onreadystatechange()
-    this.dispatchEvent('abort')
-    this.dispatchEvent('loadend')
+    this.dispatchEvent(createNewEvent('abort'))
+    this.dispatchEvent(createNewEvent('loadend'))
   }
 
   complete(status: number, response?: string) {
@@ -102,11 +103,11 @@ export class MockXhr extends MockEventEmitter {
     this.onreadystatechange()
 
     if (status >= 200 && status < 500) {
-      this.dispatchEvent('load')
+      this.dispatchEvent(createNewEvent('load'))
     }
     if (isServerError(status)) {
-      this.dispatchEvent('error')
+      this.dispatchEvent(createNewEvent('error'))
     }
-    this.dispatchEvent('loadend')
+    this.dispatchEvent(createNewEvent('loadend'))
   }
 }

packages/rum/src/boot/startRecording.ts

@@ -24,8 +24,7 @@ export function startRecording(
   }
 
   const replayRequest =
-    httpRequest ||
-    createHttpRequest(configuration, configuration.sessionReplayEndpointBuilder, SEGMENT_BYTES_LIMIT, reportError)
+    httpRequest || createHttpRequest(configuration.sessionReplayEndpointBuilder, SEGMENT_BYTES_LIMIT, reportError)
 
   let addRecord: (record: BrowserRecord) => void