cssnode.jsstackpugcontent-security-policy

Refused to apply inline style because it violates the following Content Security Policy

I was trying to use inline styling, but suddenly the console is giving this error and ain't letting me do one important task.

each review in tour.reviews
                    .mc_reviews
                        .mcr_top 
                            .mcrt_left 
                                .mcrtl_pic 
                                    .mcrtlp_container
                                        img(src=`images/users/${review.user.photo}`)
                                .mcrtl_name= `${review.user.name}`
                            .mcrt_mid 
                            .mcrt_right 
                                img(src='/images/star.png')
                                img(src='/images/star.png')
                                img(src='/images/star.png')
                                img(src='/images/star.png')
                                img(src='/images/star.png')
                                .mcrtr_overlay(style={'width': `${(review.rating)*20}%`})
                        .mcr_bottom= `"${review.review}"`

The above is a pug template where you can easily spot the inline content. enter image description here

The inline style will help me color the stars based on rating of each reviewer.

Now that the issue is disturbing me!

enter image description here

I already have used the below code which I got from another post on stack overflow:

app.use(
    helmet.contentSecurityPolicy({
      directives: {
        defaultSrc: ["'self'", 'data:', 'blob:'],
   
        fontSrc: ["'self'", 'https:', 'data:'],
  
        scriptSrc: ["'self'", 'unsafe-inline'],
   
        scriptSrc: ["'self'", 'https://*.cloudflare.com'],
   
        scriptSrcElem: ["'self'",'https:', 'https://*.cloudflare.com'],
   
        styleSrc: ["'self'", 'https:', 'unsafe-inline'],
   
        connectSrc: ["'self'", 'data', 'https://*.cloudflare.com']
      },
    })
  );

I have also gone through many similar solutions, but none of them is working.

Please help!!!

Solution

  • The problem is that you are inserting inline style attributes. You have multiple options in security preferred order:

    1. Rewrite the code to add css class names instead of modifying style.
    2. Add the hash values corresponding to the 5 star ratings. The must be added with single quotes in the policy along with 'unsafe-hashes'.
    3. Add single quotes to unsafe-inline as "'unsafe-inline'" in your code. You're currently adding the source unsafe-inline, which is treated as a host-source not a keyword.