拒绝连接到“wss://live.mysite.com:3000/”，因为它违反了以下内容安全策略指令：

Posted 2023-02-16

【中文标题】拒绝连接到“wss://live.mysite.com:3000/”，因为它违反了以下内容安全策略指令：

【英文标题】：Refused to connect to 'wss://live.mysite.com:3000/' because it violates the following Content Security Policy directive:

【发布时间】：2021-01-25 16:23:49

【问题描述】：

 if (navigator.mediaDevices.getUserMedia) 
    navigator.mediaDevices.getUserMedia(constraints)
      .then(stream => 
        localStream = stream;
        document.getElementById('localVideo').srcObject = stream;
      ).catch(errorHandler)

      // set up websocket and message all existing clients
      .then(() => 
        serverConnection = new WebSocket('wss://' + window.location.hostname + ':' + WS_PORT);
        serverConnection.onmessage = gotMessageFromServer;
        serverConnection.onopen = event => 
          serverConnection.send(JSON.stringify( 'displayName': localDisplayName, 'uuid': localUuid, 'dest': 'all' ));
        
      ).catch(errorHandler);

   else 
    alert('Your browser does not support getUserMedia API');
  

我已配置 SSL，但无法正常工作。 我尝试过元标记，但也没有用。

【参考方案1】：

拒绝连接到“wss://live.mysite.com:3000/”，因为它违反了以下内容安全策略指令：

您剪切了错误消息中信息最丰富的部分，其中包含发生了什么以及如何修复它的确切信息。

因此我会尝试猜测。

您将 Express 与 Helmet 4 一起使用。最后一个具有默认的内容安全策略标头 enabled。默认策略的值为 default-src 'self'。 'self' 令牌不涵盖 wss://live.mysite.com:3000/，因为它仅涵盖标准端口号。

我尝试过元标记，但也没有用

添加元标记您将同时发布 2 个 CSP：通过 HTTP 标头和元标记。将应用更严格的，因此元标记无法解决任何问题。

只需在 Helmet 中禁用 CSP：

app.use(helmet(
  contentSecurityPolicy: false,
));

并在您弄清楚它的工作原理后将其打开。或者，您可以将 wss://live.mysite.com:3000 源添加到 connect-src 指令中。但是有件事告诉我，这个 CSP 错误并不是你唯一的错误。因此，最好先了解 CSP 的工作原理，然后再进行配置。

【讨论】：

你说的一切都是正确的，但我使用的是 HTTP 来创建服务器，而不是 expressjs。所以我正在迁移应用程序来表达，我会尝试

如果您使用 Helmet - 只需配置 CSP 或禁用它。迁移不是强制性的。