Inline Styles with Strict Content Security Policy

[neilchaudhuri]

Problem or feature description:

This is just a heads-up that because the current implementation uses inline styles it violates a strict Content Security Policy (CSP) one might use to prevent XSS attacks. Some might be OK relaxing the CSP by using unsafe-inline, but that basically defeats the purpose.

All is not lost though since you can use mechanisms like a Webpack nonce. Here is an example of the way styled-components uses it.

I suggest that the documentation notes that this could be an issue for some and suggests ways to address it like incorporating a Webpack nonce (for those who use Webpack) with react-compound-slider.

Steps to reproduce (for problems):

Versions (for problems):

React-Compound-Slider: 0.15.0

React: 16.4.10

Browser: N/A

Operating System: N/A

[sghall]

This is pretty interesting. I had not heard about this concern with CSS-In-JS before. I think this library is fine though because you can also just pass a className prop to style the root of the slider. Right? All the other elements are rendered by the user so they can all use class names on the individual elements. Or am I missing something?

[neilchaudhuri]

If you use only class names, that's fine. The problem comes with inline style attributes and style elements, and I don't think I've seen an example that doesn't have an inline style recalculated on an event. If things can work without them, then that's cool. And if someone needs inline styles, they can relax the CSP or use some kind of nonce-based mechanism to clarify the origin of the inline style.

[sghall]

Thanks again for raising awareness on this. For RCS there's only one div in the whole library (the slider div) and it can be styled using class names or inline styles. Should not be a concern.