### Install Dependencies with pnpm

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/CONTRIBUTING.md

Run this command to install project dependencies. Ensure you have Node.js and pnpm installed.

```bash
pnpm install
```

--------------------------------

### Basic Example

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

A basic example demonstrating how to configure vite-plugin-csp-guard with a custom CSP policy using SHA256 hashing.

```APIDOC
## Basic Example

This example shows a minimal configuration for `vite-plugin-csp-guard`.

```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self, unsafeInline } from "csp-toolkit";

export default defineConfig({
  plugins: [
    react(),
    csp({
      algorithm: "sha256", // Hash algorithm
      dev: {
        run: true, // Run in development mode
      },
      policy: definePolicy({
        scriptSrc: [self, "https://www.google-analytics.com"],
        styleSrcElem: [
          self,
          "https://fonts.googleapis.com",
          unsafeInline,
        ],
        fontSrc: [self, "https://fonts.gstatic.com"],
      }),
    }),
  ],
});
```
```

--------------------------------

### Start Development Server

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/CONTRIBUTING.md

Use this command to start a normal TypeScript React Vite application for development purposes.

```bash
pnpm r:dev
```

--------------------------------

### Install vite-plugin-csp-guard

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/packages/vite-plugin-csp-guard/README.md

Install the plugin using npm, yarn, or pnpm.

```bash
npm install -D vite-plugin-csp-guard
# or
yarn add -D vite-plugin-csp-guard
# or
pnpm add -D vite-plugin-csp-guard
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/README.md

Installs project dependencies using pnpm. Ensure Corepack is enabled before running.

```bash
corepack enable
pnpm install
```

--------------------------------

### Build vite-plugin-csp-guard Package

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/AGENTS.md

Run this command to build the vite-plugin-csp-guard package. Ensure pnpm is installed and the project is set up.

```bash
pnpm p:build
```

--------------------------------

### Example with Environment-Specific Override

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

An example illustrating how to configure environment-specific overrides for development and build modes, including SRI for production builds.

```APIDOC
## Example with Environment-Specific Override

This example demonstrates how to configure different CSP policies and behaviors for development and production builds.

```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self } from "csp-toolkit";

export default defineConfig({
  plugins: [
    react(),
    csp({
      algorithm: "sha256",
      dev: {
        run: true,
        override: false, // RECOMMENDED: Merge with defaults so dev mode works properly
      },
      build: {
        sri: true,
        override: true, // Use only custom policy in production for strict control
      },
      policy: definePolicy({
        scriptSrc: [self, "https://www.google-analytics.com"],
        styleSrcElem: [self, "https://fonts.googleapis.com"],
        fontSrc: [self, "https://fonts.gstatic.com"],
      }),
    }),
  ],
});
```
```

--------------------------------

### Install Vite Plugin CSP Guard

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/guides/spa.mdx

Install the plugin as a development dependency using npm, yarn, or pnpm.

```bash
npm install -D vite-plugin-csp-guard
```

```bash
yarn add -D vite-plugin-csp-guard
```

```bash
pnpm add -D vite-plugin-csp-guard
```

--------------------------------

### Basic Vite Configuration with CSP Guard

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

Demonstrates a basic Vite configuration using vite-plugin-csp-guard with custom CSP policies for script and style sources. Ensure 'csp-toolkit' is installed for policy definition.

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self, unsafeInline } from "csp-toolkit";

export default defineConfig({
  plugins: [
    react(),
    csp({
      algorithm: "sha256", // Hash algorithm
      dev: {
        run: true, // Run in development mode
      },
      policy: definePolicy({
        scriptSrc: [self, "https://www.google-analytics.com"],
        styleSrcElem: [
          self,
          "https://fonts.googleapis.com",
          unsafeInline,
        ],
        fontSrc: [self, "https://fonts.gstatic.com"],
      }),
    }),
  ],
});
```

--------------------------------

### Configure vite-plugin-csp-guard with definePolicy (Recommended)

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Configure the plugin using definePolicy from csp-toolkit for type-safe policy definitions and helper keywords. Requires installing csp-toolkit.

```typescript
// vite.config.ts — definePolicy (recommended, requires: pnpm add -D csp-toolkit)
import { defineConfig } from "vite";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self, unsafeInline, data } from "csp-toolkit";

export default defineConfig({
  plugins: [
    csp({
      policy: definePolicy({
        defaultSrc: [self],
        scriptSrc: [self, "https://www.google-analytics.com"],
        styleSrcElem: [self, "https://fonts.googleapis.com", unsafeInline],
        fontSrc: [self, "https://fonts.gstatic.com"],
        imgSrc: [self, data],
      }),
    }),
  ],
});
```

--------------------------------

### Recommended `definePolicy` API

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/migrations/v4.mdx

Example of using the recommended `definePolicy` API from `csp-toolkit` for defining CSP policies with camelCase keys and helper functions. Requires importing `definePolicy` and `self`.

```typescript
import { definePolicy, self } from "csp-toolkit"
import csp from "vite-plugin-csp-guard"

csp({
  policy: definePolicy({
    scriptSrc: [self, "https://www.google-analytics.com"],
    fontSrc: [self, "https://fonts.gstatic.com"],
  }),
})
```

--------------------------------

### Configure outlierSupport for Tailwind CSS and vue-router

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

This example configures `outlierSupport` for 'tailwind' in development and 'vue-router' in production. This adjusts the plugin's transform order and hashing strategy to accommodate these tools.

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self, unsafeInline } from "csp-toolkit";

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    csp({
      dev: {
        run: true,
        // tailwind injects styles at runtime in dev → treat as post-transform
        outlierSupport: ["tailwind"],
      },
      build: {
        sri: true,
        // vue-router uses dynamic imports that need stronger lazy-loading treatment
        outlierSupport: ["vue-router"],
      },
      policy: definePolicy({
        defaultSrc: [self],
        scriptSrcElem: [self],
        // CSS-in-JS / Tailwind runtime styles require unsafe-inline for style-src-elem
        styleSrcElem: [self, unsafeInline],
      }),
    }),
  ],
});
```

--------------------------------

### Use transformPolicy to Write Deploy Config and Skip Meta Tag

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

This example demonstrates how to use the `transformPolicy` hook to write the computed CSP string to a file (e.g., `csp-built.txt`) when `meta.command` is 'build'. It then returns `null` to prevent the plugin from injecting the CSP meta tag, suitable for environments where CSP is delivered via HTTP headers.

```typescript
import * as fs from "node:fs";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";

export default defineConfig({
  plugins: [
    react(),
    csp({
      policy: {
        "default-src": ["'self'"],
        "script-src-elem": ["'self'"],
        "style-src-elem": ["'self'"],
      },
      transformPolicy: (cspString, meta) => {
        if (meta.command === "build") {
          // Example: emit a file your host reads at deploy time
          fs.writeFileSync(
            "csp-built.txt",
            cspString,
            "utf8",
          );
        }
        // Headers-only delivery in production: do not duplicate policy in HTML
        return null;
      },
    }),
  ],
});
```

--------------------------------

### Legacy CSP Policy Object

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/migrations/v4.mdx

Example of using the legacy `policy` object with kebab-case directive keys. This format is still supported.

```typescript
csp({
  policy: {
    "script-src": ["'self'", "https://www.google-analytics.com"],
    "font-src": ["'self'", "https://fonts.gstatic.com"],
  },
})
```

--------------------------------

### Basic SPA Configuration

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/guides/spa.mdx

Configure the plugin for SPA development with basic script and font source policies. Ensure 'run: true' is set for dev mode.

```typescript
import {
  defineConfig
} from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self } from "csp-toolkit";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    csp({
      dev: {
        run: true,  // Run the plugin in dev mode
      },
      policy: definePolicy({
        scriptSrc: [self, "https://www.google-analytics.com"],    //Allow google analytics to run
        fontSrc: [self, "https://fonts.gstatic.com"],    //Allows fonts from Google to load
      }),
      build:{
        sri: true
      }
    }),
  ],
});

```

--------------------------------

### Build All Vite Test Apps

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/AGENTS.md

Executes a build process for all Vite applications located in the 'apps' folder, excluding the documentation app. This is useful for testing integrations.

```bash
pnpm build
```

--------------------------------

### Define CSP Policy with Plain Object

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

Alternatively, use a plain object with kebab-case directive keys and string sources. This method is still supported but `definePolicy` is recommended for its enhanced features and type safety.

```json
{
    "script-src": ["'self'", "https://www.google-analytics.com"],
    "style-src-elem": [
        "'self'",
        "https://fonts.googleapis.com",
        "'unsafe-inline'",
    ],
    "font-src": ["'self'", "https://fonts.gstatic.com"],
}
```

--------------------------------

### Build Specific Vite App (MUI Integration)

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/AGENTS.md

Builds a specific Vite application designed to test the Material-UI (MUI) integration with vite-plugin-csp-guard. Refer to the root package.json for other app-specific build scripts.

```bash
pnpm mui:build
```

--------------------------------

### SPA Configuration with Outlier Support

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/guides/spa.mdx

Enable outlier support for pre-processors like 'less' when running 'vite dev'. This ensures proper handling of additional assets.

```typescript
import {
  defineConfig,
  PluginOption
} from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    csp({
      dev: {
        run: true,
        outlierSupport: ["less"], 
      },
    })
  ]
});

```

--------------------------------

### Configure vite-plugin-csp-guard with Plain Object Policy

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Configure the plugin using a plain JavaScript object for the policy, which is still supported but less recommended than definePolicy.

```typescript
// vite.config.ts — plain object (still supported)
import csp from "vite-plugin-csp-guard";

export default {
  plugins: [
    csp({
      policy: {
        "default-src": ["'self'"],
        "script-src": ["'self'", "https://www.google-analytics.com"],
        "style-src-elem": ["'self'", "https://fonts.googleapis.com", "'unsafe-inline'"],
        "font-src": ["'self'", "https://fonts.gstatic.com"],
      },
    }),
  ],
};
```

--------------------------------

### Generate New Vite Application with Turbo

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/README.md

Creates a new Vite application within the monorepo using the Turborepo generator. This command sets up the application in the `apps` directory and integrates it with the monorepo's configurations.

```bash
npx turbo gen vite-app
```

--------------------------------

### Enable CSP Guard in Development Mode

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Configure the `dev` option to enable CSP hashing during `vite dev`. Setting `run: true` allows live CSP hashing to surface violations in the browser before production. `outlierSupport` is required for pre-processors like Sass or frameworks like Vue.

```typescript
// vite.config.ts — dev mode with CSS pre-processor support
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self } from "csp-toolkit";

export default defineConfig({
  plugins: [
    vue(),
    csp({
      dev: {
        run: true,
        // Required when using sass/scss/less/stylus/tailwind/vue in dev
        outlierSupport: ["vue", "scss"],
        // false = merge with plugin defaults so dev server loads correctly (recommended)
        override: false,
      },
      policy: definePolicy({
        scriptSrc: [self],
        styleSrcElem: [self],
      }),
    }),
  ],
});
```

--------------------------------

### Configure vite-plugin-csp-guard with Full Options

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Configure the plugin in vite.config.ts with various options for build and development modes, including algorithm, SRI, and policy definitions.

```typescript
// vite.config.ts — full options example
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self, unsafeInline } from "csp-toolkit";

export default defineConfig({
  plugins: [
    react(),
    csp({
      algorithm: "sha256",          // "sha256" | "sha384" | "sha512"
      override: false,              // merge plugin defaults with your policy
      dev: {
        run: true,                  // enable CSP in vite dev server
        outlierSupport: ["tailwind"], // tell plugin about CSS pre-processors
        override: false,            // keep defaults in dev (recommended)
      },
      build: {
        sri: true,                  // add integrity= to every asset
        outlierSupport: ["vue-router"],
        override: true,             // use ONLY your policy in production
      },
      policy: definePolicy({
        scriptSrc: [self, "https://www.google-analytics.com"],
        styleSrcElem: [self, "https://fonts.googleapis.com", unsafeInline],
        fontSrc: [self, "https://fonts.gstatic.com"],
        imgSrc: [self, "https://images.example.com"],
      }),
    }),
  ],
});
```

--------------------------------

### Configure CSP in vite.config.ts

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/packages/vite-plugin-csp-guard/README.md

Configure the CSP plugin in your vite.config.ts file. Specify the hashing algorithm, enable development mode if needed, and define your CSP policy.

```typescript
import {
  defineConfig
} from "vite";
import csp from "vite-plugin-csp-guard";

export default defineConfig({
  plugins: [
    csp({
      algorithm: "sha256", // The algorithm to use for hashing
      dev: {
        run: true, // If you want to run the plugin in `vite dev` mode
      },
      policy: {
        // Specify the policy here.
        "script-src": ["'self'", "https://www.google-analytics.com"], // Example: Allow Google Analytics
        "style-src": ["'self'", "https://fonts.googleapis.com"], // Example: Allow Google Fonts
      },
    }),
  ],
});
```

--------------------------------

### Plugin defaults for production build

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

These are the default CSP policies applied during a production build if the `override` option is set to `false` (merged with user-defined policies).

```json
{
  "default-src": ["'self'"],
  "img-src":     ["'self'"],
  "script-src-elem": ["'self'"],
  "style-src-elem":  ["'self'"],
}
```

--------------------------------

### Vite Configuration with Environment-Specific CSP Overrides

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

Shows how to configure vite-plugin-csp-guard with environment-specific CSP settings for development and build. It highlights the 'override' option for strict production control and merging for development.

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self } from "csp-toolkit";

export default defineConfig({
  plugins: [
    react(),
    csp({
      algorithm: "sha256",
      dev: {
        run: true,
        override: false, // RECOMMENDED: Merge with defaults so dev mode works properly
      },
      build: {
        sri: true,
        override: true, // Use only custom policy in production for strict control
      },
      policy: definePolicy({
        scriptSrc: [self, "https://www.google-analytics.com"],
        styleSrcElem: [self, "https://fonts.googleapis.com"],
        fontSrc: [self, "https://fonts.gstatic.com"],
      }),
    }),
  ],
});
```

--------------------------------

### Default CSP Policies

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/guides/policy.mdx

Understand the default policies provided by csp-toolkit, which are merged with your custom policies. These cover basic security needs.

```typescript
import { definePolicy, self } from "csp-toolkit"

definePolicy({
  defaultSrc: [self],
  imgSrc: [self],
  scriptSrcElem: [self],
  styleSrcElem: [self],
})
```

```json
"default-src": ["'self'"],
"img-src": ["'self'"],
"script-src-elem": ["'self'"],
"style-src-elem": ["'self'"]
```

--------------------------------

### Define CSP Policy with definePolicy

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

Use `definePolicy` from `csp-toolkit` for recommended policy creation. It supports camelCase directive keys and keyword helpers like `self` and `unsafeInline`. Ensure all necessary directives for your application are included.

```typescript
import { definePolicy, self, unsafeInline } from "csp-toolkit"

definePolicy({
    scriptSrc: [self, "https://www.google-analytics.com"],
    styleSrcElem: [
        self,
        "https://fonts.googleapis.com",
        unsafeInline,
    ],
    fontSrc: [self, "https://fonts.gstatic.com"],
})
```

--------------------------------

### Configure SHA Algorithm for CSP Hashes

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Use the `algorithm` option to specify the SHA algorithm (e.g., 'sha512') for computing integrity hashes. This ensures stronger integrity guarantees for inline scripts and styles.

```typescript
// vite.config.ts — use sha512 for stronger integrity guarantees
import { defineConfig } from "vite";
import csp from "vite-plugin-csp-guard";

export default defineConfig({
  plugins: [
    csp({
      algorithm: "sha512",
      policy: {
        "default-src": ["'self'"],
        "script-src-elem": ["'self'"],
        "style-src-elem": ["'self'"],
      },
    }),
  ],
});

// Resulting meta tag will contain hashes like:
// sha512-<base64>  instead of  sha256-<base64>
```

--------------------------------

### Configure different override behavior per environment

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

This configuration demonstrates setting the `override` flag differently for development and production builds. `dev.override: false` merges policies, while `build.override: true` uses only the declared policy.

```typescript
import { defineConfig } from "vite";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self } from "csp-toolkit";

export default defineConfig({
  plugins: [
    csp({
      // Top-level default: merge (override: false)
      override: false,
      dev: {
        run: true,
        override: false, // Recommended: merge so dev server HMR works
      },
      build: {
        override: true,  // In production, use ONLY the declared policy below
      },
      policy: definePolicy({
        defaultSrc: [self],
        scriptSrcElem: [self, "https://cdn.example.com"],
        styleSrcElem: [self],
        fontSrc: [self, "https://fonts.gstatic.com"],
        imgSrc: [self, "https://images.example.com"],
        connectSrc: [self, "https://api.example.com"],
      }),
    }),
  ],
});
```

--------------------------------

### Add csp-toolkit as a Dev Dependency

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/migrations/v4.mdx

Command to add `csp-toolkit` as a development dependency using pnpm, npm, or yarn. This is required if you import from `csp-toolkit` in your Vite config or app code.

```bash
pnpm add -D csp-toolkit
# or: npm install -D csp-toolkit   /  yarn add -D csp-toolkit
```

--------------------------------

### algorithm Option

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

Configures the hashing algorithm used for CSP nonces and hashes. Supports SHA256, SHA384, and SHA512.

```APIDOC
## Options

### algorithm

- **Type:** `string`
- **Default:** `sha256`
- **Description:** The algorithm to use for hashing the content.
- **Options:**
  - `sha256`
  - `sha384`
  - `sha512`
```

--------------------------------

### Plugin defaults for dev server

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

These are the default CSP policies applied during development if the `override` option is set to `false`. Note the addition of `data:` to `img-src` for HMR.

```json
{
  "default-src": ["'self'"],
  "img-src":     ["'self'", "data:"] ,
  "script-src-elem": ["'self'"],
  "style-src-elem":  ["'self'"],
}
```

--------------------------------

### dev Option

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

Configuration object for the development server mode, controlling whether the plugin runs and how policies are applied.

```APIDOC
### dev

- **Type:** `object`
- **Default:** `{run: false, outlierSupport: [], override: undefined}`
- **Description:** The options for the dev server.

#### dev properties

##### `run`

- **Type:** `boolean`
- **Default:** `false`
- **Description:** Determines whether the `vite-plugin-csp-guard` should run in development mode. When set to `true`, the plugin will generate and apply CSP hashes even during development, allowing you to test CSP policies before deployment.

<Callout type="info">
  Enabling `run` in development can help identify CSP violations early in the development process, making it easier to address them before production.
</Callout>

<Callout type="warning">
  Enabling `run` could have performance implications in development mode.
</Callout>

##### `outlierSupport`

- **Type:** `Array<string>`
- **Default:** `[]`
- **Description:** A list of technologies that this plugin needs to be aware of to handle logic differently in order for this plugin to function how you would expect during dev mode.
- **Options**:
  - `sass`
  - `scss`
  - `less`
  - `stylus`
  - `tailwind`
  - `vue`

<Callout type="info">
    If you are using any css pre-processors that are not supported, you can try adding `sass` to the array of `outlierSupport` to see if it works. Either way, please open an issue on the repo so we can add support for it.
</Callout>

<Callout type="warning">
  These outliers are for dev mode only. Check out [Build Modes](#build) outliers too!
</Callout>

##### `override`

- **Type:** `boolean`
- **Default:** `undefined` (falls back to top-level `override`)
- **Description:** Override the default dev policy in development mode. When set to `true`, only your custom policy will be used. When set to `false`, your policy will be merged with the default dev policy. If not specified, falls back to the top-level `override` option.

<Callout type="warning">
  **Important:** Setting `dev.override: true` will likely cause dev mode to not work properly! The plugin needs to merge with the default dev policy (which includes `'self'` for `script-src-elem` and `style-src-elem`) to ensure that generated hashes are properly collected and dev server assets load correctly. Only use `dev.override: true` if you fully understand the implications and are willing to manually manage all required CSP directives.
</Callout>

<Callout type="info">
  **Recommended:** Keep `dev.override: false` (or leave it undefined to use the default merging behavior) to ensure smooth development experience with automatic hash collection.
</Callout>
```

--------------------------------

### Write CSP to vercel.json and skip meta tag using transformPolicy

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Use the `transformPolicy` hook to write the CSP string to a `vercel.json` file and return `null` to prevent duplicate injection into the HTML meta tag. This is useful for delivering CSP via HTTP headers.

```typescript
import * as fs from "node:fs";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self } from "csp-toolkit";

export default defineConfig({
  plugins: [
    react(),
    csp({
      policy: definePolicy({
        defaultSrc: [self],
        scriptSrcElem: [self],
        styleSrcElem: [self],
      }),
      transformPolicy: (cspString, meta) => {
        // Only write config during production build, not on every HMR reload
        if (meta.command === "build") {
          const vercelConfig = {
            headers: [
              {
                source: "/(.*)",
                headers: [
                  { key: "Content-Security-Policy", value: cspString },
                ],
              },
            ],
          };
          fs.writeFileSync(
            "vercel.json",
            JSON.stringify(vercelConfig, null, 2),
            "utf8"
          );
          console.log(`[CSP] Written to vercel.json using ${meta.algorithm}`);
        }
        // Return null to prevent duplicate policy in HTML meta tag
        return null;
      },
    }),
  ],
});
```

--------------------------------

### Configure Subresource Integrity (SRI) for Builds

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Enable Subresource Integrity (SRI) by setting `build.sri` to `true` or an options object. This generates `integrity=` attributes for build assets and injects a JS runtime to patch dynamic imports. Configure `skipResources` to exclude specific URLs or element IDs.

```typescript
// vite.config.ts — full SRI configuration
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy, self } from "csp-toolkit";

export default defineConfig({
  plugins: [
    react(),
    csp({
      policy: definePolicy({
        defaultSrc: [self],
        scriptSrcElem: [self],
        styleSrcElem: [self],
      }),
      build: {
        sri: {
          runtimePatchDynamicLinks: true,   // patch DOM for lazy chunks (default true)
          preloadDynamicChunks: true,        // inject <link rel="modulepreload"> (default true)
          crossorigin: "anonymous",          // set crossorigin= on all integrity elements
          skipResources: [
            "https://www.googletagmanager.com/*",  // glob: skip GTM
            "analytics-script",                    // skip by element id
          ],
        },
      },
    }),
  ],
});

// Resulting index.html will contain:
// <script type="module" src="/assets/index-Dh6Wg2cq.js"
//   integrity="sha256-<hash>" crossorigin="anonymous"></script>
// <link rel="stylesheet" href="/assets/index-CAmFq5p0.css"
//   integrity="sha256-<hash>" crossorigin="anonymous">
```

--------------------------------

### Define Production Default CSP Policy

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Defines a minimal default CSP policy for production environments. This policy is automatically merged unless `override: true` is set in the plugin options.

```ts
// Production default (merged into your policy unless build.override: true)
import { definePolicy, self, data } from "csp-toolkit";

const DEFAULT_POLICY = definePolicy({
  defaultSrc: [self],
  imgSrc: [self],
  scriptSrcElem: [self],
  styleSrcElem: [self],
});
```

--------------------------------

### Define Development Default CSP Policy

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Defines a default CSP policy for development environments, including the `data:` scheme for dev-server SVG/image assets.

```ts
// Dev default (adds data: scheme for dev-server SVG/image assets)
const DEFAULT_DEV_POLICY = definePolicy({
  defaultSrc: [self],
  imgSrc: [self, data],
  scriptSrcElem: [self],
  styleSrcElem: [self],
});
```

--------------------------------

### Define Policy with Type-Safe Primitives

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/guides/policy.mdx

Use `definePolicy` with camelCase directive keys and helpers like `self` and `data` for type-safe policy definition. This is the recommended approach.

```typescript
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import csp from "vite-plugin-csp-guard"
import { definePolicy, self, data } from "csp-toolkit"

export default defineConfig({
  plugins: [
    react(),
    csp({
      policy: definePolicy({
        defaultSrc: [self],
        imgSrc: [self, data],
        scriptSrc: ["https://www.google-analytics.com"],
      }),
    }),
  ],
})
```

--------------------------------

### Allow Third-Party CSS

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/guides/policy.mdx

Configure `styleSrc` to allow styles from specific URLs, such as external CSS files. This ensures that external stylesheets can be applied.

```typescript
import { defineConfig, PluginOption } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy } from "csp-toolkit";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    csp({
        policy: definePolicy({
            styleSrc: ["https://example.com/styles/main.css"],
        }),
    }),
  ],
});
```

--------------------------------

### Allow Third-Party JavaScript

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/guides/policy.mdx

Configure `scriptSrc` to allow scripts from specific third-party domains like Google Analytics. Be cautious as this trusts the third-party code.

```typescript
import { defineConfig, PluginOption } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
import { definePolicy } from "csp-toolkit";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    csp({
        policy: definePolicy({
            scriptSrc: ["https://www.google-analytics.com"],
        }),
    }),
  ],
});
```

--------------------------------

### Generate Base64 Hash for CSP

Source: https://context7.com/tsotimus/vite-plugin-csp-guard/llms.txt

Generates a base64-encoded cryptographic hash of a string, used internally for CSP hash computation. The raw digest is returned without a prefix.

```ts
import { generateHash } from "vite-plugin-csp-guard/src/policy/core";
// (Internal use — not part of the public API, shown for reference)

const inlineScript = `console.log("Hello World");`;
const hash = generateHash(inlineScript, "sha256");
// hash => "47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU="

// The plugin then stores: "sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU="
// and injects it into the CSP meta tag as: sha256-47DEQp...
```

--------------------------------

### transformPolicy Hook

Source: https://github.com/tsotimus/vite-plugin-csp-guard/blob/main/apps/docs/pages/api-docs.mdx

The `transformPolicy` hook allows you to modify the final CSP string before it's used. It can be used to sync the policy with external configuration files or to skip meta tag injection entirely.

```APIDOC
## transformPolicy

### Description
This function runs after the final CSP string is computed. Use it to sync the policy to host-specific files (e.g., `vercel.json`, `customHttp.yml` on AWS Amplify, or Cloudflare `_headers`) while `vite build` still has the complete string.

### Type
`(cspString: string, meta: TransformPolicyMeta) => string | null | undefined | void`

### Parameters
#### Arguments
- **cspString** (string) - The computed Content Security Policy string.
- **meta** (TransformPolicyMeta) - An object containing metadata about the build process.
  - **command** (`"build" | "serve"`) - Indicates if the plugin is running during `vite build` or `vite dev`.
  - **algorithm** (`"sha256" | "sha384" | "sha512"`) - The hashing algorithm in use.

### Return Value
- `undefined` (or omitted return): Keeps the default behavior, injecting a meta tag with the generated policy string.
- `string`: Uses the returned string as the meta tag `content`, replacing the generated string.
- `null`: Skips injecting the `<meta>` tag entirely, useful when the policy is sent as an HTTP `Content-Security-Policy` response header.

### Example
```ts
import * as fs from "node:fs";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";

export default defineConfig({
  plugins: [
    react(),
    csp({
      policy: {
        "default-src": ["'self'"],
        "script-src-elem": ["'self'"],
        "style-src-elem": ["'self'"],
      },
      transformPolicy: (cspString, meta) => {
        if (meta.command === "build") {
          // Example: emit a file your host reads at deploy time
          fs.writeFileSync(
            "csp-built.txt",
            cspString,
            "utf8",
          );
        }
        // Headers-only delivery in production: do not duplicate policy in HTML
        return null;
      },
    }),
  ],
});
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.