难以使 nonce 解决方法适用于 trix-editor style-src content-security-policy violations

Question

我在 node.js 项目中使用 trix-editor (v1.3.1)。该模块的 trix.js 包含一些违反内联 Content-Security-Policy 规则的样式元素。似乎解决方法是 v1.2.2 中的 implemented，它要求在使用 trix 编辑器的页面的元标记中包含随机数，如下所示：

<meta name="csp-nonce" content="nonce-goes-here">

或

<meta name="trix-style-nonce" content="nonce-goes-here">

之后 trix 将自动获取随机数并将其用于生成 CSP 违规的样式元素。

我正在使用头盔来实现CSP，并按照npm上头盔说明的建议创建和使用随机数，如下所示：

app.use((req, res, next) => {
  res.locals.cspNonce = crypto.randomBytes(16).toString("hex");
  next();
});
app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      styleSrc: ["'self'", "fonts.googleapis.com", (req, res) => `'nonce-${res.locals.cspNonce}'`],
    },
  })
);

然后，在视图中我使用车把提供它，如下所示：

<link href="/assets/vendor/trix/trix.css" rel="stylesheet" >
<meta name="trix-style-nonce" content="{{ cspNonce }}">
<meta name="csp-nonce" content="{{ cspNonce }}">

...

<script src='/assets/vendor/trix/trix.js'></script>

我可以将随机数打印到控制台，并看到它在每次加载时都正确地重新提供给了页面。然而，头盔继续从相同的 trix 样式来源报告 CSP 违规，因此随机数似乎没有附加到这些样式元素上。有什么想法我在这里遗漏了什么吗？

Answer 1

我的愚蠢错误：我将 meta 元素放在了错误的位置。与此同时，我发现元名称 'trix-style-nonce' 的随机数不起作用，而元名称 'csp-nonce'.

确实有效

难以使 nonce 解决方法适用于 trix-editor style-src content-security-policy violations

Having difficulty getting the nonce workaround to work for trix-editor style-src content-security-policy violations

node.js

content-security-policy

trix