Client-side nonce support

I am trying to craft an intelligent Content-Security-Policy while using styled-component. The suggested solution to this seems to be to use SSR to set the webpack_nonce variable, ensuring that webpack inlines in in all created style-tags. However, I cant find a solution to this problem when you are not using SSR.

Without knowing the internals of styled-components, it seems to me that it should be possible to specify a nonce in a non-ssr environemt. Something like:

import { setNonce } from "styled-components"
setNonce(myNonce)

This would allow users to craft their own solutions that is independent from both SSR and webpack. In my use case it would be trivial to inject a unique nonce with every page request, even though SSR is not feasible.

[ghost]

Disclaimer: I may not be 100% aware of all the Content-Security-Policy directives implications.

From what I understand of the notion of the nonce attribute, it only makes sense if it is used once (e.g. generated per request, using server-side rendering)

If it is statically defined at build-time and served with the same value on every request, there is nothing preventing a malicious person to add that attribute since that person would easily be able to know it (unless I completely misunderstand its purpose)?

However, to have styled-components working on a locked down CSP, on a client-side only environment, it may be possible to use the hash policy, which works in a very similar way, with the same goal: whitelist some part of the inline scripts/styles served with your HTML page, but instead of being attributed a one-shot token by the server, it consists in a hash of that <style> content itself.

I think the scenario would look like (at build time):

• for each style
  • create a sha-* hash of the content and keep it somewhere in memory
• expand all created hashes as part of the style-src directive of the CSP

Does styled-components currently provide a way to get those hashes at build time?

More informations about nonce and hash: https://developers.google.com/web/fundamentals/security/csp/#if_you_absolutely_must_use_it

[mxstbr]

I think you should be able to set window.__webpack_nonce__ on the client-side and we will pick it up, maybe? If we don’t, we definitely should! /cc @kitten let’s build that into #2357 maybe?