CSP style-src-directive 与 Vue/Vite

Question

我正在尝试为使用 Vue + Vite 作为前端的 Web 应用程序实现内容安全策略（CSP）。据我了解，Vue/Vite 生成的 javascript 代码通常符合大多数形式的 CSP，尽管很难找到任何关于此的明确信息。

现在，这是我偶然发现的特定问题：

我正在使用的 CSP 策略的一部分是

style-src 'self'

。尽管这通常会阻止 inline-styles 它似乎不会阻止使用 vue-style-binding 设置的样式，如下所示：

<div :style="{ 'font-size': fontSize + 'px' }"></div>

它似乎也不会阻止放置在 .vue 单文件组件中的内联样式，如下所示：

<template>
<div style="background: red">
</template>

尽管我不介意第一个，因为这意味着我不必为 style-src 设置

'unsafe-inline'

，但我有点想知道为什么第二个示例不会被

style-src 'self'

阻止（甚至

style-src 'none'

）。这种行为通常适用于 vue/vite 吗？

不幸的是，我在各自的官方文档中找不到有关 vue/vite 的 CSP 使用的任何具体信息。任何帮助将不胜感激。

Answer 1

我不知道 vue 到底是如何执行渲染的，但我假设他们使用 CSSOM，即将样式插入到 DOM 中，如下所示：

document.getElementById('id').style.background = 'red';

但是，直接在元素的 style 属性上设置的样式属性不会被阻止，从而允许用户通过 JavaScript 安全地操作样式

另请参阅：