adding nonce to script tag for 3rd party code that breaks ‘unsafe-eval’

We are using netlify-cms that unfortunately emits code that break CONTENT-SECURITY-POLICY 'unsafe-eval'.

I have tried adding nonce attributes to all the script tags using nginx sub_filter:

server {
  listen       80;
  set_secure_random_alphanum $cspNonce 32;
  sub_filter_once off;
  sub_filter_types *;
  sub_filter *CSP_NONCE* $cspNonce;
  sub_filter '<script' '<script nonce='$cspNonce' ';
  sub_filter '<link' '<link nonce="$cspNonce" ';

I then add the nonce to the header also

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'nonce-$cspNonce' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' petstore.swagger.io;connect-src 'self' petstore.swagger.io";

I can see that the nonces in the script tags and the header all match:

<script nonce='72UTQMpuXxfwcevvTydWt8XvOSzKhhjM' >

header

Content-Security-Policy default-src 'self'; script-src 'self' 'nonce-77Fdz6e1aBiGr5b8qcReeUgkO2NtJnSm'

But I still get the error message:

EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ ‘nonce-77Fdz6e1aBiGr5b8qcReeUgkO2NtJnSm’

Answer

By using 'nonce-value' you can get rid of 'unsafe-inline' only, but not of 'unsafe-eval'.

'unsafe-eval' in Netlify is required to compile JSON to JS code, but you can get rid of 'unsafe-eval' too. Just update ajv-json-loader to use AJV 7 and Standalone mode and configure webpack config to use the updated loader. See nitty-gritty here.