使用Vue.JS时是否必须在CSP中使用'unsafe-inline'？

Question

有没有办法使Vue.js与CSP正常工作？

当我运行spa应用程序（使用Nuxt.js从npm run generate中运行）时，我将收到诸如以下的警告：

  

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

知道CSP时，有两种正确的解决方法：

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

2. 使用散列，这实际上是首选的散列方法，因为散列可以完全确保我们希望客户端在浏览器上执行的内容。

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

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

或

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

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

Answer 1

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

Nuxt支持csp config通过在动态SSR模式下作为标头发送的webpack和其他元元素创建哈希（否则请参见https://github.com/nuxt/nuxt.js/pull/5354）

Answer 2

您可以在--no-unsafe-inline脚本中使用npm run build选项

https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build

Answer 3

不确定这是否可以作为注释更好，但还可以，因此暂时将其放在此处。

我们的部署策略可能有所不同，但是从本质上讲，我们触发了lambda以使用CI / CD更新Cloudfront csp。

我们注意到，尽管应用程序版本/错误不同，但是内联脚本是静态的。我们当前的解决方法是：

1. 在开发服务器上进行部署-从chrome开发工具中获取sha256哈希（您可以自己计算一下以避免部署）
2. 使用哈希值更新了Terraform Cloudfront Lambda CSP
3. 在新部署中，哈希匹配，并且我们不需要unsafe-inline

一些大的限制：如果nuxt在新版本上更改了内联脚本，我们将不得不在CSP中手动更新哈希。另外，根据您的样式框架，可能会有许多内联样式未在此处捕获。