最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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 badges
Add a comment  | 

1 Answer 1

Reset to default 0

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 '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 () ."';";
发布评论

评论列表(0)

  1. 暂无评论