Generate CSP headers from inline script hashes
npm install netlify-plugin-csp-generator


> Generate Content-Security-Policy headers from inline script and style hashes
When running things like Gatsby or Gridsome, the initial state is stored inside a tag.
Modern browser content security policies don't like inline scripts or styles, so to get around it you need to add either a cryptographic nonce or a cryptographic hash of each script.
A nonce is out of the question, because you can't update it for each load.
This package generates a crypographic hash (SHA-256) of all inline scripts and styles in each HTML file, and adds it to the _headers file along with other policies of your choice.
> Note
> Netlify lets you add a Content-Security-Policy header in your netlify.toml. This will overwrite values inside _headers, so don't do that.
If you have an existing _headers file, this will append to the existing file. Just make sure the file ends on a newline, and it should work fine.
Install netlify-plugin-csp-generator with your favourite package manager:
`` bash
yarn add netlify-plugin-csp-generator
npm install netlify-plugin-csp-generator
`
In your netlify.toml file, add an additional plugin:
` toml
[[plugins]]
package = "netlify-plugin-csp-generator"
[plugins.inputs]
buildDir = "dist"
[plugins.inputs.policies]
defaultSrc = "'self'"
`
- buildDir is the path for the publish directory in Netlify:exclude
!buildDir example
- is an array of paths you don't want to include. It defaults to an empty array. See Excluding files and folders for more information.disablePolicies
- is an array of policies to never include. Files that need these rules will probably be taken from defaultSrc instead by your browser.disableGeneratedPolicies
- is an array of policies never to generate. Use this to turn off default policies but still allow the key in netlify.toml.reportOnly
- generates headers with Content-Security-Policy-Report-Only instead, which is useful for testing. reportURI
- /reportTo sends violations to a given endpoint. See Reporting violations for more information.generateForAllFiles
- lets you generate headers for non-HTML files. See Non-index.html files for more information.debug
- is a boolean that logs the file paths if set to true. Use this if you are struggling to match paths in your app.
You can use the following policies:
- childSrc
- defaultSrc
- connectSrc
- fontSrc
- frameSrc
- imgSrc
- manifestSrc
- mediaSrc
- objectSrc
- prefetchSrc
- scriptSrc
- scriptSrcElem
- scriptSrcAttr
- styleSrc
- styleSrcElem
- styleSrcAttr
- workerSrc
- baseUri
- formAction
- frameAncestors
Add them under the [plugins.inputs.policies] object in your netlify.toml file, with your specified value in quotes.
You can use CSP headers not in this list too - simply use the name in camel case and it will be added.
When using Vue and derivatives (like Gridsome), you may want to use v-show on things. This adds an inline style of display: none;, which is forbidden by CSP Level 3. To prevent this throwing an error, you need to add 'unsafe-hashes' to your styleSrc policy. The sha-256 hash is generated automatically.
` toml
[[plugins]]
package = "netlify-plugin-csp-generator"
[plugins.inputs]
buildDir = "dist"
[plugins.inputs.policies]
defaultSrc = "'self'"
styleSrc = "'unsafe-hashes'"
`
If you have defined a policy in your netlify.toml file, this will be added to all files.
` toml`
[plugins.inputs.policies]
defaultSrc = "'self'"
scriptSrc = "'self' https://www.google-analytics.com https://ssl.google-analytics.com https://www.googletagmanager.com"
` txt`
/each-file-path/
Content-Security-Policy: default-src 'self'; script-src 'self' *.google-analytics.com;
If a file includes a