Skip to content

Instantly share code, notes, and snippets.

View minagawah's full-sized avatar

Hiroki Minagawa minagawah

View GitHub Profile
@minagawah
minagawah / csp-nonce-for-emotion.md
Last active July 23, 2022 02:40
Generate your own "nonce" when you see it is not inserted for "style data-emotion"...

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.