无法使用 javascript 建立与安全 websocket 服务器的连接

Question

我的开发环境是这样的：

• 操作系统：Microsoft Windows 10
• PHP 框架：Laravel 8.0
• PHP 7.4 版
• Websocket 服务器：cboden/ratchet 0.4.3
• WAMP 服务器 3.2.0 (Apache 2.4.41)
• Firefox 91.0.1（64 位）/铬

我创建了一个新的 Laravel 应用程序来实现安全 Websocket 服务器，并在客户端使用纯 JavaScript（Laravel 刀片文件）连接到它。 websocket 服务器工作正常，据我所见，它正在运行，但网络浏览器无法连接，如图所示：

我尝试过使用不同的 URL，有或没有端口号，但无济于事。 我使用 openssl.exe 工具创建了 SSL 证书和私钥文件，并将它们放在命令文件夹中进行测试。

这是我的安全 Websocket 服务器的句柄代码：

   public function handle()
   {
      $loop   = Factory::create();
      $webSock = new SecureServer(
         new Server('0.0.0.0:8090', $loop),
         $loop,
         array(
            'local_cert'        => 'certificate.crt', 
            'local_pk'          => 'private.key', 
            'allow_self_signed' => TRUE, 
            'verify_peer' => FALSE
         )
      );

      // Ratchet magic
      $webServer = new IoServer(
         new HttpServer(
            new WsServer(
               new WebSocketController()
            )
         ),
         $webSock
      );

      $loop->run();
   }

httpd-ssl.conf 文件中的我的虚拟主机：

<VirtualHost *:443>
  ServerName ssa
  DocumentRoot "d:/web/app/ssa/public"
  SSLEngine on
  
  SSLCertificateFile "${SRVROOT}/conf/certificate.crt"
  SSLCertificateKeyFile "${SRVROOT}/conf/private.key"

  SSLVerifyClient none
  SSLVerifyDepth 10

  <Directory "d:/web/app/ssa/public">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
  </Directory>
  
  ProxyRequests Off 
  ProxyPass /wss/  ws://ssa:8090
</VirtualHost>

已加载 Apache 模块 proxy_module、proxy_http_module 和 proxy_wstunnel_module。 Web 应用程序以 HTTPS 运行。 之前，它通过 HTTP 和 WS 运行，一切正常，但我需要保护这个应用程序，我在连接到安全的 websocket 服务器时遇到问题。

我错过了什么吗？

我的 Websocket 服务器或 Apache 配置有问题吗？

Answer 1

为了不让更多信息使我的第一个答案复杂化，我在此提供了对我真正有用的答案。

我按如下方式创建了 Secure Websocket Server：

public function handle() {
      $loop = Factory::create();
      $webSock = new SecureServer(
         new Server('0.0.0.0:8443', $loop),
         $loop,
         array(
            'local_cert' => 'C:/wamp64/bin/apache/apache2.4.41/conf/server.crt',
            'local_pk' => 'C:/wamp64/bin/apache/apache2.4.41/conf/server.key', 
            'allow_self_signed' => TRUE, 
            'verify_peer' => FALSE
         )
      );
      $webServer = new IoServer(
         new HttpServer(
            new WsServer(
               new WebSocketController()
            )
         ),
         $webSock
      );
      $loop->run();
}

注意我把端口号改成了8443（我觉得这没什么关系），还改了新的证书和密钥文件，生成如下：

openssl req -config config.conf -new -x509 -out server.crt -days 3650

而config.conf文件是：

[req]
default_bits = 2048
encrypt_key = no
default_md = sha256
default_keyfile = server.key
distinguished_name = req_distinguished_name
prompt = no

[req_distinguished_name]
C = KH
ST = Siem Reap
L = SR
O = AHC
OU = IT
CN = localhost

[bs_section]
CA=false

所有区别都在于最后一行 CA=false 表明我没有签署或充当证书颁发机构 (CA)。 这消除了MOZILLA_PKIX_ERROR_CA_CERT_USED_AS_END_ENTITY 消息。

然后，我删除了在我的 httpd-ssl.conf 文件中定义代理的行：

<VirtualHost *:443>
  ServerName ssa
  DocumentRoot "d:/web/app/ssa/public"
  SSLEngine on
  
  SSLCertificateFile "${SRVROOT}/conf/server.crt"
  SSLCertificateKeyFile "${SRVROOT}/conf/server.key"

  SSLVerifyClient none
  SSLVerifyDepth 10

  <Directory "d:/web/app/ssa/public">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
  </Directory>
  
  #Redirect /wss /wss/
  #ProxyPass /wss/ ws://127.0.0.1:8090/
  #ProxyPassReverse /ws/ wss://127.0.0.1:8090/
</VirtualHost>

请注意，对于这个虚拟主机，我使用了与 Secure Websocket Server 相同的证书和密钥文件。

好的，这就是我的证书问题。

现在一切正常。

Answer 2

好的，正如@apokryfos 指出的那样，我尝试通过 HTTPS 代理 websocket 服务器，但我做错了。

我将我的 websocket 服务器更改为非安全服务器，并对我的虚拟主机进行了以下更改：

<VirtualHost *:443>
  ServerName ssa
  DocumentRoot "d:/web/app/ssa/public"
  SSLEngine on
  
  SSLCertificateFile "${SRVROOT}/conf/certificate.crt"
  SSLCertificateKeyFile "${SRVROOT}/conf/private.key"

  SSLVerifyClient none
  SSLVerifyDepth 10

  <Directory "d:/web/app/ssa/public">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
  </Directory>
  
  Redirect /wss /wss/
  ProxyPass /wss/ ws://127.0.0.1:8090/
  ProxyPassReverse /ws/ wss://127.0.0.1:8090/
</VirtualHost>

在客户端，浏览器现在可以通过 HTTPS 端口联系后端 WS 服务器：

// The connection to the WebSocket Server.
var socket = new WebSocket("wss://ssa:443/wss/");

我得到了这个解决方案 Apache Config: Websockets Proxy WSS request to WS backend

现在我的非安全 Websocket 服务器通过 HTTPS 发送/接收。 当然，这不是我期望应用到我的需求的解决方案，但它确实有效。 我仍然希望找到一个正式的解决方案，在不使用代理机制的情况下将纯 JavaScript 客户端连接到 Secure Websocket Server (wss://)。

Answer 3

您肯定是在尝试连接到错误的目的地。它说的是 wss:///ssa/wss/，但可能应该是 wss://your.site.domain/ssa/wss/。

那么让我们看看前端代码，看看它有什么问题。