Obfuscate browser data

You can create ingest obfuscation rules directly from the New Relic platform to mask sensitive data before it's harvested. These rules apply to all browser events. Rules configured via the New Relic platform or NerdGraph apply to APM-injected applications, copy/paste installations, and NPM installations. However, copy/paste and NPM installations can manually override New Relic platform-configured rules by adding the obfuscate property to their init configuration.

To add an obfuscation rule:

1. Go to one.newrelic.com > All capabilities > Browser > (select an app) > Settings > Application settings.
2. Under Ingest obfuscation rules, click Add a rule.
3. In the Original value field, enter a regex pattern to match the sensitive data you want to mask.
4. In the Replace with field, enter a neutral or replacement value.
5. From the Choose where to store dropdown, select the types of event attributes you want to apply the obfuscation rule to.
6. Click Add rule to create. The obfuscation rule is applied to matching data across all browser events before ingestion.

You can configure the browser agent to selectively obfuscate data in every payload it sends. This is useful if your application uses sensitive data in places the agent captures, such as navigation paths, error messages, and more.

As of browser agent version 1216 and higher, obfuscation rules can be applied to outgoing harvest payloads.

To set up these rules, configure the following browser agent property:

• The property init.obfuscate contains an array of selectors and replacements which will be used to modify each harvest before sending.
  • You'll need to manually edit your JavaScript configuration section and set the obfuscate array to contain your obfuscation conditions.

Recommendations

When configuring this property, we recommend the following:

• Use intentional regex patterns to obfuscate only what needs obfuscation.
  • Excessive obfuscation can have side-effects such as less granularity when grouping data and less ability to digest what the agent captured.
• Replace your sensitive data with neutral and generic terms that also indicate what data has been redacted.
  • Example: /account-id/g --> ACCOUNT_ID

Copy/paste installation

If you're using the copy/paste installation method, add the following configuration to your browser JavaScript configurations before the agent loader:

window.NREUM.init = {
    ...<other init properties>...,
    obfuscate: [
      {
        regex: <RegExp | string>,
        replacement: <string>,
        eventFilter: [<string>]  // Optional: specific event types to apply this rule to
      },
      ...<other obfuscation rules>...
    ]
}

NPM installation

If you're using the NPM browser installation method, add the following configuration when initializing the browser agent:

new BrowserAgent({ 
  init: {
    ...<other init properties>...,
    obfuscate: [
      {
        regex: <RegExp | string>,
        replacement: <string>,
        eventFilter: [<string>]  // Optional: specific event types to apply this rule to
      },
      ...<other obfuscation rules>...
    ]
  }
})

Examples: Scope obfuscation to specific event types

By default, obfuscation rules apply to all event types captured by the browser agent. However, you can scope rules to specific event types using the eventFilter array property.

This is particularly useful when capturing AJAX payloads, where you may want to obfuscate sensitive data in request/response bodies without affecting other events.

window.NREUM.init = {
    ...<other init properties>...,
    obfuscate: [
      {
        regex: /user-id/g,
        replacement: 'USER_ID',
        eventFilter: ['AjaxRequest']  // Optional: only apply to specific event types
      },
    ]
}

new BrowserAgent({ 
  init: {
    ...<other init properties>...,
    obfuscate: [
      {
        regex: /account-id/g,
        replacement: 'ACCOUNT_ID',
        eventFilter: ['AjaxRequest', 'JavaScriptError']  // Optional: apply to multiple event types
      },
    ]
  }
})

Via NerdGraph

You can use the NerdGraph API to query and update obfuscation rules programmatically.

Two regex patterns detect and mask common credit card formats:

Pattern 1 (simpler format):

{
  regex: /\b(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|6011[0-9]{12})\b/g,
  replacement: 'XXXX-XXXX-XXXX-XXXX',
  eventFilter: ['AjaxRequest']
}

Pattern 2 (comprehensive, covering more card types):

{
  regex: /(?:4\d{12}(?:\d{3}){0,2}|5[1-5]\d{14}|2(?!20)[2-7]\d{14}|220[0-4]\d{12}|3[47]\d{13}|3(?:0[0-5]|[68]\d)\d{11}|6(?:011|5\d{2}|4[4-9]\d)\d{12}|62\d{14,17}|35(?:2[89]|[3-8]\d)\d{12,15}|(?:5018|5020|5038|6304|6759|676[1-3])\d{8,15}|(?:60|65|81|82)\d{14})/g,
  replacement: 'XXXX-XXXX-XXXX-XXXX',
  eventFilter: ['AjaxRequest']
}

Both patterns replace detected credit card numbers with XXXX-XXXX-XXXX-XXXX.

The following regex pattern detects and masks common Social Security numbers with XXX-XX-XXXX:

{
  regex: /\b\d{3}-?\d{2}-?\d{4}\b/g,
  replacement: 'XXX-XX-XXXX',
  eventFilter: ['AjaxRequest']
}

The recommended approach is to use a non-sensitive identifier for setUserId(), such as:

• A hashed or encrypted user ID
• An internal account number
• A UUID or generated identifier

// Good: Use a non-sensitive ID
newrelic.setUserId('user-12345')

// Or use a hash of the email
newrelic.setUserId(hashEmail('user@example.com')) // e.g., 'a1b2c3d4'

If you must use email addresses as user IDs, create obfuscation rules that target specific JSON paths or attribute names, rather than matching email patterns globally:

{
  // More specific: only match emails in known sensitive fields
  regex: /("customerEmail"\s*:\s*")[^"]+(@[^"]+")/g,
  replacement: '$1EMAIL_REDACTED$2',
  eventFilter: ['AjaxRequest']
}

This approach requires careful testing to ensure you're catching all sensitive data while avoiding false positives.