Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
a month ago

The secure websocket server is being rejected by the browser engine.

Summary of Issue

When attempting to connect to a WebSocket using a browser console (Chrome or Brave), an error message stating "Websocket connection failed" is received. However, the same WebSocket is operational when using wscat. The WebSocket URL is an Ngrok URL that is generated by running a server on a local host port and creating an HTTPS Ngrok URL to forward to that port. Despite verifying that the WebSocket URL works using wscat, the issue persists when attempting to connect to the WebSocket in the browser console. No detailed error message is provided in the browser, and replacing "https" with "wss" in the Ngrok URL did not resolve the issue.

Further Background

The WebSocket server is running on "ws://<some-id-address>:5000" which works in the browser. However, the aim is to test the app using a secure WebSocket server ("wss" instead of "ws"). To accomplish this, "ngrok http 5000" is run on another terminal, which generates a new URL, "https://abcd.ngrok-free.app/". This URL is used to create "wss://abcd.ngrok-free.app/" for the secure WebSocket server.

Request for Assistance

The reason why the browser console is unable to connect to the same URL as wscat is unclear, and the issue remains. Assistance in resolving this issue would be greatly appreciated as the present situation is still confusing.

Answers(2)
avatar
Vogi
a month ago
Verified Answer
Based on your description, it seems that the WebSocket server is running on "ws://<some-id-address>:5000" which works in the browser. However, the aim is to test the app using a secure WebSocket server ("wss" instead of "ws"). To accomplish this, "ngrok http 5000" is run on another terminal, which generates a new URL, "https://abcd.ngrok-free.app/". This URL is used to create "wss://abcd.ngrok-free.app/" for the secure WebSocket server. It's unclear why the browser console is unable to connect to the same URL as wscat. However, you can try the following steps to resolve this issue: 1. Ensure that your WebSocket server is running on a secure port (e.g., 443) and that it has a valid SSL certificate. 2. Verify that your WebSocket server is configured to accept secure connections. 3. Check if there are any firewalls or security software that may be blocking your connection. 4. Try using a different browser or device to connect to your WebSocket server. I hope this helps! Let me know if you have any other questions.

Sources

Websockets | ngrok documentationWebSocket connection failed errors after upgrade to Next.js 12 ... - Githubserver - Websocket connection fails - Stack OverflowBrowser engine refuses to connect to secure websocket serverHow to connect to websocket ws · Issue #593 · inconshreveable/ngrok
avatar
Tolerim
a month ago
The issue here is that you are trying to connect to a secure websocket server (wss://abcd.ngrok-free.app/) from an insecure origin (http://localhost or https://localhost). Browsers enforce a policy called Same-Origin Policy, which means that scripts running on a webpage can only access resources (including websockets) from the same origin. To fix this issue, you need to serve your webpage over HTTPS (not HTTP). This can be done by configuring your local development environment to use HTTPS, or by deploying your webpage to a web server with HTTPS enabled. Alternatively, you can use a proxy to forward the websocket traffic from a secure origin to your insecure origin. For example, you could run a Node.js app on your local machine that uses the ws library to connect to the secure websocket server, and then exposes a websocket server on an HTTPS endpoint that your webpage can connect to. In any case, you cannot connect to a secure websocket server from an insecure origin without some sort of intermediary.
;