Skip to content

Latest commit

 

History

History
117 lines (88 loc) · 3.29 KB

README.md

File metadata and controls

117 lines (88 loc) · 3.29 KB

Vite Plugin CSP

Vite Plugin for adding a Content Security Policy to your Vite SPA application.

Library Version
vite-plugin-bun-csp NPM Version
vite-plugin-node-csp NPM Version

Features

  • ✨ Automatically calculates Subresource Integrity (SRI) hashes of JavaScript and CSS assets and adds them to the CSP.
  • 📚 Automatically detects and handles Google Fonts.
  • ⚡ Supports both Node.js and Bun runtimes.
  • 🏎 Fast and lightweight. Bun plugin has 0 dependencies. Node plugin has a single dependency.

Installation

❗ Install the correct plugin for the runtime you are using!

# Bun Plugin
npm i -D vite-plugin-bun-csp

# Node Plugin
npm i -D vite-plugin-node-csp

Basic Usage

Add the meta CSP tag to the <head> of your index.html file:

<head>
  <meta http-equiv="Content-Security-Policy" content="" />
</head>

Let the plugin analyze the index.html file and automatically configure the CSP. The CSP will be injected into the meta tag.

// vite.config.ts
import { defineConfig } from "vite";

// Bun
import { generateCspPlugin } from "vite-plugin-bun-csp";

// Node
import { generateCspPlugin } from "vite-plugin-node-csp";

export default defineConfig({
  root: "src",
  build: {
    outDir: "build",
  },
  plugins: [generateCspPlugin()],
});

Advanced Usage

You can also manually configure the CSP. Even when manually setting the CSP, the plugin will still analyze the HTML, generate the integrity hashes and automatically add them to the policy.

// vite.config.ts
import { defineConfig } from "vite";
import { DEFAULT_CSP_POLICY, generateCspPlugin } from "vite-plugin-bun-csp";

export default defineConfig({
  root: "src",
  build: {
    outDir: "build",
  },
  plugins: [
    generateCspPlugin({
      algorithm: "sha256",
      policy: {
        ...DEFAULT_CSP_POLICY,
        "style-src": ["'self'", "'unsafe-inline'"],
        "img-src": ["'self'", "data:"],
        "upgrade-insecure-requests": [],
      },
    }),
  ],
});

Library / Framework Specific Guidance

Emotion CSS

If you are using the Emotion CSS library, which MUI uses by default, then you can add the SHA-256 hash of an empty string 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' to your CSP rather than setting 'unsafe-inline' in your style-src directive.

generateCspPlugin({
  policy: {
    "style-src": ["'self'", "'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='"],
  },
}),

Source: emotion-js/emotion#2996 (comment)

Links

License

MIT