This plugin will generate meta content for your Content Security Policy tag and input the correct data into your HTML template, generated by html-webpack-plugin.

All inline JS and CSS will be hashed, and inserted into the policy.

Install the plugin with npm:

npm i --save-dev csp-html-webpack-plugin 

In the plugins section of your webpack config file, include the following:

new HtmlWebpackPlugin() new CspHtmlWebpackPlugin() 

Finally, add the following tag to your HTML template where you would like to add the CSP policy:

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

This CspHtmlWebpackPlugin accepts 2 params with the following structure:

• {object} Policy (optional) - a flat object which defines your CSP policy. Valid keys and values can be found on the MDN CSP page. Values can either be a string or an array of strings.
• {object} Additional Options (optional) - a flat object with the optional configuration options:
  • {string} hashingMethod - accepts 'sha256', 'sha384', 'sha512' - your node version must also accept this hashing method.
  • {boolean|Function} enabled - if false, or the function returns false, the empty CSP tag will be stripped from the html output. The htmlPluginData is passed into the function as it's first param.

{ 'base-uri': "'self'", 'object-src': "'none'", 'script-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"], 'style-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"] }; 

{ hashingMethod: 'sha256', enabled: true } 

new CspHtmlWebpackPlugin({ 'base-uri': "'self'", 'object-src': "'none'", 'script-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"], 'style-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"] }, { hashingMethod: 'sha256', enabled: true }) 

Contributions are most welcome! Please see the included contributing file for more information.

This project is licensed under MIT. Please see the included license file for more information.