caddy-csp-webpack-plugindeprecated

Hash your assets and create a Caddy server Content Security Policy header directive for every build

Usage no npm install needed!

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

README

Caddy CSP Webpack Plugin

Generate Caddy server header directives along with your bundle for an always-fresh Content Security Policy using your assets' latest hashes 🔒

 

Caddy CSP Webpack Plugin

 

Usage

Require the plugin...

const caddyCSPPlugin = require('caddy-csp-webpack-plugin');

...and include the plugin in your webpack configuration.


plugins: [
  new caddyCSPPlugin(),
],

Options

Below are available configuration options, and their default settings.


  {
    filename: `csp-headers.caddy`, // generated file name relative to your output path
    headerPath: `/`, // path at which to apply the CSP header(s)
    policies: [], // Array of additional security policies as strings See example below
    ignore: [], // Array of glob strings or regular expressions to exclude
    include_paths: [], // Include other files not in your bundle
    minify_include_paths: false, // Minify code before hashing included files (Terser default settings)
    ie_header: false, // include an additional 'x-content-security-policy' for use with Internet Exploder
    hashFunction: `sha256`, // Hash function used for hashing out content hashes
  }

Example Config

A typical configuration might look like so:


  new CaddyCSPPlugin({
    include_paths: [
      `${process.cwd()}/service-worker/minion.js`,
      `${process.cwd()}/static/some-structure-metadata.js`,
    ],
    headerPath: `/index.html`,
    minify_include_paths: true,
    ie_header: true,
    hashFunction: `sha256`,
    ignore: ['some/**/glob-pattern.js', /regex-pattern\.m?js$/],
    policies: [
      `default-src 'none'`,
      `base-uri 'self'`,
      `frame-ancestors 'none'`,
      `child-src 'self'`,
      `img-src 'self' data: blob:`,
      `style-src 'self' 'unsafe-inline'`,
      `frame-src 'self'`,
      `worker-src 'self' blob:`,
      `connect-src 'self' https://*.some-analytics.lol`,
      `object-src 'none'`,
      `form-action 'self'`,
      `media-src 'self'`,
      `manifest-src 'self'`,
      `font-src 'self'`,
      `script-src 'self' https://cdn.some-cdn.omg`,
      `report-uri /csp/_report_violation`,
    ],
  }),

NOTE: Any script-src policy will be identified and have the hashes appended to it.

Result

When the build is complete, the generated file is emitted with the rest of your bundle. The /csp-headers.caddy file generated in the example above looks like so:

Caddy Header Directives

Use an import directive in your Caddyfile, for example, and Caddy serve up your hot new security policy to anyone who comes knocking 😎

Caveats

CSS Files

At the moment, this plugin only hashes JavaScript assets.

Server restart

After uploading your generated header to your server, you'll need to restart your Caddy instance for any changes to take effect.