Are we forced to use 'unsafe-inline' in our CSP when using Vue.JS?

Question

Is there a way to make Vue.js to work with CSP properly?

When I run my spa application (resulting from npm run generate with Nuxt.js), I will get several warnings such as these:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'strict-dynamic' 'nonce-124lk5fjOc4jn7qqLYEsG2jEvxYuqu8J' 'unsafe-inline' https:". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

Knowing CSP, there are two correct ways of fixing this:

1. Using nonces, where Vue.js would have to sign all the generated scripts and styles with a nonce attribute. But I don't think this would solve anything, since it appears some CSS is added inline.

2. Using hashes, which is actually the preferred way of doing it, since the hash secures exactly what we want the client to execute on the browser.

However, in order to use hashes, Vue.js/Webpack must be able to calculate the hash for all its scripts and styles, and:

• for each compilation, tell them to the developer that will then add these hashes to a NGINX configuration file,

or,

• be able to generate meta tags containing the hashes, making this process 100% transparent to the developer, who doesn't need to configure anything else to guarantee a good CSP protection.

Does Vue.js support this in any way? Is there anyone in the world who was able to make CSP working with Vue.js without any 'unsafe-inline'?

Answer 1

According to the Vue.js docs, the runtime build is fully CSP-compliant.

Nuxt is supporting a csp config to create hashes via webpack sent as header on dynamic SSR mode and meta elements otherwise (see https://github.com/nuxt/nuxt.js/pull/5354)

Answer 2

you could use the --no-unsafe-inline option in your npm run build script

https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build

Answer 3

Not sure if this is better as a comment or not but it kinda works so putting it here for now.

Our deployment strategy might be a bit different, but essentially we trigger a lambda to update the cloudfront csp with our CI/CD.

We noted that the inline scripting was static despite different app versions/bumps. Our current workaround is:

1. Deploy on a dev server - get the sha256 hash from the chrome dev tools (you could probably calculate it yourself to avoid deploying)
2. Updated our terraform cloudfront lambda CSP with the hash
3. On the new deploy the hash matches and we don't need unsafe-inline

Some big limitations re: if nuxt changes the inline script on new versions we'll have to manually update our hash in the CSP. Also, depending on your styling framework there may be a number of inline-styles which aren't captured here.