Debug websocket connection that works in postman, but not on website

Question

I have a react frontend (website) that tries to estabish a https websocket connection to my java spring application backend (running on a cloud vm). I can establish the ws connection via postman as expected. But when i use the same url to try establishing a connection from my website, the ws connection doesnt work. This is my backend config:

import ...

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer, WebSocketMessageBrokerConfigurer {


    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ticTacToe").setAllowedOrigins("*").withSockJS();
    }
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(ticTacToeHandler(), "/ticTacToe")
                .setAllowedOrigins("*");
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes( "/app");
    }

    @Bean
    public GameMessageHandler<TicTacToeGame> ticTacToeHandler() {
        return new GameMessageHandler();
    }

    @Bean
    public Class<TicTacToeGame> ticTacToeGameClass() {
        return TicTacToeGame.class;
    }


}

and this is my frontend code where the ws gets initiated:

export default function TicTacToeAPI({
  nickname,
  roomNumber,
  setMenuState,
}: TicTacToeAPIProps) {
  //websocket
  const [websocket, setWebsocket] = useState(
    new WebSocket("wss://150.230.148.196:8080/ticTacToe")
  );
(...)

the website is https://belaschinke.com/projects/ticTacToe if you want to see for yourself.

Im unsure how to debug this problem further / how to narrow the source down. Are there options to see the network traffic in more detail?

I checked the TLS certificate of the website (is still valid). Also refreshed the certificate and still no change. I tried connecting from multiple networks. I also looked at the backend logs, but while the postman connection causes some info logging, nothing gets logged when trying a ws connection from the website.

---

So I set the spring app Logging level to debug (shoud've done that fron the start) I get the responsible error:

springboot-app_1 | 2023-12-11T07:44:03.706Z DEBUG 1 --- [nio-8080-exec-8] o.a.t.util.net.NioEndpoint.handshake : Handshake failed for client connection from IP address [23.6.34.54] and port [61692] springboot-app_1 | springboot-app_1 | javax.net.ssl.SSLHandshakeException: Received fatal alert: certificate_unknown springboot-app_1 | at java.base/sun.security.ssl.Alert.createSSLException(Alert.java:131) ~[na:na] springboot-app_1 | at java.base/sun.security.ssl.Alert.createSSLException(Alert.java:117) ~[na:na] springboot-app_1 | at java.base/sun.security.ssl.TransportContext.fatal(TransportContext.java:358) ~[na:na] springboot-app_1 | at java.base/sun.security.ssl.Alert$AlertConsumer.consume(Alert.java:293) ~[na:na] springboot-app_1 | at java.base/sun.security.ssl.TransportContext.dispatch(TransportContext.java:204) ~[na:na] springboot-app_1 | at java.base/sun.security.ssl.SSLTransport.decode(SSLTransport.java:172) ~[na:na] springboot-app_1 | at java.base/sun.security.ssl.SSLEngineImpl.decode(SSLEngineImpl.java:736) ~[na:na] springboot-app_1 | at java.base/sun.security.ssl.SSLEngineImpl.readRecord(SSLEngineImpl.java:691) ~[na:na] springboot-app_1 | at java.base/sun.security.ssl.SSLEngineImpl.unwrap(SSLEngineImpl.java:506) ~[na:na] springboot-app_1 | at java.base/sun.security.ssl.SSLEngineImpl.unwrap(SSLEngineImpl.java:482) ~[na:na] springboot-app_1 | at java.base/javax.net.ssl.SSLEngine.unwrap(SSLEngine.java:679) ~[na:na] springboot-app_1 | at org.apache.tomcat.util.net.SecureNioChannel.handshakeUnwrap(SecureNioChannel.java:483) ~[tomcat-embed-core-10.1.15.jar!/:na] springboot-app_1 | at org.apache.tomcat.util.net.SecureNioChannel.handshake(SecureNioChannel.java:213) ~[tomcat-embed-core-10.1.15.jar!/:na] springboot-app_1 | at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1719) ~[tomcat-embed-core-10.1.15.jar!/:na] springboot-app_1 | at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:52) ~[tomcat-embed-core-10.1.15.jar!/:na] springboot-app_1 | at org.apache.tomcat.util.threads.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1191) ~[tomcat-embed-core-10.1.15.jar!/:na] springboot-app_1 | at org.apache.tomcat.util.threads.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:659) ~[tomcat-embed-core-10.1.15.jar!/:na] springboot-app_1 | at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) ~[tomcat-embed-core-10.1.15.jar!/:na] springboot-app_1 | at java.base/java.lang.Thread.run(Thread.java:833) ~[na:na] springboot-app_1 | springboot-app_1 | 2023-12-11T07:44:03.709Z DEBUG 1 --- [nio-8080-exec-8] o.apache.coyote.http11.Http11Processor : Socket: [org.apache.tomcat.util.net.NioEndpoint$NioSocketWrapper@39a4e37d:org.apache.tomcat.util.net.SecureNioChannel@6809af8c:java.nio.channels.SocketChannel[connected local=/172.18.0.3:8080 remote=/23.6.34.54:61692]], Status in: [CONNECT_FAIL], State out: [CLOSED]

I still dont know why it should fail tho, because my website says to have a valid tls certificate:

Answer 1

So turns out I was still using a selfsigned certificate on my backend app, that was accepted by postman, but refused by chrome. Will change that to a Lets encrypt certificate.