时间戳

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

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

问题描述

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

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

或者

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

之后， trix 将自动拾取 nonce 并将其用于生成 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.jscontent-security-policytrix

解决方案

我的愚蠢错误：我将元元素放在了错误的位置。与此同时，我发现元名称为“trix-style-nonce”的随机数不起作用，而元名称为“csp-nonce”的随机数却可以工作。

推荐阅读