拒绝应用内联样式，因为它违反了以下内容安全策略

Question

我试图使用内联样式，但突然控制台给出了此错误并且不允许我执行一项重要任务。

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

上面是一个哈巴狗模板，您可以轻松地发现内联内容。

内联样式将帮助我根据每个评论者的评分为星星着色。

现在这个问题困扰着我！

我已经使用了从堆栈溢出的另一篇文章中获得的以下代码：

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']
      },
    })
  );

我也经历过很多类似的解决方案，但没有一个有效。

请帮忙！！！

Answer 1

问题是您正在插入内联样式属性。您有多个安全首选顺序选项：

1. 重写代码，添加css类名，而不是修改样式。
2. 添加与 5 星级评级对应的哈希值。必须在策略中添加单引号以及“不安全哈希”。
3. 在代码中将单引号添加到 unsafe-inline 作为“'unsafe-inline'”。您当前正在添加源 unsafe-inline，它被视为主机源而不是关键字。