{"id":22625,"library":"vite-plugin-csp-guard","title":"vite-plugin-csp-guard","description":"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.","status":"active","version":"4.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/tsotimus/vite-plugin-csp-guard","tags":["javascript","frontend","csp","security","content-security-policy","plugin","vite","hash","typescript"],"install":[{"cmd":"npm install vite-plugin-csp-guard","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-csp-guard","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-csp-guard","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin functionality","package":"vite","optional":false}],"imports":[{"note":"Default import; plugin is ESM-only. CommonJS require will fail.","wrong":"const csp = require('vite-plugin-csp-guard')","symbol":"csp","correct":"import csp from 'vite-plugin-csp-guard'"},{"note":"Named import will not work; only default export exists.","wrong":"import { csp } from 'vite-plugin-csp-guard'","symbol":"csp","correct":"import csp from 'vite-plugin-csp-guard'"},{"note":"Standard Vite config import, not part of this package.","wrong":null,"symbol":"defineConfig","correct":"import { defineConfig } from 'vite'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport csp from 'vite-plugin-csp-guard';\n\nexport default defineConfig({\n  plugins: [\n    csp({\n      algorithm: 'sha256',\n      dev: { run: true },\n      policy: {\n        'script-src': [\"'self'\", 'https://www.google-analytics.com'],\n        'style-src': [\"'self'\", 'https://fonts.googleapis.com'],\n      },\n    }),\n  ],\n});","lang":"typescript","description":"Basic setup for vite-plugin-csp-guard with a CSP policy allowing self and specific external sources."},"warnings":[{"fix":"Upgrade Vite to 8.x or use version 3.x of this plugin.","message":"Version 4.0.0 requires Vite ^8.0.0; older Vite versions are incompatible.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure Vite 7 is installed, or downgrade to version 2.x.","message":"Version 3.0.0 dropped support for Vite 6 and earlier.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Set `dev: { run: true }` in the plugin options.","message":"Dev mode CSP enforcement requires `dev: { run: true }` in configuration; defaults to false.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Migrate to new import: `import csp from 'vite-plugin-csp-guard'`.","message":"The package was previously named `csp-toolkit`; older versions may have different API.","severity":"deprecated","affected_versions":"<2.0.0"},{"fix":"Always pass an object like `{ 'script-src': [\"'self'\"] }`.","message":"Policy must be an object; string policies are not supported.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Configure SSR in Vite and use `nonce` option.","message":"Nonces require SSR set-up; not available in pure client-side builds.","severity":"gotcha","affected_versions":">=2.0.4"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use ES module import syntax: `import csp from 'vite-plugin-csp-guard'`","cause":"Package not installed or ESM-only module imported via CommonJS require.","error":"Cannot find module 'vite-plugin-csp-guard' or its corresponding type declarations."},{"fix":"Use `import csp from 'vite-plugin-csp-guard'` without curly braces.","cause":"Attempting named import instead of default import.","error":"The requested module 'vite-plugin-csp-guard' does not provide an export named 'csp'"},{"fix":"Add appropriate sources to your policy (e.g., 'self', specific domains).","cause":"Policy too strict or missing allowed sources.","error":"Uncaught (in promise) SecurityError: Failed to execute 'postMessage' on 'Window': Content Security Policy violation"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}