難以使 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 中實現了一個變通方法，它要求在使用 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”的它確實有效。