Using a nonce Content Security Policy header for style-src for inline style elements returns errors

Question

When using a nonce in a Content Security Policy header, both Google Chrome and Firefox return errors. The nonce value is for a style element i.e. <style id="some-id">// CSS </style>

For example Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' 'nonce-random-value'". Either the 'unsafe-inline' keyword, a hash ('sha256-specific-hash'), or a nonce ('nonce-...') is required to enable inline execution.

The nonce value is also present for scripts e.g. //Javascript which functions as intended.

The headers for these are;

"style-src 'self' https://fonts.googleapis.com 'nonce-".tu_custom_nonce_value () ."';".
"script-src 'self' https://maps.googleapis.com https://www.googletagmanager.com https://ajax.googleapis.com https://ajax.cloudflare.com https://static.cloudflareinsights.com https://cdnjs.cloudflare.com 'nonce-".tu_custom_nonce_value () ."';";

According to the documentation from Mozilla - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src, specifying a nonce for style-src is sufficient.

The only workaround currently is to specify a SHA256 hash for each element which is less than ideal since a change requires a manual step in the process each time WordPress is updated for example.

Any guidance or help would be appreciated.

Answer 1

It seems like you added the nonce to the script-src directive but not to the style-src directive. This might be the reason that why scripts are working but styles are not.

Possible solution:

"style-src 'self' https://fonts.googleapis.com 'nonce-".tu_custom_nonce_value () ."';".
"script-src 'self' https://maps.googleapis.com https://www.googletagmanager.com https://ajax.googleapis.com https://ajax.cloudflare.com https://static.cloudflareinsights.com https://cdnjs.cloudflare.com 'nonce-".tu_custom_nonce_value () ."';";