diff --git a/lib/esbonio/changes/896.fix.md b/lib/esbonio/changes/896.fix.md
new file mode 100644
index 000000000..744e1347f
--- /dev/null
+++ b/lib/esbonio/changes/896.fix.md
@@ -0,0 +1 @@
+The websocket connection uri used by the preview should now correctly pick between `ws://` and `wss://` based on the window's origin
diff --git a/lib/esbonio/esbonio/sphinx_agent/static/webview.js b/lib/esbonio/esbonio/sphinx_agent/static/webview.js
index c659f530b..c0ed8edfc 100644
--- a/lib/esbonio/esbonio/sphinx_agent/static/webview.js
+++ b/lib/esbonio/esbonio/sphinx_agent/static/webview.js
@@ -216,13 +216,14 @@ function renderLineMarkers() {
     document.body.append(markerStyle)
 }
 
-const host = window.location.hostname;
 const queryString = window.location.search;
 const queryParams = new URLSearchParams(queryString);
-const ws = parseInt(queryParams.get("ws"));
 const showMarkers = queryParams.has("show-markers")
 
-const wsServer = `ws://${host}:${ws}`
+const wsScheme = (window.location.protocol === 'https:') ? 'wss' : 'ws'
+const wsHost = window.location.hostname;
+const wsPort = parseInt(queryParams.get("ws"));
+const wsServer = `${wsScheme}://${wsHost}:${wsPort}`
 console.debug(`Connecting to '${wsServer}'...`)
 
 const socket = new WebSocket(wsServer);
@@ -242,7 +243,7 @@ const handlers = {
         console.debug("Reloading page...")
         window.location.reload()
     },
-    "view/scroll": (params) => {scrollViewTo(params.uri, params.line)}
+    "view/scroll": (params) => { scrollViewTo(params.uri, params.line) }
 }
 
 function handle(message) {
@@ -291,7 +292,7 @@ function main() {
         renderLineMarkers()
     }
 
-    rewriteInternalLinks(ws)
+    rewriteInternalLinks(wsPort)
 
     // Are we in an <iframe>?
     if (window.parent !== window.top) {