Primevue 工具提示指令 CSP 问题

Question

我使用的是 Primevue v3.51.0。我需要过渡到 CSP，但 Primevue 的工具提示仍然存在问题。它报告内联样式。

我已将以下配置添加到我的 Vue 应用程序中：

...
const nonce = document.querySelector('meta[name=csp-nonce]')?.content;
app.use(store);
app.use(PrimeVue, {
      pt: { directives: { tooltip: { root: { nonce }, arrow: { nonce }, text: { nonce } } } },
      csp: { nonce },
    });
...

现在，对于所有 Primevue 组件，随机数都有效，并且我没有收到任何错误。但是，当我将鼠标悬停在带有 v-tooltip 指令的任何元素上时，我会收到以下警告：

[仅限报告]拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src 'self' https: fonts.googleapis.com 'nonce-9udBFzvvjdv7+maRQWYcRA=='”。启用内联执行需要“unsafe-inline”关键字、哈希值（“sha256-JYsO83ExUe+QAZ6wMV20BU+7xt/XdNX8xs4k1/QV4QA=”）或随机数（“nonce-...”）。请注意，哈希不适用于事件处理程序、样式属性和 javascript: 导航，除非存在“unsafe-hashes”关键字。

运行以下脚本，以便在调用工具提示时获取信息...

const int = () => {
    const ints = setInterval(() => {
        const t = document.querySelector('.p-tooltip');
        if (t) {
            console.log(t.nonce, [...t.children].map((c) => [c, c.nonce]).flat())
                        }}, 200)
    setTimeout(() => clearInterval(ints), 5000)
}

int();

...我得到以下结果：

FwDachJLYNwPYmJSuvjHwQ== (4) [div.p-tooltip-arrow, 'FwDachJLYNwPYmJSuvjHwQ==', div.p-tooltip-text, 'FwDachJLYNwPYmJSuvjHwQ==']

因此，工具提示的随机数设置正确，但我仍然收到警告。 我做错了什么吗？有什么建议吗？

PS。不同示例中的随机数值并不相同，因为它会在每次页面重新加载时发生变化。

Answer 1

还有什么关于这个的吗？

为我正在使用的 Vue 设置 CSP

app.use(PrimeView, { 客户服务提供商：{ 随机数：“rAnd0m” } })

但是在 Chrome 上检查时我没有看到任何

rAnd0m

的证据