search

ValentinH / react-easy-crop

A React component to crop images/videos with easy interactions
https://valentinh.github.io/react-easy-crop/
MIT License
2.32k stars 166 forks source link

Inline style and CSP policy #139

Closed sasha-3ap closed 4 years ago

sasha-3ap commented 4 years ago

When CSP security policy with directive style-src is set, unless 'unsafe-inline' value is used, react-easy-crop inline style are ignored which results in incorrect react-easy-crop render. As setting 'unsafe-inline' defeats purpose of CSP, react-easy-crop should provide solution without inline styles. Please check 'Disable inline style' from more information and possible solution.

If I solve this I will create PR.

ValentinH commented 4 years ago

You are already able to request the CSS explicitly: see https://github.com/ricardo-ch/react-easy-crop/blob/master/README.md#styles.

Does it cover your use case?

sasha-3ap commented 4 years ago

Seems it does not. Even if we use disableAutomaticStylesInjection and css it is still added as inline style. In render we have inline style here, here and here.

In Material UI CSP with nonce is supported for inline styles by reading nonce from meta tag. Similar solution could be used in react-easy-crop, add nonce from meta tag. Or add style through javascript. Or ...

ValentinH commented 4 years ago

I understand for the inline styles in render. However, the styles injected in the head are not if you set disableAutomaticStylesInjection to true.

Just to understand, is this issue a regression of version 3.0?

sasha-3ap commented 4 years ago

I tried adding disableAutomaticStylesInjection to Cropper and import css in component that used it. Is this a proper way? I would still get error: image

Version is latest. Not sure if this can be considered as regression.

We generate nonce on every new application request but we also insert nonce in meta tag (as required by MUI) so it can be used in inline styles.

ValentinH commented 4 years ago

What's the injectStylesIntoStyleTag function?

sasha-3ap commented 4 years ago

It is from style loader used by webpack, injectStylesIntoStyleTag. It goes over styles and if configured adds nonce as well.

ValentinH commented 4 years ago

So isn't the error due to a misconfiguration in webpack? Could you please try version 2.X?

sasha-3ap commented 4 years ago

There is no misconfiguration in webpack, however I found that webpack did not use __webpack_nonce__ to set nonce for inline styles. I opened bug for it but due the difficult setup to show the bug I am not sure it will get proper attention. In the meantime, since Material UI is already used I explored how it uses nonce from meta tag and applied similar principal to this case.

Since MUI used JSS solution was to introduces css required by react-easy-crop using @global keyword.