在 node.js 应用程序下使用随机数的 CSP - 拒绝应用内联 style/script

Question

我正在尝试使用正确的 CSP 保护我的网站（使用节点构建。js/express/npm）。我正在使用 npm 头盔包并尝试使用 nonce 配置 CSP。我试图以任何可能的方式传递随机数，但我不明白为什么 Chrome 拒绝执行内联样式或脚本。下面的代码示例：

// my app.js
// I generate a new random nonce value for every response.
    const nonce = crypto.randomBytes(16).toString("base64");

//configure CSP under helmet
    app.use(
    helmet.contentSecurityPolicy({
        useDefaults: false,
        directives: {
            defaultSrc: ["'self'"],
            connectSrc: ["'self'", ...connectSrcUrls],
            scriptSrc: ["'self'", "unsafe-inline", `nonce-${nonce}`, ...scriptSrcUrls],
            styleSrc: ["'self'", ...styleSrcUrls],
            workerSrc: ["'self'", "blob:"],
            objectSrc: [],
            imgSrc: [
                "'self'",
                "blob:",
                "data:",
                "https://res.cloudinary.com/dqcadja0y/",
                "https://images.unsplash.com/"
            ],
            fontSrc: ["'self'", ...fontSrcUrls],
        },
    })
);

//I pass nonce
app.get('/', (req, res) => {
    res.render('home', { style: 'app', nonce: nonce });
});

//example of use in script e.g. mapbox
<script nonce="${nonce}" src='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'></script>

来自控制台的错误 return：

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com/ https://api.mapbox.com/ https://api.tiles.mapbox.com/ https://fonts.googleapis.com/ https://fonts.gstatic.com https://use.fontawesome.com/ https://cdn.jsdelivr.net". Either the 'unsafe-inline' keyword or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

我试图查看 express、helmet 的文档，但我无法弄清楚。我做错了什么？

Answer 1

您有一个内联样式，正如错误消息所说，您必须添加 'unsafe-inline' 或随机数。当它是标签时，您还可以使用散列。如果它是样式属性 (style="...">)，则哈希将不起作用，并且在大多数情况下也可能不是随机数。请注意，您已为 script-src 设置 'unsafe-inline'，但您还必须在 style-src 中更加宽容。当然，另一种方法是将样式从内联移动到位于您允许的样式位置之一的单独文件中。

在 node.js 应用程序下使用随机数的 CSP - 拒绝应用内联 style/script

CSP with nonce under node.js application - Refused to apply inline style/script

node.js

express

google-chrome

content-security-policy