我们是否被迫使用'；不安全内联'；在我们的CSP中使用Vue.JS时？

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

当我运行我的

spa

应用程序（由

npm run generate

with numxt.js生成）时，我会收到如下几个警告：

拒绝应用内联样式，因为它违反以下要求 内容安全策略指令：“样式src'self”“strict dynamic” “nonce-124LK5FJOC4JN7QLYESG2JEVXYUQU8J”“不安全内联”https:”。注 如果哈希值或nonce值为空，则忽略“不安全内联” 出现在源列表中

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

使用nonce，其中Vue.js必须使用

nonce

属性对所有生成的脚本和样式进行签名。但我不认为这能解决任何问题，因为看起来有些CSS是内联添加的

使用散列，这实际上是最好的方法，因为散列恰恰保证了我们希望客户端在浏览器上执行的内容

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

• 对于每次编译，请告诉开发人员，然后他们将创建一个NGINX配置文件

或者

• 能够生成包含哈希的文件，使这个过程对开发人员100%透明，开发人员不需要配置任何其他东西来保证良好的CSP保护

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

根据，运行时构建完全符合CSP

---

Nuxt支持在动态SSR模式下通过作为标题发送的网页包和元元素创建散列，否则（请参阅）

不确定这是否作为注释更好，但它可以工作，所以现在将其放在这里

我们的部署策略可能有点不同，但本质上我们触发lambda来使用CI/CD更新cloudfront csp

我们注意到，尽管应用程序版本/凹凸不同，但内联脚本是静态的。我们目前的解决办法是：

在开发服务器上部署-从chrome开发工具中获取sha256哈希值（您可以自己计算以避免部署）

使用哈希更新了terraform cloudfront lambda CSP

在新服务器上部署哈希匹配，我们不需要不安全的内联

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

您可以在

npm运行构建

脚本中使用

--无不安全内联

选项

---

太棒了！我他妈的怎么一周又一周地搜索这个，而谷歌从来没有给我看过Nuxt文档的这部分？我将尝试测试这个解决方案，并让你知道。不过，这似乎太好了，不可能是真的：PNuxt的CSP功能似乎只适用于SSR。。。是否有一种方法可以使其与静态（我使用

npm run generate

生成spa）一起工作？是的。请查看我找到的最后一个GH链接posted@MattH否…：（我认为这是Nuxt的一个限制。即使在SSR上，事情也不能很好地工作。Nuxt不能自动计算内联脚本和样式的所有哈希值，因此您最终还是使用了不安全的内联…这太糟糕了。主要的安全缺陷是设计上的。在我看来，这似乎只适用于

脚本

，但

样式

仍然很有用quires

不安全的内联
。我错了吗？此选项似乎不再存在：(