This is an excerpt from README in my private repository.
Since it may help those who are struggling to get rid of CSP errors for data-emotion
, here you go:
Although csp-html-webpack-plugin
automatically inserts CSP (Content Security Policy) meta tags in your generated HTML page, you will see CSP warns against the rules.
While it inserts "nonce" to all the style
tags, you see <style data-emotion></style>
being left out, not inserted with "nonce" at all.
emotion
provides a CSP support via @emotion/cache
.
The idea is to NOT allowing csp-html-webpack-plugin
insert "nonce" for you, but you manually generate your own "nonce", and somehow manage to pass it to the app, so that it will embed the "nonce" to the page.