Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrtc0/csp-html-webpack-plugin
https://github.com/mrtc0/csp-html-webpack-plugin
content-security-policy csp webpack-plugin
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mrtc0/csp-html-webpack-plugin
- Owner: mrtc0
- License: apache-2.0
- Created: 2023-07-14T05:34:41.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-05T04:09:50.000Z (6 months ago)
- Last Synced: 2024-09-20T01:05:47.578Z (4 months ago)
- Topics: content-security-policy, csp, webpack-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@mrtc0/csp-html-webpack-plugin
- Size: 465 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSP HTML Webpack Plugin
## About
`@mrtc0/csp-html-webpack-plugin` is a webpack plugin that helps to automatically add CSP(Level 3) to `meta` tags in projects like Single Page Application.
This project is inspired by [strict-csp-html-webpack-plugin](https://github.com/google/strict-csp/tree/main/strict-csp-html-webpack-plugin) and allows for more flexible CSP directives.
## Installation
with npm:
```shell
npm i --save-dev @mrtc0/csp-html-webpack-plugin
```
## Basic Usage
In your webpack config file:
```js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CspHtmlWebpackPlugin } = require("@mrtc0/csp-html-webpack-plugin");
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin(),
new CspHtmlWebpackPlugin(HtmlWebpackPlugin),
],
};
```
Will generate the following HTML:
```html
var scripts = ["/static/js/index.js"];
scripts.forEach(function (scriptUrl) {
var s = document.createElement("script");
s.src = scriptUrl;
s.async = false;
document.body.appendChild(s);
});
```
### How does this plugin work?
This plugin is referencing the [strict-csp](https://github.com/google/strict-csp/tree/main/strict-csp) library as a source of inspiration.
> 1. It replaces sourced scripts with an inline script that dynamically loads all sourced scripts. It calculates the hash of this script.
> 2. It calculates the hash of other inline scripts.
> 3. It creates a strict hash-based CSP, that includes the hashes calculated in (1) and (2).
## Configuration
By default, `@mrtc0/csp-html-webpack-plugin` applies Strict-CSP as follows:
```
base-uri 'self'; object-src 'none'; script-src 'strict-dynamic' 'sha256-...';
```
By specifying directives, you can modify the default directives. The `script-src` directive is automatically generated.
```js
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin(),
new CspHtmlWebpackPlugin(HtmlWebpackPlugin, {
"base-uri": [`'self'`],
"object-src": [`'none'`],
// Add img-src directive
"img-src": [`'self'`, `https://example.com`],
// script-src will auto generate
}),
],
};
```
If you need to provide fallbacks for older browsers that do not support CSP Level 3, you can specify the `script-src` directive.
```js
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin(),
new CspHtmlWebpackPlugin(HtmlWebpackPlugin, {
"base-uri": [`'self'`],
"object-src": [`'none'`],
// If CSP Level 3 is not supported, then fallback.
// Will be generated: "script-src 'strict-dynamic' sha256-... 'unsafe-inline' 'unsafe-eval' http: https:;"
script-src": [`'unsafe-inline'`, `'unsafe-eval'`, 'http:', 'https:']
}),
],
};
```