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?
2
Answers
Because, wepack tries to add the styles as inline.
so you must specify the allowance by adding
unsafe-inline
to thestyle-src
directive<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">