为什么我的随机数在 node.js 中被忽略了？

Question

当我尝试使用随机数调用脚本时收到以下错误消息：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src 'self' 'nonce-89442c29-ad9f-431a-868b-212345585710' 'sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU='”。启用内联执行需要 'unsafe-inline' 关键字、散列 ('sha256-...') 或随机数 ('nonce-...')。请注意，哈希不适用于事件处理程序、样式属性和 javascript: 导航，除非存在 'unsafe-hashes' 关键字。

我在这里设置了随机数和随机数相关的东西：

const nonce = Buffer.from(uuid_v4().toString('base64'));
app.use((req, res, next) => {
  res.locals.nonce = nonce;
  next();
});

app.use(helmet());

app.use(csp({
    directives: {
        defaultSrc: ["'self'"],
        styleSrc: ["'self'"],
        scriptSrc: [
            "'self'",
            `'nonce-${nonce}'`, // Pass the nonce value along.
            "'sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU='",
          ],
        imgSrc: ["'self'"],
        fontSrc: ["'self'"]
    }
}));

// referrerPolicy
app.use(helmet.referrerPolicy({ policy: 'no-referrer-when-downgrade' }));

javascript:

<script nonce={{ nonce }}>
  const delItem = (id) => {
    id = id.substring(3);
    const g = document.getElementById(`line${id}`);
    const workerId = g.cells[0].innerText;
    window.location.replace(`/delete?workerId=${workerId}`);
  };
</script>``

此函数被以下 html 调用（或不被调用）：

<button class="my-button" data-module="my-button" id="del1" onclick="delItem(this.id)">Delete</button>

在我引入 CSP 之前，该功能运行良好。

Answer 1

这里是头盔维护员。

这看起来是您的内联事件处理程序 (onclick="delItem(this.id)") 的问题。您可以通过更改内联事件处理程序来解决此问题。尝试将以下内容添加到您的 front-end JavaScript:

<script nonce={{ nonce }}>
  const delItem = (id) => {
    // ...
  };

  const del1Button = document.getElementById('del1');
  del1Button.addEventListener('click', (event) => {
    const { id } = event.target;
    delItem(id);
  });
</script>