https://github.com/sjinks/hwp-csp-plugin

Content Security Policy plugin for html-webpack-plugin
https://github.com/sjinks/hwp-csp-plugin

content-security-policy csp html-webpack-plugin html-webpack-plugin-plugin security

Last synced: about 1 month ago
JSON representation

Content Security Policy plugin for html-webpack-plugin

• Host: GitHub
• URL: https://github.com/sjinks/hwp-csp-plugin
• Owner: sjinks
• License: mit
• Created: 2020-06-04T22:06:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-29T22:02:34.000Z (about 2 months ago)
• Last Synced: 2024-10-30T00:38:29.543Z (about 2 months ago)
• Topics: content-security-policy, csp, html-webpack-plugin, html-webpack-plugin-plugin, security
• Language: TypeScript
• Homepage:
• Size: 2.68 MB
• Stars: 2
• Watchers: 4
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# hwp-csp-plugin

![Build & Test CI](https://github.com/sjinks/hwp-csp-plugin/workflows/Build%20&%20Test%20CI/badge.svg)

Plugin to add Content-Security-Policy to HTML files generated by [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)

It was heavily inspired by [csp-html-webpack-plugin](https://github.com/slackhq/csp-html-webpack-plugin/), but it operates a bit differently.

## Installation

```shell

npm i -D hwp-csp-plugin

```

## Usage

```js

import { HwpCspPlugin } from 'hwp-csp-plugin';

// Webpack configuration object

export default {

    plugins: [

        new HtmlWebpackPlugin({ /* ... */ }),

        new HwpCspPlugin(/* options */),

    ],

};

```

To configure the plugin, pass an object with the following keys to its constructor (all keys are optional):

  * `enabled` (`boolean`, defaults to `true`): whether to enable the plugin;

  * `policy` (`Record): [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy); keys are ``, values are ``. Values can be a string (`"'self' https:"`) or arrays (`["'self'", 'https:']`)

  * `hashFunc` (one of `sha256`, `sha384` (default), `sha512`): hash function to [generate hashes of inline scripts / styles](https://content-security-policy.com/hash/);

  * `hashEnabled`: can be either `boolean` or an object with the following properties:

    * `script` (`boolean`, defaults to `true`): whether to generate hashes of inline scripts;

    * `style` (`boolean`, defaults to `true`): whether to generate hashes of inline styles;

  * `addIntegrity` (`boolean`, defaults to `false`): whether to add `integrity` attribute to inline scripts and styles (controlled by `hashEnabled` option).

## Differences to csp-html-webpack-plugin

1. HwpCspPlugin intentionally does not support [nonces](https://content-security-policy.com/nonce/). Nonces, by definition, must be used only once and be unique for every request.

2. HwpCspPlugin does not support `html-webpack-plugin` < 4.x

3. HwpCspPlugin does not enforce a default content security policy.

4. HwpCspPlugin uses a subjectively simpler approach to configuration and lets you shoot yourself in the foot.

5. HwpCspPlugin is written in TypeScript (not that it is a killer feature, but it hopefully simplifies maintenance)

## Things to Do

  - [ ] Currently the plugin removes existing `` metatags. However, it [could be possible](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#Multiple_content_security_policies) to have multiple CSPs. This needs to be investigated, and if so, then this behavior should be configurable;

  - [ ] Add callbacks allowing the user to modify the CSP before it is written to the file;

  - [ ] Consider `unsafe-hashes` and `script-src-attr` / `style-src-attr`.