难以让 nonce 解决方法适用于 trix-editor style-src content-security-policy 违规答案

【问题标题】：Having difficulty getting the nonce workaround to work for trix-editor style-src content-security-policy violations难以让 nonce 解决方法适用于 trix-editor style-src content-security-policy 违规
【发布时间】：2021-08-15 15:01:11
【问题描述】：

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

&lt;meta name="csp-nonce" content="nonce-goes-here"&gt;

或

&lt;meta name="trix-style-nonce" content="nonce-goes-here"&gt;

在此之后，预计 trix 会自动拾取随机数并将其用于生成 CSP 违规的样式元素中。

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

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>

我可以将 nonce 打印到控制台，并查看每次加载时它是否正确地重新提供给页面。但是，头盔继续从相同的 trix 样式源报告 CSP 违规，因此似乎没有将 nonce 附加到这些样式元素。有什么我在这里想念的想法吗？

【问题讨论】：

标签： node.js content-security-policy trix

【解决方案1】：

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

【讨论】：