Network Blocker

The network blocker intercepts outgoing fetch and XMLHttpRequest calls and blocks them based on consent state and domain rules. This catches tracking requests that happen outside of script loading - for example, beacon calls, API requests to analytics endpoints, or pixel fires from already-loaded scripts.

Configuration

Add networkBlocker to your provider options:

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'c15t',
        backendURL: 'https://your-instance.c15t.dev',
        networkBlocker: {
          rules: [
            {
              id: 'google-analytics',
              domain: 'google-analytics.com',
              category: 'measurement',
            },
            {
              id: 'facebook-pixel',
              domain: 'facebook.com',
              pathIncludes: '/tr',
              category: 'marketing',
            },
            {
              id: 'analytics-post',
              domain: 'analytics.example.com',
              methods: ['POST'],
              category: 'measurement',
            },
          ],
        },
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}

Rule Matching

Rules match requests using three criteria:

Domain matching

The domain field matches the request hostname. Subdomains are automatically included - a rule for google-analytics.com also matches www.google-analytics.com and stats.google-analytics.com.

Path matching

The optional pathIncludes field requires the request URL path to contain the specified substring. This lets you target specific endpoints without blocking the entire domain.

Method matching

The optional methods array restricts the rule to specific HTTP methods. If omitted, the rule applies to all methods.

Like the script loader, category accepts a HasCondition:

// Simple
{
  category: 'measurement';
}

// Must have both
{
  category: {
    and: ['measurement', 'marketing'];
  }
}

// Must have either
{
  category: {
    or: ['measurement', 'marketing'];
  }
}

Monitoring Blocked Requests

Console logging

Blocked requests are logged to the console by default. Disable with logBlockedRequests: false.

Callback

Use onRequestBlocked to handle blocked requests programmatically:

networkBlocker: {
  rules: [...],
  onRequestBlocked: ({ method, url, rule }) => {
    console.log(`Blocked ${method} ${url} (rule: ${rule?.id})`);
  },
}

Runtime Updates

Update the network blocker configuration at runtime:

import { useConsentManager } from '@c15t/react';

function NetworkBlockerManager() {
  const { setNetworkBlocker } = useConsentManager();

  const addRule = () => {
    setNetworkBlocker({
      rules: [
        {
          id: 'new-tracker',
          domain: 'tracker.example.com',
          category: 'marketing',
        },
      ],
    });
  };
}

API Reference

Property

Types

Loading…

Property

Types

Loading…

Network Blocker

Configuration

Rule Matching

Domain matching

Path matching

Method matching

Consent Conditions

Monitoring Blocked Requests

Console logging

Callback

Runtime Updates

API Reference

categoryConsent condition that must be satisfied to allow the request. When this condition is not satisfied, matching requests will be blocked.requiredHasCondition<AllConsentNames>

domainDomain that this rule applies to.requiredstring

id?Optional identifier for the rule. Useful for debugging and logging.string | undefined

methods?Optional list of HTTP methods that this rule applies to. If omitted, the rule applies to all methods.{} | undefined

pathIncludes?Optional path substring that must be present in the request path for the rule to apply.string | undefined

enabled?Whether the network blocker is enabled.boolean | undefined

initialConsents?The consent state snapshot that is currently used for blocking logic.ConsentState

logBlockedRequests?Whether to automatically log blocked requests to the console.boolean | undefined

onRequestBlocked?Callback invoked whenever a request is blocked.((info: BlockedRequestInfo) => void) | u...

rulesDomain rules that determine which requests should be blocked.required{}