vite-plugin-csp

Create CSP meta tags and header configs from all sources in the final Vite html

Usage no npm install needed!

<script type="module">
  import vitePluginCsp from 'https://cdn.skypack.dev/vite-plugin-csp';
</script>

README

CSP (Content-Security-Policy) Vite Plugin

version NPM Codecov Libraries.io dependency status for latest release Rate on Openbase Test Release

Leverages csp-typed-directives to create typed CSP <meta> policies and validated interdependant headers. e.g. the CSP, CSP Report-Only, Report-To, and Referrer-Policy headers.

Mostly config compatible with csp-html-webpack-plugin

WARNING, STILL EARLY AND THINGS LIKE MODULE RESOLUTION ARE FINICKY

Now looking at making a multi-repo because this is going to require multiple layers of shared functionality and also built to an unplugin

Installation

Install the plugin with npm:

$ npm install --save-dev vite-plugin-csp
# Or shorthand
npm i -D vite-plugin-csp

Known issues

  • Relative modules are resolved relative to the CWD, not the file
  • no SSR support (and thus no nonce support)
  • No parsing of JS embeded sources (since that would require framework specific plugins)
  • Only script and style related directives are supported (except for the inclusion of report-to for generating headers)

Under construction :)