@greener-games/vite-csp

A simple Vite plugin to add a Content Security Policy (CSP) to your application's index.html.

Features

• 🔒 CSP Injection: Automatically adds a <meta> tag with your CSP to the head of your HTML.
• 🛠 Customizable: Easily configure the CSP directives to fit your needs.
• 🚀 Dev & Prod: Works in both development and production builds.

Installation

npm install -D @greener-games/vite-csp
# or
yarn add -D @greener-games/vite-csp
# or
pnpm add -D @greener-games/vite-csp

Usage

Add it to your vite.config.ts (or vite.config.js):

import { defineConfig } from 'vite';
import csp from '@greener-games/vite-csp';

export default defineConfig({
  plugins: [
    csp({
      policy: {
        'default-src': ["'self'"],
        'script-src': ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
        'style-src': ["'self'", "'unsafe-inline'"],
        'img-src': ["'self'", "data:", "blob:"],
        'font-src': ["'self'", "data:"],
        'connect-src': ["'self'"],
      }
    })
  ]
});

Configuration

You can customize the CSP by passing a policy object to the plugin. The keys of the object are the CSP directives, and the values are an array of strings for that directive.

Options

| Property | Type | Default | Description | | --- | --- | --- | --- | | policy | Record<string, string[]> | {} | The CSP directives to apply. |

License

MIT