Working on CSP headers, seeing console browser as Refused to execute inline script because it violates the following Content Security Policy directive

Question

#console browser issue for Content security Policy

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-9X08/o2ns8hEbTzT0V1Xyn6yYc8qftFOKmH3KNb8dWo='), or a nonce ('nonce-...') is required to enable inline execution.[enter image description here][1]

#Image of the error 

  [1]: https://i.stack.imgur.com/7R9sp.png

Code written for CSP

frame-ancestors 'self' https:
script-src 'self';
object-src 'none';
base-uri 'none';
style-src 'self' fonts.googleapis.com 'unsafe-inline';
media-src *;
img-src 'self';

Answer 1

It seems the error indicated there's issue with using inline-script. which looks like

    <script>
            your codes
    </script>

If you're going to use inline script, add 'unsafe-line' to script-src directive.

Current setting only allows scripts that's source of your domain.

ex) <script src="/yourDomain/public/yourScript.js">

Answer 2

Your script-src directive of 'self' only allows scripts to be loaded as script files from the same domain. Your page also has inline scripts that need to have permission in the CSP to run. You have a few choices:

1. Move the script code to a separate .js file hosted on the same domain. If you use a different host you'll need to allow that host in your script-src directive.
2. Add 'unsafe-inline'. This will allow ALL inline scripts, which will pretty much remove the XSS protection that CSP is able to give.
3. Add the suggested hash value 'sha256-9X08/o2ns8hEbTzT0V1Xyn6yYc8qftFOKmH3KNb8dWo=' to script-src allowing this one script. This is a good solution if there are only one or a few inline scripts to allow.
4. Add a nonce. Nonces should change on every pageload and are a good solution for dynamic scripts if you are able to inject nonces correctly.