css Question posted in
Some basic documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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';">
    Login or Signup to reply.
  2. 0

    <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">

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search