Content-Security-Policy HTTP header not working properly for script-src

Question

I am following Google's strict CSP policy for my CSP header, and I am properly adding the nonce, however I keep getting this error in the browser for my scripts:

Refused to load the script 'http://localhost:8080/client/dist/inline.6e0c61259742e86be1dd.bundle.js' because it violates the following Content Security Policy directive: "script-src nonce-XVlBzgbaiCMRAjWwhTHctcuAxhxKQFDaFpLSjFbcXoEFfRsWxP 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http:". 'strict-dynamic' is present, so host-based whitelisting is disabled.

As you can see, the nonce matches the nonce in the script:

<script type="text/javascript" src="/client/dist/inline.6e0c61259742e86be1dd.bundle.js" nonce="XVlBzgbaiCMRAjWwhTHctcuAxhxKQFDaFpLSjFbcXoEFfRsWxP"></script>

This is the CSP header I'm using for script-src. The "%s" represents the random generated nonce which will be interpolated before the header is set on the response:

script-src nonce-%s 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http:;

What am I doing wrong here?

Answer 1

It looks like you're not enclosing the nonce value in single quotes -- instead of nonce-%s it should be 'nonce-%s' in your policy.

Since you're using the Google example you probably know about the other directives necessary to make the policy safe (e.g. object-src and base-uri), but just in case, make sure to use a tool like the CSP Evaluator to sanity-check your policy when you're done.