Add __webpack__nonce to style tags

I already had a brief talk with @mxstbr about this a couple of weeks ago: https://twitter.com/mxstbr/status/824626370760364032

When trying to enforce strict rules about which content is allowed on a specific page, a Content Security Policy (CSP) is the way to go.

Styled-Components currently put all of their Styles as an inline style to the DOM. Therefore, a CSP would need to contain: style-src unsafe-inline. As the name already puts: This is unsafe and not the recommended way of securing your app.

Luckily, there is the concept of nonce attributes. Style/Script tags with a whitelisted nonce can be specified in the CSP. If Styled-Components would set this nonce, we could get rid of the unsafe-inline setting.

Luckily, WebPack is already supporting the concept of a global __webpack_nonce__ variable. Once set, all dynamically injected code created by WebPack will have a nonce attribute with the correct value.

What needs Styled-Components to do?

If the webpack_nonce variable is set, pass the value to every generated style tag inside the nonce attribute of the style tag.

Unluckily, the __webpack_nonce__ is not well documented and kind of a myth. See Google https://www.google.at/search?q=webpack_nonce__&oq=webpack_nonce__&aqs=chrome..69i57.4663j0j7&sourceid=chrome&ie=UTF-8#q=__webpack_nonce__ and GitHub: https://github.com/webpack/webpack/search?utf8=✓&q=__webpack_nonce__&type=

Further readings:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
• https://developers.google.com/web/fundamentals/security/csp/
• https://csp.withgoogle.com/docs/index.html

[theKashey]

@wzijden - it all depends on your nonce settings. But it short - in a strict mode you have to provide nonce and SSR is often needed to do so. I mean - how without SSR you will generate and provide nonce? However styled-components themselves are not bound to SSR. It’s all about pure HTML.

And question - why one is actually need CSP for styles? CSP for scripts or frames is actually a really good idea, but styles? You Aren’t Gonna Need It.

[fdev]

To the next person trying to get this to work: the code suggested by @johannesnagl in https://github.com/styled-components/styled-components/issues/887#issuecomment-376479268 and @simonpkerr in https://github.com/styled-components/styled-components/issues/887#issuecomment-376858712 does work, but not in development.