fix(browser): Apply urlQueryParams to the Referer header

dev-packages/browser-integration-tests/suites/integrations/httpContext/test.ts

@@ -37,6 +37,40 @@ sentryTest('httpContextIntegration filters sensitive query params in the URL', a
   expect(errorEvent.request?.url).toBe(`${url}?jwt=[Filtered]&page=1`);
 });
 
+sentryTest(
+  'httpContextIntegration filters sensitive query params in the Referer header',
+  async ({ getLocalTestUrl, page }) => {
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const errorEventPromise = waitForErrorRequest(page);
+
+    await page.goto(url, { referer: `${url}?jwt=sensitive-jwt-value&page=1` });
+
+    const errorEvent = envelopeRequestParser(await errorEventPromise);
+
+    expect(errorEvent.request?.headers?.Referer).toBe(`${url}?jwt=[Filtered]&page=1`);
+  },
+);
+
+sentryTest(
+  'httpContextIntegration filters sensitive query params in the referer span attribute',
+  async ({ getLocalTestUrl, page }) => {
+    sentryTest.skip(shouldSkipTracingTest());
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const spanPromise = waitForStreamedSpan(page, span => span.is_segment && getSpanOp(span) === 'pageload');
+
+    await page.goto(url, { referer: `${url}?jwt=sensitive-jwt-value&page=1` });
+
+    const pageloadSpan = await spanPromise;
+
+    expect(pageloadSpan.attributes['http.request.header.referer']).toEqual({
+      type: 'array',
+      value: [`${url}?jwt=[Filtered]&page=1`],
+    });
+  },
+);
+
 sentryTest('httpContextIntegration captures url, user-agent, and referer', async ({ getLocalTestUrl, page }) => {
   sentryTest.skip(shouldSkipTracingTest());
   const url = await getLocalTestUrl({ testDir: __dirname });

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/pageload-sensitive-query-params-static/test.ts

@@ -16,10 +16,11 @@ sentryTest(
     const url = await getLocalTestUrl({ testDir: __dirname });
 
     const pageloadRequestPromise = waitForTransactionRequest(page, event => event.contexts?.trace?.op === PAGELOAD);
-    await page.goto(`${url}?jwt=sensitive-jwt-value&page=1`);
+    await page.goto(`${url}?jwt=sensitive-jwt-value&page=1`, { referer: `${url}?jwt=sensitive-jwt-value&page=2` });
     const eventData = envelopeRequestParser<Event>(await pageloadRequestPromise);
 
     expect(eventData.request?.url).toBe(`${url}?jwt=[Filtered]&page=1`);
+    expect(eventData.request?.headers?.Referer).toBe(`${url}?jwt=[Filtered]&page=2`);
     expect(eventData.spans?.find(({ op }) => op === BROWSER_REQUEST)?.description).toBe(`${url}?jwt=[Filtered]&page=1`);
     expect(eventData.spans?.find(({ op }) => op === RESOURCE_IMG)?.description).toBe(
       'https://sentry-test-site.example/path/to/image.svg?token=[Filtered]&size=2',

packages/browser/src/helpers.ts

@@ -1,9 +1,10 @@
-import type { HandlerDataError, Mechanism, WrappedFunction } from '@sentry/core';
+import type { Client, HandlerDataError, Mechanism, WrappedFunction } from '@sentry/core';
 import {
   addExceptionMechanism,
   addExceptionTypeValue,
   addNonEnumerableProperty,
   captureException,
+  filterCollectedUrl,
   getOriginalFunction,
   GLOBAL_OBJ,
   markFunctionWrapped,
@@ -221,15 +222,18 @@ export function wrap<T extends WrappableFunction, NonFunction>(
 
 /**
  * Get HTTP request data from the current page.
+ *
+ * The `Referer` header has `dataCollection.urlQueryParams` of `client` applied. `url` is unfiltered, so
+ * callers must pass it through `filterCollectedUrl`.
  */
-export function getHttpRequestData(): { url: string; headers: Record<string, string> } {
+export function getHttpRequestData(client: Client): { url: string; headers: Record<string, string> } {
   // grab as much info as exists and add it to the event
   const url = getLocationHref();
   const { referrer } = WINDOW.document || {};
   const { userAgent } = WINDOW.navigator || {};
 
   const headers = {
-    ...(referrer && { Referer: referrer }),
+    ...(referrer && { Referer: filterCollectedUrl(referrer, client) }),
     ...(userAgent && { 'User-Agent': userAgent }),
   };
   const request = {

packages/browser/src/integrations/httpcontext.ts

@@ -22,7 +22,7 @@ export const httpContextIntegration = defineIntegration(() => {
         return;
       }
 
-      const { url, headers: collectedHeaders } = getHttpRequestData();
+      const { url, headers: collectedHeaders } = getHttpRequestData(client);
 
       // We only filter the headers we collected ourselves, so headers the user set are left alone. Going by key
       // means we also catch these headers when `browserTracingIntegration` already put them on the event.
@@ -47,7 +47,7 @@ export const httpContextIntegration = defineIntegration(() => {
         return;
       }
 
-      const reqData = getHttpRequestData();
+      const reqData = getHttpRequestData(client);
 
       // `httpHeadersToSpanAttributes` would also work here, but its cookie and array handling never runs for these
       // two headers and costs every browser bundle ~400B gzip.

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -574,7 +574,7 @@ export const browserTracingIntegration = ((options: Partial<BrowserTracingOption
 
         // We store the normalized request data on the scope, so we get the request data at time of span creation
         // otherwise, the URL etc. may already be of the following navigation, and we'd report the wrong URL
-        const requestData = getHttpRequestData();
+        const requestData = getHttpRequestData(client);
         scope.setSDKProcessingMetadata({
           normalizedRequest: { ...requestData, url: filterCollectedUrl(requestData.url, client) },
         });
@@ -815,7 +815,7 @@ export function startBrowserTracingNavigationSpan(
   if (url && !isRedirect) {
     scope.setSDKProcessingMetadata({
       normalizedRequest: {
-        ...getHttpRequestData(),
+        ...getHttpRequestData(client),
         url: filterCollectedUrl(url, client),
       },
     });

packages/browser/test/integrations/httpcontext.test.ts

@@ -156,6 +156,51 @@ describe('httpContextIntegration', () => {
       expect(event.request?.url).toBe('https://example.com/?jwt=[Filtered]&page=1');
     });
 
+    it('filters sensitive query params in the Referer header attached to events', () => {
+      const client = new BrowserClient(getDefaultBrowserClientOptions());
+      const event: Event = {};
+
+      document.referrer = 'https://example.com/?jwt=baz&page=1';
+      try {
+        httpContextIntegration().preprocessEvent!(event, {}, client);
+      } finally {
+        document.referrer = 'https://example.com';
+      }
+
+      expect(event.request?.headers?.Referer).toBe('https://example.com/?jwt=[Filtered]&page=1');
+    });
+
+    it('removes the query from the Referer header attached to events when `urlQueryParams` is disabled', () => {
+      const client = new BrowserClient(getDefaultBrowserClientOptions({ dataCollection: { urlQueryParams: false } }));
+      const event: Event = {};
+
+      document.referrer = 'https://example.com/?jwt=baz&page=1';
+      try {
+        httpContextIntegration().preprocessEvent!(event, {}, client);
+      } finally {
+        document.referrer = 'https://example.com';
+      }
+
+      expect(event.request?.headers?.Referer).toBe('https://example.com/');
+    });
+
+    it('filters sensitive query params in the referer attribute of segment spans', () => {
+      const client = new BrowserClient(getDefaultBrowserClientOptions());
+      const span: Partial<StreamedSpanJSON> = {
+        is_segment: true,
+        attributes: { [SENTRY_OP]: 'pageload' },
+      };
+
+      document.referrer = 'https://example.com/?jwt=baz&page=1';
+      try {
+        httpContextIntegration().processSpan!(span as StreamedSpanJSON, client);
+      } finally {
+        document.referrer = 'https://example.com';
+      }
+
+      expect(span.attributes?.['http.request.header.referer']).toEqual(['https://example.com/?jwt=[Filtered]&page=1']);
+    });
+
     it('leaves a user-supplied event URL untouched', () => {
       const client = new BrowserClient(getDefaultBrowserClientOptions());
       const event: Event = { request: { url: 'https://example.com/?jwt=user-set' } };