API

API

This is the API documentation for this plugin.

⚠️

All of this is subject to change as the plugin is still pre v1.0

Example

 
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import csp from "vite-plugin-csp-guard";
 
export default defineConfig({
  plugins: [
    react(),
    csp({
      algorithm: "sha256", // Hash algorithm
      dev: {
        run: true, // Run in development mode
      },
      policy: {
        "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"],
      },
    }),
  ],
});

Options

algorithm

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

dev

  • Type: object
  • Default: {run: false, outlierSupport: []}
  • Description: The options for the dev server.

dev properties

policy

  • Type: object
  • Default: {}
  • Description: The CSP policy to use. This is an object where the key is the CSP directive and the value is an array of strings that are allowed.

policy properties

The key is the CSP directive and the value is an array of strings that are allowed. All official CSP directives (opens in a new tab) should be supported. If you find one that is not, please open an issue on the repo. You can read our guide for creating a policy here

{
    "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

  • Type: object
  • Default: {hash: true}
  • Description: Options that apply only when running vite build.
Creating your Policy