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=%E2%9C%93&q=__webpack_nonce__&type=
Further readings:
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
nonceattributes. Style/Script tags with a whitelistednoncecan be specified in the CSP. If Styled-Components would set thisnonce, we could get rid of theunsafe-inlinesetting.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
nonceattribute of thestyletag.Unluckily, the
__webpack_nonce__is not well documented and kind of amyth. 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=%E2%9C%93&q=__webpack_nonce__&type=Further readings: