Add Request Body and Header Field Masking Support for Browser SDK

[anwarramadha]

The Browser SDK should support masking of sensitive data in both request bodies and headers before sending telemetry to HyperDX. This feature is important for privacy and compliance, ensuring that sensitive fields such as tokens, credentials, or personal data are not transmitted or stored.

Recommended Acceptance Criteria:

• Allow configuration of field names (e.g., password, authorization, token) to be masked.
• Mask matching fields in request headers.
• Mask matching fields in request bodies (including nested objects).
• Ensure masking happens before data leaves the client.
• Provide default mask pattern (e.g., ***) and allow custom mask value.
• Include documentation and usage examples in the Browser SDK README.

HyperDX.init({
  apiKey: "<API_KEY>",
  maskFields: {
    headers: ["authorization", "x-api-key"],
    body: ["password", "creditCard.number"]
  },
  maskPlaceholder: "***"
});

Goal:
Prevent sensitive or personally identifiable information from being logged or transmitted by the HyperDX Browser SDK.

[brandon-pereira]

Hey! This seems like it would be a valuable addition. Could you clarify if this is in regard to the Advanced Network Capture feature in the Browser SDK, or something different?

[anwarramadha]

Thanks for your reply @brandon-pereira.

Yes, this issue is regarding the Advanced Network Capture feature. Currently, it seems the feature works in an “all-or-nothing” manner — either sending the full request/response body and headers, or not capturing them at all.

If possible, I’d like to request an enhancement: the Advanced Network Capture API should support an option or callback function that allows us to sanitize or filter specific fields in the request body, headers, or the full request before it’s sent. This would give much more flexibility for handling sensitive data while still enabling detailed network capture.

[brandon-pereira]

Gotcha, that makes sense 👍

This feature is implemented here: https://github.com/hyperdxio/hyperdx-js/blob/main/packages/otel-web/src/HyperDXFetchInstrumentation.ts#L44, currently we just capture the headers and body without much manipulation,

I believe we could do a few things to improve this behavior:

1. Automatically reject if the headers/body contain known sensitive information like apiKey/authorization
2. Provide a maskCapturedRequestFn which allows you to manually process and sanitize the data as needed. Ideally sending a normalized representation of the headers and body

We are open to contributions to either of these changes, if you have the capacity!

[anwarramadha]

Got it. Just to add more context, the advancedNetworkCapture logic is currently executed inside applyCustomAttributesOnSpan.

Because of that, adding support for a callback function actually fits the existing architecture quite naturally. applyCustomAttributesOnSpan already has access to the span, request data, response data, and all the attributes you’re enriching. So exposing that to a user-defined function would be straightforward.

Something like:

// Option 1: boolean
advancedNetworkCapture: true,

// Option 2: custom sanitizer
advancedNetworkCapture: {
  sanitizeRequest?: boolean | ((request: Request | RequestInit) => Request | RequestInit);
  sanitizeResponse?: boolean | ((response: Response) => Response);
}

Where the callback receives the full captured request/response object and returns a sanitized/normalized version that HyperDX should store.

This would give us:

• the simplicity of a boolean for users who just want it on/off

• the flexibility to manually sanitize or strip sensitive fields

• full control over masking rules without modifying the core instrumentation

[brandon-pereira]

I like this!

To take it a little futher, we could do a structure like this:

// Option 1: boolean (fully on or off), if on, will use built in sanitizers
advancedNetworkCapture: true,

// Option 2: disable built in sanitizers 
advancedNetworkCapture: { enabled: true, sanitizeResponse: false, sanitizeRequest: false }

// Option 3: custom sanitizers, disables built in sanitizers (potentially expose them as functions to call?)
 advancedNetworkCapture: { enabled: true, sanitizeResponse: () =>{}, sanitizeRequest: () => {} }

I added the enabled because it felt weird that advancedNetworkCapture: {} would enable the feature, thoughts?

Lastly, I believe this should be a breaking change, because we would be enabling the default sanitization logic by default for all users, which could cause issues for some teams.

cc @wrn14897 in case he has thoughts

[wrn14897]

Hey @anwarramadha , great question here! For masking headers, we can follow what’s already implemented in the Node SDK using the httpCaptureHeadersClientRequest and httpCaptureHeadersClientResponse lists (see

hyperdx-js/packages/node-opentelemetry/src/otel.ts

Lines 290 to 299 in f3ccd9b

	? getHyperDXHTTPInstrumentationConfig({
	httpCaptureHeadersClientRequest:
	env.OTEL_INSTRUMENTATION_HTTP_CAPTURE_HEADERS_CLIENT_REQUEST,
	httpCaptureHeadersClientResponse:
	env.OTEL_INSTRUMENTATION_HTTP_CAPTURE_HEADERS_CLIENT_RESPONSE,
	httpCaptureHeadersServerRequest:
	env.OTEL_INSTRUMENTATION_HTTP_CAPTURE_HEADERS_SERVER_REQUEST,
	httpCaptureHeadersServerResponse:
	env.OTEL_INSTRUMENTATION_HTTP_CAPTURE_HEADERS_SERVER_RESPONSE,
	})

).

For the request body, we could allow users to provide a filter list, and the SDK should by default filter out sensitive data—similar to how getShouldRecordBody works (see

hyperdx-js/packages/node-opentelemetry/src/instrumentations/http.ts

Lines 51 to 63 in f3ccd9b

	export const getShouldRecordBody =
	(defaultFilter?: string) => (body: string) => {
	const lowerCaseBody = body.toLowerCase();
	const keywords =
	splitCommaSeparatedStrings(defaultFilter) ??
	DEFAULT_DENYLIST.map((keyword) => keyword.toLowerCase());
	// if body contains any of the keywords, drop it
	if (keywords?.some((keyword) => lowerCaseBody.includes(keyword))) {
	return false;
	}
	return true;
	};

).