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' 'nonce-".tu_custom_nonce_value () ."';".
"script-src 'self' 'nonce-".tu_custom_nonce_value () ."';";
According to the documentation from Mozilla - , 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.
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 'nonce-".tu_custom_nonce_value () ."';".
"script-src 'self' https://maps.googleapis https://www.googletagmanager https://ajax.googleapis https://ajax.cloudflare https://static.cloudflareinsights https://cdnjs.cloudflare 'nonce-".tu_custom_nonce_value () ."';";
According to the documentation from Mozilla - https://developer.mozilla/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.
Share Improve this question edited Oct 24, 2020 at 16:48 Ryan asked Oct 22, 2020 at 3:12 RyanRyan 931 silver badge8 bronze badges1 Answer
Reset to default 0It 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 'nonce-".tu_custom_nonce_value () ."';".
"script-src 'self' https://maps.googleapis https://www.googletagmanager https://ajax.googleapis https://ajax.cloudflare https://static.cloudflareinsights https://cdnjs.cloudflare 'nonce-".tu_custom_nonce_value () ."';";