CSP Inline Style Blocked in Auth0 React Widget after Setting INLINE_RUNTIME_CHUNK=false

Get Help
,
1

Hello Auth0 Support Team,

I’m integrating the Auth0 React SDK in my React app built with react-scripts@4.0.3. Recently, I set INLINE_RUNTIME_CHUNK=false in my .env to disable inlining of runtime JS chunk.

After this change, I started getting the following Content Security Policy (CSP) error in the browser console related to inline styles in the Auth0 widget:

Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ https://fonts.googleapis.com”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-mMJGRqU14md0owQrqCC69q9WdqWe1J5VJKHStApDohA=’), or a nonce (‘nonce-…’) is required to enable inline execution.

I understand this is due to CSP blocking inline styles, but I’d like to know:

  • Is there a way to configure the Auth0 React SDK or widget to avoid inline styles, or load styles in a CSP-compliant way?
  • Should I add the provided hash to my CSP, and if so, is the hash stable or will it change with Auth0 SDK updates?
  • Any recommended best practices for using Auth0 React SDK with strict CSP policies?

My current style-src directive looks like this:

style-src ‘self’ https://fonts.googleapis.com

Thanks in advance for your guidance!

3

Hi @ashpaq.inamdar

Welcome to the Auth0 Community!

I believe the following blog post regarding CSP should be able to address the issue that you are experiencing with the inline style/hash/nonce error inside the React application.

Let me know if you have any other questions or anything else I can help you out with!

Kind Regards,
Nik