Mixed Content: The page at 'https://teleop.xyz/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://0.0.0.0:9090/'. This request has been blocked; this endpoint must be available over WSS.

[awesomebytes]

Hello,

Thanks for sharing this work! I was gonna give it a quick try and, for now, I'm unable to make it work.

I tried:

• Run a roscore
• Play rosbag in a loop
• Launch rosbridge (roslaunch rosbridge_server rosbridge_websocket.launch in ROS melodic).
• Copy-paste the default rosbridge websocket url ws://0.0.0.0:9090
• Choose the default /opt/ros/melodic/share/rviz/default.rviz rviz file
• Click Connect.

I got a red dot saying 'Error' on the top right, and the chromium developer console shows the following error: In text:

roslib.js:3258 Mixed Content: The page at 'https://teleop.xyz/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://0.0.0.0:9090/'. This request has been blocked; this endpoint must be available over WSS.
Ros.connect @ roslib.js:3258
(index):98 error DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at Ros.connect (https://teleop.xyz/static/js/roslib.js:3258:18)
    at new Ros (https://teleop.xyz/static/js/roslib.js:3236:10)
    at eval (webpack-internal:///138:23:18)
    at new Promise (<anonymous>)
    at TeleOp.connectRos (webpack-internal:///138:20:12)
    at TeleOp.start (webpack-internal:///138:49:16)
    at HTMLFormElement.startConnection (https://teleop.xyz/:95:15)

On firefox the error is different, but it's probably the same issue: error DOMException: The operation is insecure.

[awesomebytes]

I see that if I clone the repository and open index.html I can connect (green dot), however I haven't been able to visualize any data (tried some full-fledged complex Rviz configs and also a simple one with just a pointcloud and one with just an Image).

[sevenbitbyte]

Known issue, sadly requires you to either load the site without SSL OR run your bridge with an SSL cert.

http://teleop.xyz

https://mobile.twitter.com/nullagent/status/1452407008636784649

[sevenbitbyte]

Will keep the issue open as there may be a CORS setting I haven't found yet. But generally is looking like browsers no longer provide a way for the app to avoid the error when loaded in an SSL context.

[sevenbitbyte]

Ok found a great writeup on SSL workaround. @awesomebytes see below.

https://www.damirscorner.com/blog/posts/20210528-AllowingInsecureWebsocketConnections.html

So for the purposes of this project the options appear to be:

1. Visit the http version of the site, if your browser allows
2. Configure the websocket SSL exception setting for your browser
3. Make a valid SSL cert for your rosbridge