Frontend teams struggle to nonce dynamically injected styles
Teams embedding JavaScript frameworks and editors under a restrictive Content Security Policy can find that dynamically injected styles are blocked because the framework or library does not expose a usable nonce setting. A generic hook may not work when code populates styles through other mechanisms, leaving developers to search for workarounds or consider weakening their policy. The reports here are from 2018–2020, so current demand and framework support need validation.
For frontend teams enforcing strict CSP. Mentioned from Sep 2018 to Jul 2020 on GitHub.
4 different people described this problem in 2 separate discussions.
- Indie fit
- 4.0/10
- Pain
- 6.0/10
- Frequency
- 5.8/10
- Willingness to pay
- 0.0/10
- Momentum
- 5.0/10
- Who pays
- Businesses
- Competition
- Medium
- Build difficulty
- Low
What people said
Quoted word for word. Follow a link to read the whole discussion.
I've been trying to fix this all day and much to my dismay it's not even possible by hooking createElement("style") to enforce a nonce, since monaco uses lots of innerHTML to set things up
Add a customizable nonce attribute to injected style elements - CSP I'm having the same issue and can't seem to find a workaround (eg. by using webpacknonce__`). This is the offending code in platform-browser.js:
Build brief
See what to build and who will buy it
- 2 product ideas with the smallest useful version and pricing
- 4 places to find your first customers
- 2 more quotes from people who have this problem
- Current workarounds, existing solutions and risks