0

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

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

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src 'self' 'nonce-uXeTuzCq2Sp5MWrSBuypzA=='”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=”）或随机数（“nonce-...”）。

这是我目前与头盔一起使用的 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
    }
  })
);

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

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

4

1 回答 1

0

它最终不是头盔的问题，而是样式组件的问题，它是随 Node 升级添加的前端库的依赖项。我只需要添加一个 __webpack_nonce__ 以及现有的随机数，一切都按预期工作。

于 2022-02-01T21:48:38.793 回答