使用 Vue.JS 时，我们是否被迫在 CSP 中使用“unsafe-inline”？

Question

有没有办法让 Vue.js 正确地与 CSP 一起工作？

当我运行我的spa应用程序（由npm run generateNuxt.js 生成）时，我会收到几个警告，例如：

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src 'self' 'strict-dynamic' 'nonce-124lk5fjOc4jn7qqLYEsG2jEvxYuqu8J' 'unsafe-inline' https:”。请注意，如果源列表中存在哈希值或现时值，则忽略 'unsafe-inline'。

知道CSP，有两种正确的方法可以解决这个问题：

1. 使用 nonces，其中 Vue.js 必须使用nonce属性对所有生成的脚本和样式进行签名。但我认为这不会解决任何问题，因为它似乎内联添加了一些 CSS。

2. 使用散列，这实际上是这样做的首选方式，因为散列准确地保护了我们希望客户端在浏览器上执行的内容。

但是，为了使用哈希，Vue.js/Webpack 必须能够计算其所有脚本和样式的哈希，并且：

• 对于每次编译，将它们告诉开发人员，然后将这些哈希添加到 NGINX 配置文件中，

或者，

• 能够生成包含散列的元标记，使此过程对开发人员 100% 透明，开发人员无需配置任何其他内容即可保证良好的 CSP 保护。

Vue.js 是否以任何方式支持这一点？世界上有没有人能够让 CSP 与 Vue.js 一起工作而没有任何“不安全的内联”？

Answer 1

根据Vue.js docs，运行时构建完全符合 CSP。

Nuxt 支持csp 配置，以通过 webpack 在动态 SSR 模式和元元素上作为标头发送来创建哈希值（参见https://github.com/nuxt/nuxt.js/pull/5354）