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.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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 () ."';";
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0