HelmetJS 内容安全策略即使使用 nonce 也拒绝应用内联样式

Question

我一直在使用 helmet 来实现 Content-Security-Policy 并且在我将我使用的 Node 版本从 6 升级到 16 之前没有遇到任何问题。

我 return 在应用程序首次加载时使用样式化 HTML 元素，并且我在样式标签上使用随机数。升级节点版本后，没有加载任何内容，我在浏览器控制台中看到此消息：

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

这是我目前在头盔上使用的 CSP 配置。

const sources = [];
sources.push((req, res) => `'nonce-${res.cspNonce}'`);
sources.push("'self'");

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: sources,
      scriptSrc: sources,
      styleSrc: sources,
      frameAncestors: sources
    }
  })
);

我尝试了不同的指令配置，但没有任何效果。

我很困惑，因为控制台中的错误消息建议使用随机数，但我正在使用一个。在网络选项卡中，我可以在 header 上看到 CSP，并且样式标签上有预期的随机数。

Answer 1

它最终不是头盔的问题，而是 styled-components，一个与节点升级一起添加的前端库的依赖项。我只需要添加一个 __webpack_nonce__ 以及现有的随机数，一切都按预期工作。

HelmetJS 内容安全策略即使使用 nonce 也拒绝应用内联样式

HelmetJS Content Security Policy refusing to apply inline style even with a nonce

node.js

reactjs

helmet.js