Vite-Shield 🛡️

Security headers, Content-Security-Policy, and supply-chain checks for Vite apps — configured once, applied automatically across development and production.

Vite-Shield installs as a Vite plugin. After a one-time setup it re-applies on every vite dev, vite preview, and vite build, so the policy stays in sync as your app changes.

Features

• Content-Security-Policy — nonce-based when served by a live process (dev, preview, a Node server), hash-based <meta> for static builds.
• Security headers — HSTS, X-Frame-Options, Permissions-Policy, COOP/COEP/CORP, and more.
• Subresource Integrity — sha384 hashes added to built assets.
• Env-leak guard — fails the build if a VITE_-prefixed secret-shaped variable would ship in client JS.
• Supply-chain checks — Vite CVE detection, secret scanning, and dependency auditing via local git hooks.

Installation

npm install --save-dev vite-shield
npx vite-shield init

init registers the plugin in your Vite config and prompts for how the app is deployed. After that, run your app as usual — protection is active.

CLI

vite-shield init      # register the plugin and set up the project
vite-shield verify    # verify the expected policy in dist/ or on a live URL
vite-shield scan      # run secret scan and dependency audit
vite-shield doctor    # check Vite version, .env hygiene, and sourcemap policy

Verify a deployed site and fail CI on a missing header:

vite-shield verify --url https://your-site --ci

Configuration

The plugin works with no configuration. To customize, pass options in your Vite config:

import viteShield from 'vite-shield/plugin';

export default defineConfig({
  plugins: [
    viteShield({
      cspOverrides: {
        'connect-src': ["'self'", 'https://api.example.com'],
        'font-src': ["'self'", 'https://fonts.gstatic.com']
      },
      failOnEnvLeak: true
    })
  ]
});

| Option | Default | Description | |---|---|---| | cspOverrides | {} | Per-directive CSP source lists to merge with the defaults. | | failOnEnvLeak | true | Fail the build (vs. warn) when a leaked env var is detected. |

CSS-in-JS (styled-components, emotion) is detected automatically and style-src is relaxed only when in use.

Deployment

The CSP <meta> tag and SRI hashes are embedded in the build, so static hosting (S3, GCS, Azure, any CDN) is covered with no extra setup. For header-based protections such as HSTS and X-Frame-Options — which browsers ignore when set via <meta> — init also generates a server.js (Express) and nginx.conf you can run in front of the build. Snippets for Express, Fastify, Django, and Rails are available for existing backends.

Requirements

• Node.js ≥ 18
• Vite 4 or later

License

MIT — see LICENSE.