Javascript 内容安全策略阻止Vue.js

我使用express.public（）函数在node.js服务器中提供HTML页面

我在我的html页面中添加了以下内容：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

我的应用程序标题：

Content-Security-Policy: default-src 'self';base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

在没有任何SecurityPolicy的情况下，如何添加此脚本

已解决

---

我从我的项目中移除“头盔”。头盔正在阻止除绝对域之外的所有cdn和脚本。

内容安全策略在所服务的html文件中设置，或由服务于html的软件（例如Nginx、Apache）设置

目前，您有：defaultsrc“self”，这意味着您告诉浏览器它只能向自己的域发出请求

您需要将它可以访问的域添加到此列表中

这大概是：

Content-Security-Policy: default-src 'self';script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js; base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

因此default src:self将默认设置为仅将请求限制到您自己的域

脚本src“self”覆盖了这一点，并专门针对脚本说明将请求仅限于您的域和该url

这有很多细节和例子：

---

除了silent tiger所说的，我认为您应该首先找出哪个中间件负责添加此内容策略。为此，请禁用所有中间件（express static除外），然后逐个添加其他中间件，直到再次看到Content Secutity策略头

---

如果您找到了由哪个中间件负责，那么您就知道应该配置哪个中间件。

是否可以包括服务器发送的安全策略，您可以通过浏览器的开发人员工具（F12）获取该策略，然后查找主请求的请求头我添加了它你可以在第一句话中检查它你说CSP是在index.html中设置的。这毫无意义，不能从html文档中影响响应头。Web服务器可以做到这一点。我相信有两种方法可以设置内容安全策略。一种是将meta标记直接嵌入到所服务页面的html中，另一种是让服务器（例如Apache、Nginx）进行设置。看，我已经更新了答案。

Content-Security-Policy: default-src 'self';script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js; base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests