This policy contains 'unsafe-inline' which is dangerous in the script-src directive

Question

Our Vue js website contains dynamic url of css and src by different environment. Each environment have different domains. So the Content-Security-Policy contains script-src 'self' 'unsafe-inline' and style-src 'self' 'unsafe-inline'

But it gives a warning "This policy contains 'unsafe-inline' which is dangerous in the script-src directive. This policy contains 'unsafe-inline' which is dangerous in the style-src directive."

How can we handle dynamic urls for sript-src and style-src?

Thanks in advance.

Answer 1

I have the same problem, too. Hope that my solution will help.

First, remove 'unsafe-inline' and run your applications
You may get some errors from console on the web.
For example:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='". Either the 'unsafe-inline' keyword, a hash ('sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='), or a nonce ('nonce-...') is required to enable inline execution.

Second, copy the text 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' and put in Content-Security-Policy after script-src or style-src
For example:

default-src 'none'; font-src 'self' data:; img-src 'self'; script-src 'self' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='; style-src 'self' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='; object-src 'self'; connect-src 'self'

And this may solve your problem.

By the way, you may encounter the problem like this :
Sha hash not respected in CSP style-src

You can add 'unsafe-hashes' after script-src or style-src to solve it.