vue.js - 构建到生产后的内容安全策略指令

Question

我正在使用 vue2 使用 websocket 在我将服务器移动到新服务器之前它可以正常工作我的项目拒绝与频道握手

转载链接

https://realsportindo.com/event/kejuaraan-kata-virtual-forki-jabar-2020/medals

您可以看到 webscoket 的日志被阻止

Refused to connect to 'wss://example.com/socket//websocket?vsn=1.0.0' because it violates the following Content Security Policy directive: "default-src 'self' http: https: data: blob: 'unsafe-inline'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

生产时不会发生它仅在构建并部署到生产后才会发生

标签： vue.jswebpackwebsocketcontent-security-policyvue-cli

Answer 1

错误信息：

因为它违反了以下内容安全策略指令：“default-src 'self' http: https: data: blob: 'unsafe-inline'”。
请注意，'connect-src' 没有显式设置，因此 'default-src' 用作后备。

表示代理内容安全策略不包含connect-src指令，但您在 HTML 代码中的元标记确实包含它：
<meta http-equiv=Content-Security-Policy content="default-src 'self' https: http: ws: wss: 'unsafe-eval' 'unsafe-inline'; img-src 'self' data: http: https:; connect-src ws: wss: https: http:">

这意味着您发布了 2 个 CSP：

• 一种是通过 HTML 代码中的元标记
• 第二种是通过服务器发送的HTTP-header，你可以在Dev Tool中看到：

由于您有 2 个不同的内容安全策略，所有来源都应该通过这两个策略原封不动地通过。但是第二个不允许wss:因此锁定它。

您需要以一种方式交付 CSP：元标记或 HTTP 标头。

顺便说一句：您的 CSP 规则是如此开放，以至于您甚至不需要 CSP - 它没有任何限制。