However, it's not always fun to set up. If you're using something like Gridsome on Netlify, you will come across two key issues that you can't solve just by adding a Content-Security-Policy key to the headers in your netlify.toml.
Gridsome (and Gatsby) inline the initial state, which is a big <script></script> block.
Vue uses inline styles for v-show, like style="display:none;"
Both of these things are blocked by CSP rules, which is good because you don't want random scripts being added into your website or your styles being messed up (someone styling another link as a 'pay now' button for example).
To fix this, you need to generate a cryptographic hash of the inline script, so the browser knows this is okay and hasn't been tampered with. If you search online, you might find some bad advice, like using unsafe-inline. (Bad! Bad! saith the buyer...)
If you're using Netlify, you can use this amazing package I made earlier to generate sha256 hashes of inline scripts and styles for your Content-Security-Policy headers. Head over to the Github repo, and try it out on your Netlify project.
When running things like Gatsby or Gridsome, the initial state is stored inside a <script> 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…
