Using CSP Header on MUI with React

Question

I have a React App using creact-react-app and Material-UI.

I'm trying to enable CSP headers for my react web app inside AWS CloudFront.

I dont know why, but I keep getting these empty inline "data-emotion" style tags ..

I've set the .env as follows:

ESLINT_NO_DEV_ERRORS=true
INLINE_RUNTIME_CHUNK=false
IMAGE_INLINE_SIZE_LIMIT=0

Answer 1

Try setting the style-src directive as "style-src 'self' 'sha256-2NO5...' 'sha256-47DE...';" with the full hashes as provided in the error messages.