Registry / auth-security / vite-plugin-csp-guard

vite-plugin-csp-guard

library4.0.1jsnpmunverified

Vite plugin for generating Content Security Policy (CSP) headers in single-page applications. Current stable version 4.0.1, requires Vite ^8.0.0. Supports automatic hashing of inline scripts/styles, SRI integrity, nonces for SSR, and policy validation. Key differentiators include first-class SPA support, dev-mode CSP enforcement, and framework integration for Vue Router and React. Previously released under csp-toolkit; actively maintained with frequent releases.

auth-security web-framework devops

npm install vite-plugin-csp-guard

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-CSP-GU

vite-plugin-csp-guard

auth-securityjavascriptv4.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

csp

✓ import csp from 'vite-plugin-csp-guard'

✗ const csp = require('vite-plugin-csp-guard')

Default import; plugin is ESM-only. CommonJS require will fail.

csp

✓ import csp from 'vite-plugin-csp-guard'

✗ import { csp } from 'vite-plugin-csp-guard'

Named import will not work; only default export exists.

defineConfig

✓ import { defineConfig } from 'vite'

Standard Vite config import, not part of this package.

Basic setup for vite-plugin-csp-guard with a CSP policy allowing self and specific external sources.

// vite.config.ts import { defineConfig } from 'vite'; import csp from 'vite-plugin-csp-guard'; export default defineConfig({ plugins: [ csp({ algorithm: 'sha256', dev: { run: true }, policy: { 'script-src': ["'self'", 'https://www.google-analytics.com'], 'style-src': ["'self'", 'https://fonts.googleapis.com'], }, }), ], });

Debug

Known issues

breakingVersion 4.0.0 requires Vite ^8.0.0; older Vite versions are incompatible.

fix

Upgrade Vite to 8.x or use version 3.x of this plugin.

affects: >=4.0.0

breakingVersion 3.0.0 dropped support for Vite 6 and earlier.

fix

Ensure Vite 7 is installed, or downgrade to version 2.x.

affects: >=3.0.0 <4.0.0

gotchaDev mode CSP enforcement requires `dev: { run: true }` in configuration; defaults to false.

fix

Set `dev: { run: true }` in the plugin options.

affects: >=1.0.0

deprecatedThe package was previously named `csp-toolkit`; older versions may have different API.

fix

Migrate to new import: `import csp from 'vite-plugin-csp-guard'`.

affects: <2.0.0

gotchaPolicy must be an object; string policies are not supported.

fix

Always pass an object like `{ 'script-src': ["'self'"] }`.

affects: >=1.0.0

gotchaNonces require SSR set-up; not available in pure client-side builds.

fix

Configure SSR in Vite and use `nonce` option.

affects: >=2.0.4

Errors

Common errors & fixes

Cannot find module 'vite-plugin-csp-guard' or its corresponding type declarations.

Package not installed or ESM-only module imported via CommonJS require.

fix

Use ES module import syntax: `import csp from 'vite-plugin-csp-guard'`

The requested module 'vite-plugin-csp-guard' does not provide an export named 'csp'

Attempting named import instead of default import.

fix

Use `import csp from 'vite-plugin-csp-guard'` without curly braces.

Uncaught (in promise) SecurityError: Failed to execute 'postMessage' on 'Window': Content Security Policy violation

Policy too strict or missing allowed sources.

fix

Add appropriate sources to your policy (e.g., 'self', specific domains).

Upgrade

Version history

4.0.1latest on npm

Audit

Dependencies

viterequiredpeer dependency required for plugin functionality

Agent activity

32 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/tsotimus/vite-plugin-csp-guard ↗

packagehttps://www.npmjs.com/package/vite-plugin-csp-guard ↗

homepagehttps://vite-csp.tsotne.co.uk ↗