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

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