Safari 出现错误“拒绝连接到 _____，因为它没有出现在内容安全策略的 connect-src 指令中。”

Question

我有一个 Safari 用户无法连接的在线白板。他们从控制台获得以下信息。

Refused to connect to wss://whiteboard.[MYDOMAIN].com/[MOREPATHSTUFF] because it does not appear in the connect-src directive of the Content Security Policy.

只有 Safari 会这样做。 Chrome、FF、Edge 等工作正常。我查看了其他与 SO 相关的帖子，似乎 Safari 需要类似...

<meta http-equiv="Content-Security-Policy" content="
                        default-src * data: blob: ws: wss: gap://ready file://*;
                        style-src * 'unsafe-inline'; 
                        script-src * 'unsafe-inline' 'unsafe-eval';
                        connect-src * ws: wss:;">

我不知道这一切意味着什么。我想要的只是让 Safari 允许连接，一切都应该很好。感谢您考虑如何实现这一目标。

Answer 1

我查看了其他与 SO 相关的帖子，似乎 Safari 需要类似...

您已经通过 HTTP 标头或元标记 (how to check it) 发布了内容安全策略 (CSP)，因为浏览器控制台中会显示一条违规消息。
发布第二个 CSP 不能放松生成的策略，因为第一个 CSP 仍将执行阻塞。
这就是为什么您无法通过添加元标记或 HTTP 标头来解决问题的原因。

您必须弄清楚第一个 CSP 的发布位置并对其进行更改。

只有 Safari 会这样做。 Chrome、FF、Edge 等都可以正常工作。

Safari 支持 connect-src 指令，因此它的行为应该与 Chrome/Firefox/Edge 没有区别，除了一件事：Safari 会将 not support 升级为 ws: 到 wss:。
对于connect-src ws:，Chrome/Firefox/Edge 将应用connect-src ws: wss: 策略，但 Safari 不会。

我敢打赌，您的 CSP 中有 connect-src ws:，因此与 wss: 的所有连接都被阻止。
当您找到您的 CSS 发布位置时，只需将 wss://whiteboard.[MYDOMAIN].com 添加到 connect-src 指令即可。

注意：如果您使用的是default-src 指令而不是connect-src - 那么您需要将wss://whiteboard.[MYDOMAIN].com 添加到其中。

更新：
如何发布 CSP 标头

A)。 CSP 标头可以在您的 Web 应用程序本身中生成（头盔中间件、用于管理 HTTP 标头的特定包、通过res.setHeader() 直接发出 HTTP 标头等等）。

B)。 CSP 标头可以由服务器发布。对于 Nginx，它应该在服务器配置中为 add_header Content-Security-Policy "default-src ... ";。 Several folders 可以用于此，但 etc/nginx/conf.d 是首选，其他已弃用。

如果我同时以 A) 和 B) 两种方式发布 CSP 标头会怎样？

服务器工作在您的网络应用软件完成所有工作后，因此网络服务器（或代理服务器）应覆盖具有相同名称的 HTTP 标头。因此服务器可以覆盖任何由 Web 应用发布的 HTTP 标头。

在某些情况下它不起作用，您可以看到 2 CSP headers 已发布。即使在这种情况下，您也可以创建trick：

proxy_hide_header Content-Security-Policy;

然后在它下面，添加你需要的标题：

add_header Content-Security-Policy "default-src 'self';";

这可以用作临时解决方案，直到您弄清楚标头的真正发布位置。

Answer 2

CSP 有一些不直观的特点。一种是： 像wss://example.com 这样的Websocket 不会被*.example.com 甚至* 等通配符捕获

为了允许 websockets - 您需要使用wss://example.com 甚至ws: wss: 显式添加它们

如果您只想允许 connect-src 上的任何内容，则添加 connect-src * ws: wss:; 您的政策应该有效（如您所述）。