How to apply styles in the React app when using the "style-src 'self' "CSP policy?

Question

I have implemented the CSP policy in my React app:

CSP policy:

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self';">

It blocked all the @import statements in my React components because, during rendering in React, it took the styles from the bundle. However, from the bundle, it provided the styles as a tag to implement the style in the component. But the CSP policy blocked the tag, so my styles are not implemented.

How can I implement a CSS file without using the @import statement in a React component?

My CSP policy is blocking them from being implemented.

For minimal cases, I have implemented inline CSS to apply styling. However, for larger CSS files, I won't be able to make all the styles inline. What can I do to apply styles from larger CSS files?

Answer 1

It blocked all the @import statements ?

Because, wepack tries to add the styles as inline.

so you must specify the allowance by adding unsafe-inline to the style-src directive

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self' 'unsafe-inline';">

Answer 2

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self';"> with this, @import should work if the origin is same.

try set specific domain

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://example.com/..;">

or try importing as link tag if it's okay

<link href="https://css.example.com/some-file.css" rel="stylesheet">