Material-ui: Content Security Policy support clarification

[lwilkins]

According to the documentation, to support the CSP header, a nonce needs to be added to the style-src directive (https://material-ui.com/styles/advanced/#content-security-policy-csp). However, a number of Material-UI components make use of inline style attributes (e.g. Tabs - https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tabs/Tabs.js#L433). These require the 'unsafe-inline' source (or a hash for each style although this isn't practical). The 'unsafe-inline' source is ignored if a hash or nonce source is set, thus necessitating the removal of the nonce.

So generally for Material-UI as I see it, I think one of two things are needed:

1. Update the CSP documentation for a setup to allow inline style attribute setting (not a great CSP, but would make Material-UIs stance clear on styling then).
2. Set a standard of no inline style attribute setting and we fix them all as bugs.

What do you think? I did an issue search and found this (https://github.com/mui-org/material-ui/issues/13364) suggesting that Material-UI as a whole allows inline style attributes and thus are happy with necessitating a non strict CSP setting. Is this still the case and we're happy with what this means for CSP?

[eps1lon]

Generally I think we shouldn't use inline styles to begin with since they make customizing harder. So ideally we wouldn't use inline styles at all.

In the meantime we should add this notice to the docs.

[oliviertassinari]

This concern seems important for the use of the components in high demanding environments, e.g; #13364 coming from SnapChat Inc.? However, from our issue history, most developers seem to loosen the CSP for it.

We do have a couple of components that rely on inline style:

• SpeedDial
• Skeleton
• AvatarGroup
• Autocomplete
• TextareaAutosize
• Tabs
• SwipeableDrawer
• Slider
• Modal
• LinearProgress
• CircularProgress
• GridList
• Collapse
• Fade
• Grow
• Zoom
• CardMedia
• ButtonBase

Wow, ok, actually, it's much more than I thought.

I think that it would be interesting to explore:

• What's the alternative? (cost)
• How much better is it without inline-style? Who actually needs it? How does it play with CSS-in-JS libs? (value)

[lwilkins]

Thanks for the input @eps1lon and @oliviertassinari . I'll loosen the CSP in my application for now, but exploring the removal of all inline style attributes would be great and would be something I'd support.

[razor-x]

Just coming here as I was surprised to find out I still had CSP errors after following the docs: https://material-ui.com/styles/advanced/#content-security-policy-csp

It looks like the docs were never updated as suggested, so I opened a PR. Hopefully someone has an updated list of the "non-csp" components.

https://github.com/mui-org/material-ui/pull/21479/files

[oliviertassinari]

https://developers.google.com/web/fundamentals/security/csp/#inline_code_is_considered_harmful makes a case in favor of removing all inline style.