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

Question

 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，但无法正常工作。我试过 meta 标签，但还是不行。

Answer 1

Refused to connect to 'wss://live.mysite.com:3000/' because it violates the following Content Security Policy directive:

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

所以我来猜猜。

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

I have tried meta tag but also didn't work

添加元标记，您将获得同时发布的 2 个 CSP：通过 HTTP header 和通过元标记。将应用更严格的一个，因此元标记不会修复任何问题。

只需在头盔中禁用 CSP：

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

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

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

Refused to connect to 'wss://live.mysite.com:3000/' because it violates the following Content Security Policy directive:

javascript

nginx

websocket

node.js

content-security-policy