用于允许 Web 套接字的 content-security-policy 元标记答案

【问题标题】：content-security-policy meta tag for allowing web socket用于允许 Web 套接字的 content-security-policy 元标记
【发布时间】：2015-10-07 07:21:14
【问题描述】：

情况：phonegap serve 的自动重新加载被 content-security-policy 元标记阻止

添加内容安全策略可防止自动重新加载 phonegap serve 实用程序。这是建立在cordova serve 之上的，但在文件编辑时会自动重新加载应用程序。它通过在index.html 中注入socket.io 来工作。我应该在我的 CSP 元标记中指定什么将允许套接字连接到我的笔记本电脑。

这是我当前的 CSP 元标记：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 192.168.0.100 * ws:* ; connect-src ws://192.168.0.100 ws:*">

但是在打开时，设备一直显示“正在连接到设备”，并且设备上没有收到事件。

另请注意，它开始着手删除此元标记，这意味着 cordova-plugin-whitelist 可能不会阻止它。

【问题讨论】：

标签： cordova websocket socket.io phonegap-plugins content-security-policy

【解决方案1】：

要将 Web 套接字添加到安全策略中，请将 Web 套接字协议 (ws:) 添加到 connect-src 指令。

connect-src 'self' ws:;

您可以选择将 ws: 协议添加到 default-src 并省略 connect-src。这是一个有用的示例，它可以满足大多数本地开发需求，同时仍提供有用的安全约束。

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self' data: gap: ws: ssl.gstatic.com 'unsafe-inline';">

content security policy 的文档出奇地好且易于阅读。

【讨论】：

这有帮助的唯一补充是我需要添加 wss: 用于安全 Web 套接字
太棒了！如何限制到 ws://localhost？我正在尝试，但它不起作用。
仅添加 default-src 'self' ws 即可工作：添加 connect-src 策略时，您还需要包含其他 API 和小部件的域。否则，您将收到内容阻止错误。

【解决方案2】：

如果您的 websocket 在同一个主机/端口上，那么 connect-src 'self' 或 default-src 'self' 应该就足够了 - 假设 browsers have implemented the changes 因为 CSP 规范在 https://github.com/w3c/webappsec-csp/issues/7 (@987654323 @)。

【讨论】：

目前 safari 不支持通过 'self' 使用 websocket

【解决方案3】：

我有一个类似的问题。这会影响 Cordova 5.x.x。请参阅 Nic Raboy https://blog.nraboy.com/2015/05/whitelist-external-resources-for-use-in-ionic-framework/ 的这篇博文

我不得不稍微调整一下元标记以使我的 websocket 也能够连接。这是它的样子；

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

【讨论】：

那行得通。我想我错过了script-src * 'unsafe-inline' 'unsafe-eval'
这个答案具有误导性，而且很危险。 * 启用来自所有违反安全策略的来源的连接。有关详细信息，请参阅其他答案。