SSL for web socket connection

3 files changed, 26 insertions, 11 deletions

diff --git a/webui/src/App.js b/webui/src/App.js
index bfe1d6b..fd9e711 100644
--- a/webui/src/App.js
+++ b/webui/src/App.js
@@ -4,15 +4,16 @@ import Timeline from './Timeline';
 import Navigation from './Navigation';
 
 class App extends Component {
-  constructor(props) {
-    super(props);
+  render() {
 
-    this.state = {
-      events: []
-    };
-  }
+    if(window.location.protocol !== "https:" && process.env.NODE_ENV !== 'development') {
+      return (
+        <div className="App">
+          <div className="insecure-scheme">The Web UI is not available over HTTP. To use it; enable SSL, restart GAD and browse to this page using HTTPS.</div>
+        </div>
+      );
+    }
 
-  render() {
     return (
       <div className="App">
         <Navigation />
diff --git a/webui/src/App.scss b/webui/src/App.scss
index ce141ed..30ff87a 100644
--- a/webui/src/App.scss
+++ b/webui/src/App.scss
@@ -11,4 +11,16 @@
         width: 100%;
         max-width: 450px;
     }
+
+    .insecure-scheme {
+        width: 100%;
+        text-align: center;
+        margin: 0 auto;
+        font-family: 'Lato', sans-serif;
+        font-weight: 300;
+        position: absolute;
+        top: 40%;
+        margin-top: -1rem;
+        
+    }
 }
diff --git a/webui/src/Timeline.js b/webui/src/Timeline.js
index 80c9d98..7f25093 100644
--- a/webui/src/Timeline.js
+++ b/webui/src/Timeline.js
@@ -20,12 +20,11 @@ class Timeline extends Component {
     this.wsSocket = null;
     this.wsIsOpen = false;
     this.wsIsRecovering = false;
-    this.wsPort = 9000;
+    this.wsPort = undefined;
   }
 
   componentDidMount() {
     this.fetchEventList();
-    this.initWebsocketConnection();
     this.initUserNotification();
   }
 
@@ -87,7 +86,7 @@ class Timeline extends Component {
     var url = '/api/status';
 
     if (process.env.NODE_ENV === 'development') {
-      url = 'http://10.0.0.1:8001/api/status';
+      url = 'https://10.0.0.1:8001/api/status';
     }
 
     axios.get(url)
@@ -95,6 +94,9 @@ class Timeline extends Component {
         const events = res.data.events.map(obj =>  new Event(obj));
         this.wsPort = res.data['web-socket-port'];
         this.setState({ events: events, loaded: true });
+
+        // Once we get to know the web socket port, we can make the web socket connection
+        this.initWebsocketConnection();
       })
       .catch(err => {
         this.setState({loaded: false});
@@ -179,7 +181,7 @@ class Timeline extends Component {
 
   getWebsocketURI() {
     if (process.env.NODE_ENV === "development") {
-      return "ws://10.0.0.1:" + this.wsPort;
+      return "wss://10.0.0.1:" + this.wsPort;
     }
     var scheme = window.location.protocol === "https" ? "wss" : "ws";
     return scheme + "://" + window.location.hostname + ":" + this.wsPort;