构建到生产后的内容安全策略指令

Content Security Policy directive after build to production

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

复制link

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.

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

错误信息:

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.

说执行内容安全策略不包含 connect-src 指令,但是 HTML 代码中的 meta-tag 确实包含它:
<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代码中的meta-tag
  • 第二种是通过HTTP-header服务端发送,在Dev Tool中可以看到:

由于您有 2 种不同的内容安全策略,因此所有来源都应该通过 both these policies 毫发无损地通过。但是第二个不允许 wss: 因此将其锁定。

您需要以一种方式传送 CSP:元标记或 HTTP header。

顺便说一句:您的 CSP 规则非常开放,您甚至不需要 CSP - 它没有任何限制。