vue.js - 使用 Vue.JS 时，我们是否被迫在我们的 CSP 中使用 'unsafe-inline'？

标签 vue.js webpack nuxt.js content-security-policy webpack-style-loader

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

当我运行我的 spa应用程序(来自 npm run generate 和 Nuxt.js)，我会收到几个警告，例如:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'strict-dynamic' 'nonce-124lk5fjOc4jn7qqLYEsG2jEvxYuqu8J' 'unsafe-inline' https:". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

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

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

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

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

对于每个编译，将它们告诉开发人员，然后 add these hashes到 NGINX 配置文件，

或者，

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

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

最佳答案

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

Nuxt 正在支持 csp config通过 webpack 创建哈希作为动态 SSR 模式的 header 发送，否则元元素(参见 https://github.com/nuxt/nuxt.js/pull/5354)

关于vue.js - 使用 Vue.JS 时，我们是否被迫在我们的 CSP 中使用 'unsafe-inline'？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58397934/