---
title: Security Headers & CSP
sidebarTitle: Security Headers
description: Configure Content Security Policy, HSTS, and other security headers via frontmcp.config or environment variables
icon: 'shield'
keywords: ['frontmcp', 'mcp', 'model context protocol', 'deployment', 'production', 'hosting', 'security headers', 'csp', 'hsts', 'typescript']
---

FrontMCP applies security headers to every HTTP response, including Content Security Policy (CSP), Strict-Transport-Security (HSTS), X-Frame-Options, and X-Content-Type-Options. Configure them via `frontmcp.config` server settings --- they are injected as environment variables at build time and read by the built-in middleware.

## Quick Start

Add security headers to `frontmcp.config.ts`:

```typescript
import { defineConfig } from 'frontmcp';

export default defineConfig({
  name: 'my-server',
  deployments: [{
    target: 'node',
    server: {
      csp: {
        enabled: true,
        directives: {
          'default-src': "'self'",
          'script-src': "'self' https://cdn.example.com",
          'upgrade-insecure-requests': '',
        },
        reportOnly: false,
      },
      headers: {
        hsts: 'max-age=31536000; includeSubDomains',
        contentTypeOptions: 'nosniff',
        frameOptions: 'DENY',
      },
    },
  }],
});
```

Build and deploy --- headers are applied automatically on every response.

## CSP Configuration

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `enabled` | boolean | `false` | Enable CSP headers |
| `directives` | `Record<string, string \| string[]>` | --- | Map of directive name to value(s) |
| `reportUri` | string | --- | URI for CSP violation reports |
| `reportOnly` | boolean | `false` | Use `Content-Security-Policy-Report-Only` instead of enforcement |

<Tip>
  Value-less CSP directives like `upgrade-insecure-requests` and `block-all-mixed-content` are supported — set the value to an empty string (`''`).
</Tip>

### Example Directives

```typescript
directives: {
  'default-src': "'self'",
  'script-src': "'self' https://cdn.example.com",
  'style-src': "'self' 'unsafe-inline'",
  'img-src': '*',
  'upgrade-insecure-requests': '',
}
```

## Security Headers

| Header | Config Field | Default | Description |
| --- | --- | --- | --- |
| `Strict-Transport-Security` | `headers.hsts` | --- | HSTS policy for HTTPS enforcement |
| `X-Content-Type-Options` | `headers.contentTypeOptions` | `nosniff` | Prevent MIME type sniffing |
| `X-Frame-Options` | `headers.frameOptions` | `DENY` | Clickjacking protection |
| Custom headers | `headers.custom` | --- | Record of additional header name-value pairs |

<Note>
  `X-Content-Type-Options: nosniff` and `X-Frame-Options: DENY` are applied by default even without explicit configuration. Set them to empty strings to disable.
</Note>

## Environment Variables

All settings are injected as environment variables at build time by the deployment adapter:

| Variable | Maps To |
| --- | --- |
| `FRONTMCP_CSP_ENABLED` | `server.csp.enabled` |
| `FRONTMCP_CSP_DIRECTIVES` | `server.csp.directives` |
| `FRONTMCP_CSP_REPORT_URI` | `server.csp.reportUri` |
| `FRONTMCP_CSP_REPORT_ONLY` | `server.csp.reportOnly` |
| `FRONTMCP_HSTS` | `server.headers.hsts` |
| `FRONTMCP_CONTENT_TYPE_OPTIONS` | `server.headers.contentTypeOptions` |
| `FRONTMCP_FRAME_OPTIONS` | `server.headers.frameOptions` |

You can override these at runtime without rebuilding:

```bash
FRONTMCP_CSP_ENABLED=1 \
FRONTMCP_CSP_DIRECTIVES="default-src 'none'" \
FRONTMCP_HSTS="max-age=0" \
node dist/main.js
```

## Programmatic Access

For built-in HTTP transport targets, FrontMCP applies the configured security headers during HTTP response handling. For custom transport adapters, header application is your adapter's responsibility — wire equivalent logic into the response pipeline yourself. The internal helper utilities are not part of the public `@frontmcp/sdk` API; if you need them re-exported, open a feature request rather than importing from repository-internal source paths.

## Report-Only Mode

Use `reportOnly: true` to test CSP rules without blocking content:

```typescript
server: {
  csp: {
    enabled: true,
    directives: {
      'default-src': "'self'",
    },
    reportUri: 'https://report.example.com/csp',
    reportOnly: true,  // violations are reported, not blocked
  },
}
```

This sets the `Content-Security-Policy-Report-Only` header instead of `Content-Security-Policy`, allowing you to monitor violations before enforcing the policy.

## Related

<CardGroup cols={2}>
  <Card title="Configuration File" icon="file-code" href="/frontmcp/deployment/frontmcp-config">
    Full configuration reference
  </Card>
  <Card title="Production Build" icon="rocket" href="/frontmcp/deployment/production-build">
    Build and deploy for production
  </Card>
</CardGroup>
