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


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';".
"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 seems to be 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.

Ryan 2 years 2020-10-21T23:10:22-05:00 0 Answers 8 views 0

Leave an answer