Fix app header template rendering in Safari

Add 'connect-src' directive to Content Security Policy to allow
WebSocket connection.
Added additional error handling when Websocket connection
refused.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I83cfaa0b314099aea57ee7f2be75a0658462b2a9

2 files changed, 47 insertions, 40 deletions

diff --git a/app/common/directives/app-header.js b/app/common/directives/app-header.js
index 9e10619..98d210f 100644
--- a/app/common/directives/app-header.js
+++ b/app/common/directives/app-header.js
@@ -15,48 +15,54 @@ window.angular && (function(angular) {
               $rootScope, $scope, dataService, userModel, $location, $route) {
             $scope.dataService = dataService;
 
-            // Create a secure websocket with URL as /subscribe
-            // TODO: Need to put in a generic APIUtils to avoid duplicate
-            // controller
-            var ws =
-                new WebSocket('wss://' + dataService.server_id + '/subscribe');
-
-            // Specify the required event details as JSON dictionary
-            var data = JSON.stringify({
-              'paths': ['/xyz/openbmc_project/state/host0'],
-              'interfaces': ['xyz.openbmc_project.State.Host']
-            });
-
-            // Send the JSON dictionary data to host
-            ws.onopen = function() {
-              ws.send(data);
-              console.log('host0 ws opened');
-            };
+            try {
+              // Create a secure websocket with URL as /subscribe
+              // TODO: Need to put in a generic APIUtils to avoid duplicate
+              // controller
+              var ws = new WebSocket(
+                  'wss://' + dataService.server_id + '/subscribe');
+            } catch (error) {
+              console.log('WebSocket', error);
+            }
 
-            // Close the web socket
-            ws.onclose = function() {
-              console.log('host0 ws closed');
-            };
+            if (ws !== undefined) {
+              // Specify the required event details as JSON dictionary
+              var data = JSON.stringify({
+                'paths': ['/xyz/openbmc_project/state/host0'],
+                'interfaces': ['xyz.openbmc_project.State.Host']
+              });
 
-            // Websocket event handling function which catches the
-            // current host state
-            ws.onmessage = function(evt) {
-              // Parse the response (JSON dictionary data)
-              var content = JSON.parse(evt.data);
-
-              // Fetch the current server power state
-              if (content.hasOwnProperty('properties') &&
-                  content['properties'].hasOwnProperty('CurrentHostState')) {
-                // Refresh the host state and status
-                // TODO: As of now not using the current host state
-                // value for updating the data Service state rather
-                // using it to detect the command line state change.
-                // Tried different methods like creating a separate
-                // function, adding ws under $scope etc.. but auto
-                // refresh is not happening.
-                $scope.loadServerStatus();
-              }
-            };
+              // Send the JSON dictionary data to host
+              ws.onopen = function() {
+                ws.send(data);
+                console.log('host0 ws opened');
+              };
+
+              // Close the web socket
+              ws.onclose = function() {
+                console.log('host0 ws closed');
+              };
+
+              // Websocket event handling function which catches the
+              // current host state
+              ws.onmessage = function(evt) {
+                // Parse the response (JSON dictionary data)
+                var content = JSON.parse(evt.data);
+
+                // Fetch the current server power state
+                if (content.hasOwnProperty('properties') &&
+                    content['properties'].hasOwnProperty('CurrentHostState')) {
+                  // Refresh the host state and status
+                  // TODO: As of now not using the current host state
+                  // value for updating the data Service state rather
+                  // using it to detect the command line state change.
+                  // Tried different methods like creating a separate
+                  // function, adding ws under $scope etc.. but auto
+                  // refresh is not happening.
+                  $scope.loadServerStatus();
+                }
+              };
+            }
 
             $scope.loadServerHealth = function() {
               APIUtils.getLogs().then(function(result) {
diff --git a/webpack.config.js b/webpack.config.js
index be579cb..28576d5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -136,6 +136,7 @@ module.exports = (env, options) => {
       'object-src': '\'none\'',
       'script-src': ['\'self\''],
       'style-src': ['\'self\''],
+      'connect-src': ['\'self\''],
       // KVM requires image buffers from data: payloads, so allow that in
       // img-src
       // https://stackoverflow.com/questions/18447970/content-security-policy-data-not-working-for-base64-images-in-chrome-28