Search code examples
google-chromehttpcontent-security-policy

CSP header fails with "Refused to apply inline style..." but I have already added the hash


Getting

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'sha256-UTjtaAWWTyzFjRKbltk24jHijlTbP20C1GUYaWPqg7E=' 'sha256-lAjyGSIzNSfpcl56itQltlKnBClAWcbXqXwsWgwPBDM=' 'sha256-IQ1w928Id2I18HopWjf2QH1yWRabHjMmdIigddkJsjk=' 'sha256-gx2qS9lINA9HjEhSBFaGgUjlVL1GCqJxyGoHpGODeo8=' 'sha256-nFZFLbV913URty3kcgmuV3NUKJUM9TYhEZ+OkHy6DxU=' 'sha256-xfnLUXCYTisGE0l0rOaR+OgO5EG+uV25p4QNcjB5dWg=' 'sha256-TUXjxBhzs16+YXaJCnt/+EyyEldkUoAz/SvQCm05hFw=' blob:". Either the 'unsafe-inline' keyword, a hash ('sha256-gx2qS9lINA9HjEhSBFaGgUjlVL1GCqJxyGoHpGODeo8='), or a nonce ('nonce-...') is required to enable inline execution.

Note however, that the hash it wants me to add, is already present.

Using the latest Chrome.

What is the problem with my CSP header?


Solution

  • You was catched by a tricky way. There is 2 kinds of inline styles:

    1. < style>...< /style> - supports 'hash-value' token
    2. < tag style='...'> - does not support 'hash-value' token

    But Chrome counts sha256 values for both of those, because it prepares to support 'unsafe-hashes' token (but not implemented it yet is is implemented, sorry). Chrome's console messages have not differences between both of above styles, all considered as inline.

    So you have somewhere in HTML-code an inline style in the tag (para 2). Chrome counted sha256 hash for it and fired a warn in the console. You add this hash to the CSP but still have a warning, because style in the tag have blocked - it could not be allowed via 'hash-value'.