Content Security Policy禁止内联样式，Pug模板星级渲染失效求助

以下是几个优先级从高到低的排查和解决方向：

1. 确认Helmet CSP配置的有效性 #

先检查你的Helmet配置代码，确保styleSrc确实包含带单引号的'unsafe-inline'，语法不能出错。示例正确配置：

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", "'unsafe-inline'"], // 单引号必须保留，不能省略
      // 其他规则按需添加
    },
  })
);

• 额外注意：如果同时配置了styleSrcElem或styleSrcAttr，这两个指令会覆盖styleSrc的相关规则，需要确保这两个指令也包含'unsafe-inline'（如果用到的话）。
• 排查是否有其他中间件在Helmet之后修改了CSP响应头，导致你的配置被覆盖。

2. 核对浏览器实际生效的CSP规则 #

打开浏览器控制台，找到完整的CSP错误提示，里面会显示当前实际生效的CSP策略，和你配置的规则做对比。比如错误信息会类似：

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

如果这里显示的styleSrc里没有'unsafe-inline'，说明你的配置根本没生效，要检查Helmet的加载顺序——必须在路由处理之前加载。

3. 改用Nonce替代'unsafe-inline'（更安全的方案） #

如果'unsafe-inline'确实无法生效，推荐用CSP官方推荐的nonce方案：

• 第一步：在请求中间件生成随机nonce值，传递到模板：

const crypto = require('crypto');
app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('hex');
  next();
});

• 第二步：配置Helmet的CSP，把nonce加入styleSrc：

app.use(
  helmet.contentSecurityPolicy((req, res) => ({
    directives: {
      styleSrc: ["'self'", `'nonce-${res.locals.nonce}'`],
    },
  }))
);

• 第三步：在Pug模板中绑定nonce：

.mcrtr_overlay(style=`width: ${review.rating * 20}%` nonce=nonce)

4. 检查Pug生成的HTML是否合规 #

确认Pug渲染后的HTML里，style属性是正常生成的，比如：

<div class="mcrtr_overlay" style="width: 80%"></div>

如果style内容包含未转义的特殊字符（比如引号），可能会被浏览器判定为无效代码，也可能触发CSP错误。

内容的提问来源于stack exchange，提问作者Abhrajit Saha