From c386375e53f06d160219b7181166a508dde065f6 Mon Sep 17 00:00:00 2001 From: Franklyn Date: Tue, 15 Sep 2020 07:33:26 +0100 Subject: [PATCH] Support mainsail through an SSL proxy I like to run all my web services proxied through a single internet-accessible server, secured through SSL and authenticated against a single proxy server (nginx, in my case) I found that mainsail hardcoded ws:// and many http:// addresses, so I've updated them to detect ws:// vs ws:///, and just use the protocol agnostic // prefix, which then sends the request over the same protocol the page is loaded under, either http or https. Now i've got a nice SSL secured but publicly accessible URL for remote printer monitoring --- src/components/panels/Settings/ConfigFilesPanel.vue | 10 +++++----- src/components/panels/Settings/SystemPanel.vue | 4 ++-- src/main.js | 5 +++-- src/pages/Files.vue | 6 +++--- src/store/actions.js | 4 ++-- 5 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/panels/Settings/ConfigFilesPanel.vue b/src/components/panels/Settings/ConfigFilesPanel.vue index f782bdfc..d5fbc48e 100644 --- a/src/components/panels/Settings/ConfigFilesPanel.vue +++ b/src/components/panels/Settings/ConfigFilesPanel.vue @@ -320,7 +320,7 @@ this.editor.sourcecode = ""; this.editor.item = item; - let url = 'http://'+this.hostname+':'+this.port+'/server/files'+this.currentPath+'/'+item.filename+'?time='+Date.now(); + let url = '//'+this.hostname+':'+this.port+'/server/files'+this.currentPath+'/'+item.filename+'?time='+Date.now(); fetch(url, { cache: "no-cache" }).then(res => res.text()).then(file => { this.editor.sourcecode = file; this.editor.show = true; @@ -345,7 +345,7 @@ formData.append('root', 'config'); if(this.currentPath.length > 7) formData.append('path', this.currentPath.substring(8)); - axios.post('http://' + this.hostname + ':' + this.port + '/server/files/upload', + axios.post('//' + this.hostname + ':' + this.port + '/server/files/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } } @@ -371,7 +371,7 @@ let filename = (this.currentPath+"/"+this.contextMenu.item.filename); let link = document.createElement("a"); link.download = name; - link.href = 'http://' + this.hostname + ':' + this.port + '/server/files/' + filename; + link.href = '//' + this.hostname + ':' + this.port + '/server/files/' + filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); @@ -399,7 +399,7 @@ formData.append('root', 'config'); if(this.currentPath.length > 7) formData.append('path', this.currentPath.substring(8)); - axios.post('http://' + this.hostname + ':' + this.port + '/server/files/upload', + axios.post('//' + this.hostname + ':' + this.port + '/server/files/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } } @@ -425,7 +425,7 @@ removeFile() { let filename = (this.currentPath+"/"+this.contextMenu.item.filename); axios.delete( - 'http://'+ this.hostname + ':' + this.port +'/server/files/'+filename + '//'+ this.hostname + ':' + this.port +'/server/files/'+filename ).then((result) => { this.$toast.success(result.data.result+" successfully deleted."); }).catch(() => { diff --git a/src/components/panels/Settings/SystemPanel.vue b/src/components/panels/Settings/SystemPanel.vue index bf8abbc1..e870cb59 100644 --- a/src/components/panels/Settings/SystemPanel.vue +++ b/src/components/panels/Settings/SystemPanel.vue @@ -8,8 +8,8 @@ -
mdi-downloadKlipper Log
-
mdi-downloadMoonraker Log
+
mdi-downloadKlipper Log
+
mdi-downloadMoonraker Log
mdi-cachedRestart
mdi-cachedFW Restart
mdi-cachedHost Reboot
diff --git a/src/main.js b/src/main.js index c194e2cc..6e68813c 100644 --- a/src/main.js +++ b/src/main.js @@ -24,7 +24,8 @@ fetch('/config.json') .then(file => { store.commit('setSettings', file); - const socketClient = new WebSocketClient('ws://' + store.state.socket.hostname + ':' + store.state.socket.port + '/websocket', { + const websocketProtocol = document.location.protocol === 'https:' ? 'wss://' : 'ws://'; + const socketClient = new WebSocketClient(websocketProtocol + store.state.socket.hostname + ':' + store.state.socket.port + '/websocket', { store: store, reconnectEnabled: true, reconnectInterval: store.state.socket.reconnectInterval, @@ -45,4 +46,4 @@ fetch('/config.json') p.appendChild(content); document.getElementById('app').append(p); window.console.error('Error:', error); -}); \ No newline at end of file +}); diff --git a/src/pages/Files.vue b/src/pages/Files.vue index ea9a2eaf..26266534 100644 --- a/src/pages/Files.vue +++ b/src/pages/Files.vue @@ -330,7 +330,7 @@ formData.append('file', file, (this.currentPath+"/"+filename).substring(7)); this.$store.commit('setLoading', { name: 'loadingGcodeUpload' }); - axios.post('http://' + this.hostname + ':' + this.port + '/server/files/upload', + axios.post('//' + this.hostname + ':' + this.port + '/server/files/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } } @@ -404,7 +404,7 @@ let filename = (this.currentPath+"/"+this.contextMenu.item.filename); let link = document.createElement("a"); link.download = name; - link.href = 'http://' + this.hostname + ':' + this.port + '/server/files/' + encodeURI(filename); + link.href = '//' + this.hostname + ':' + this.port + '/server/files/' + encodeURI(filename); document.body.appendChild(link); link.click(); document.body.removeChild(link); @@ -436,7 +436,7 @@ removeFile() { let filename = (this.currentPath+"/"+this.contextMenu.item.filename); axios.delete( - 'http://'+ this.hostname + ':' + this.port +'/server/files/' + encodeURI(filename) + '//'+ this.hostname + ':' + this.port +'/server/files/' + encodeURI(filename) ).then((result) => { this.$toast.success(result.data.result+" successfully deleted."); }).catch(() => { diff --git a/src/store/actions.js b/src/store/actions.js index 062cdea1..6e6de4d8 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -79,7 +79,7 @@ export default { getDirectoryRoot({ commit }, data) { if (data.files && data.files.filter((file) => file.filename === "gui.json")) { - fetch('http://'+store.state.socket.hostname+':'+store.state.socket.port+'/server/files/gcodes/gui.json?time='+Date.now()) + fetch('//'+store.state.socket.hostname+':'+store.state.socket.port+'/server/files/gcodes/gui.json?time='+Date.now()) .then(res => res.json()).then(file => { commit('setSettings', file); }); @@ -93,7 +93,7 @@ export default { let formData = new FormData(); formData.append('file', file); - axios.post('http://' + state.socket.hostname + ':' + state.socket.port + '/server/files/upload', + axios.post('//' + state.socket.hostname + ':' + state.socket.port + '/server/files/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }