CSP style-src hashes not compatible

[RobertoSannino]

Hi, For my React application i'm using a Content-Security-Policy as the following:

add_header Content-Security-Policy "
        default-src 'self';
        frame-src 'self' data:;
        script-src 'self'
        style-src 'self';
        img-src 'self' data:;
        font-src 'self';
        frame-ancestors 'self' data:;
        form-action 'self' data:;"
    ;

After adding react-diagrams:6.7.0 to my dependencies, Chrome started gives me errors regarding inline-scripts and inline-styles and I had to modify the policy to include some safe hashes coming from the vendors.chunk.js webpack build:

...
script-src 'self' 
   'sha256-si5LpzKSmbNg1ev0trMR3Yg8FErpcuTFUmqx23rNAI8='
style-src 'self' 
   'sha256-ZdHxw9eWtnxUb3mk6tBS+gIiVUPE3pGM470keHPDFlE='
   'sha256-NerDAUWfwD31YdZHveMrq0GLjsNFMwxLpZl0dPUeCcw='
   'sha256-zRov+xUGJ/uvnA8bUk72Bu/FQ7Uk11WaDIOM4b+hpX0='
...

This would be acceptable and CSP compliant but actually it does not work, in fact I still get errors for two styles with the following hashes (reported by Chrome): 'sha256-NerDAUWfwD31YdZHveMrq0GLjsNFMwxLpZl0dPUeCcw=' 'sha256-ZdHxw9eWtnxUb3mk6tBS+gIiVUPE3pGM470keHPDFlE='

The error still appear even if the hashes are marked as safe in the policy, searching a little bit i've found out that it could be because hashes do not apply to inline event handlers,

• Can you please provide a fix for this (identifying and refactoring those styles)?
• For the immediate, are there some workaround, maybe using webpack, other then using 'unsafe-hashes' in my policy?

Thanks in advance