API

This is the API documentation for this plugin. Here you will find all the options and their descriptions.

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.

override

• Type: boolean
• Default: false
• Description: This is a flag to override the default policy. When set to false, the plugin will merge the default policy (provided by the plugin) with your policy. When set to true, the plugin will only use your policy only.