---
title: Network Blocker
description: Block outgoing network requests to third-party domains until the user grants consent for the appropriate category.
---
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:

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

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        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.

## Consent Conditions

Like the script loader, `category` accepts a `HasCondition`:

```tsx
// 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:

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

## Runtime Updates

Update the network blocker configuration at runtime:

```tsx
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

### NetworkBlockerRule

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|id|string \|undefined|Optional identifier for the rule. Useful for debugging and logging.|-|Optional|
|domain|string|Domain that this rule applies to.|-|✅ Required|
|pathIncludes|string \|undefined|Optional path substring that must be present in the request path for the rule to apply.|-|Optional|
|methods|string\[] \|undefined|Optional list of HTTP methods that this rule applies to. If omitted, the rule applies to all methods.|-|Optional|
|category|HasCondition\<AllConsentNames>|Consent condition that must be satisfied to allow the request. When this condition is not satisfied, matching requests will be blocked.|-|✅ Required|

### NetworkBlockerConfig

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|enabled|boolean \|undefined|Whether the network blocker is enabled.|-|Optional|
|initialConsents|ConsentState \|undefined|The consent state snapshot that is currently used for blocking logic.|-|Optional|
|logBlockedRequests|boolean \|undefined|Whether to automatically log blocked requests to the console.|-|Optional|
|onRequestBlocked|Object \|undefined|Callback invoked whenever a request is blocked.|-|Optional|
|rules|NetworkBlockerRule|Domain rules that determine which requests should be blocked.|-|✅ Required|

#### `initialConsents` ConsentState

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

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|experience|boolean|-|-|✅ Required|
|functionality|boolean|-|-|✅ Required|
|marketing|boolean|-|-|✅ Required|
|measurement|boolean|-|-|✅ Required|
|necessary|boolean|-|-|✅ Required|

#### `onRequestBlocked`

Callback invoked whenever a request is blocked.

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|method|string|The HTTP method of the blocked request (e.g. GET, POST).|-|✅ Required|
|url|string|The URL of the blocked request.|-|✅ Required|
|rule|NetworkBlockerRule \|undefined|The rule that caused the request to be blocked, if available. Can be undefined when the blocker configuration changed between evaluation and logging.|-|Optional|

#### `rules` NetworkBlockerRule

Domain rules that determine which requests should be blocked.

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|id|string \|undefined|Optional identifier for the rule. Useful for debugging and logging.|-|Optional|
|domain|string|Domain that this rule applies to.|-|✅ Required|
|pathIncludes|string \|undefined|Optional path substring that must be present in the request path for the rule to apply.|-|Optional|
|methods|string\[] \|undefined|Optional list of HTTP methods that this rule applies to. If omitted, the rule applies to all methods.|-|Optional|
|category|HasCondition\<AllConsentNames>|Consent condition that must be satisfied to allow the request. When this condition is not satisfied, matching requests will be blocked.|-|✅ Required|