# CSP Header

> Content-Security-Policy directives with source lists and boolean flags.

- Name: `csp-header`
- Categories: api
- Detail page: https://open-types.dev/types/csp-header

## Install

```bash
# Types only
npx shadcn add @open-types/csp-header

# Types + Zod v4 validators
npx shadcn add @open-types/csp-header-zod

# Types + real-world examples
npx shadcn add @open-types/csp-header-examples
```

## Types

```typescript
export interface CSPDirectives {
  default_src?: string[];
  script_src?: string[];
  style_src?: string[];
  img_src?: string[];
  font_src?: string[];
  connect_src?: string[];
  media_src?: string[];
  object_src?: string[];
  frame_src?: string[];
  child_src?: string[];
  worker_src?: string[];
  form_action?: string[];
  frame_ancestors?: string[];
  base_uri?: string[];
  report_uri?: string[];
  report_to?: string[];
  upgrade_insecure_requests?: boolean;
  block_all_mixed_content?: boolean;
}
```

## Zod validator

```typescript
import * as z from "zod";
import type { CSPDirectives } from "../types/csp-header";

export const cspDirectivesSchema = z.object({
  default_src: z.array(z.string()).optional(),
  script_src: z.array(z.string()).optional(),
  style_src: z.array(z.string()).optional(),
  img_src: z.array(z.string()).optional(),
  font_src: z.array(z.string()).optional(),
  connect_src: z.array(z.string()).optional(),
  media_src: z.array(z.string()).optional(),
  object_src: z.array(z.string()).optional(),
  frame_src: z.array(z.string()).optional(),
  child_src: z.array(z.string()).optional(),
  worker_src: z.array(z.string()).optional(),
  form_action: z.array(z.string()).optional(),
  frame_ancestors: z.array(z.string()).optional(),
  base_uri: z.array(z.string()).optional(),
  report_uri: z.array(z.string()).optional(),
  report_to: z.array(z.string()).optional(),
  upgrade_insecure_requests: z.boolean().optional(),
  block_all_mixed_content: z.boolean().optional(),
}) satisfies z.ZodType<CSPDirectives>;

export type { CSPDirectives } from "../types/csp-header";
```

## Examples

```typescript
// Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
// Captured: 2026-05
import type { CSPDirectives } from "../types/csp-header";

export const cspDirectivesExamples = {
  strict: {
    default_src: ["'self'"],
    script_src: ["'self'", "'sha256-abc123='"],
    style_src: ["'self'", "'unsafe-inline'"],
    img_src: ["'self'", "data:", "https://cdn.example.com"],
    font_src: ["'self'", "https://fonts.gstatic.com"],
    connect_src: ["'self'", "https://api.example.com"],
    object_src: ["'none'"],
    frame_ancestors: ["'none'"],
    base_uri: ["'self'"],
    upgrade_insecure_requests: true,
    report_uri: ["https://report.example.com/csp"],
    report_to: ["csp-endpoint"],
  } satisfies CSPDirectives,
  reportOnly: {
    default_src: ["'self'"],
    report_uri: ["https://report.example.com/csp-report-only"],
  } satisfies CSPDirectives,
  iframeEmbedFriendly: {
    default_src: ["'self'"],
    frame_src: ["https://embed.youtube.com", "https://player.vimeo.com"],
    child_src: ["https://embed.youtube.com"],
    media_src: ["'self'", "https://cdn.example.com"],
  } satisfies CSPDirectives,
  empty: {} satisfies CSPDirectives,
  blockAllMixed: {
    default_src: ["'self'"],
    block_all_mixed_content: true,
  } satisfies CSPDirectives,
} as const;
```