ask for xss approval before loading remote content

2 files changed, 78 insertions, 38 deletions

diff --git a/web/dashboard.js b/web/dashboard.js
index 56196cfc3e..fb484f275d 100644
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -168,20 +168,20 @@ var NETDATA = window.NETDATA || {};
 
         checkOptional: function(name, obj, ignore_regex) {
             if(this.enabled === true) {
-                console.log('XSS: checking optional "' + name + '"...');
+                //console.log('XSS: checking optional "' + name + '"...');
                 return this.object(name, obj, ignore_regex);
             }
             return obj;
         },
 
         checkAlways: function(name, obj, ignore_regex) {
-            console.log('XSS: checking always "' + name + '"...');
+            //console.log('XSS: checking always "' + name + '"...');
             return this.object(name, obj, ignore_regex);
         },
 
         checkData: function(name, obj, ignore_regex) {
             if(this.enabled_for_data === true) {
-                console.log('XSS: checking data "' + name + '"...');
+                //console.log('XSS: checking data "' + name + '"...');
                 return this.object(name, obj, ignore_regex);
             }
             return obj;
diff --git a/web/index.html b/web/index.html
index a0d894bfe8..f0d50cf3b5 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2812,32 +2812,78 @@
             }
         }
 
+        // an object to keep initilization configuration
+        // needed due to the async nature of the XSS modal
+        var initializeConfig = {
+            url: null,
+            custom_info: true,
+        };
+
+        function loadCustomDashboardInfo(url, callback) {
+            loadJs(url, function () {
+                $.extend(true, netdataDashboard, customDashboard);
+                callback();
+            });
+        }
+
+        function initializeChartsAndCustomInfo() {
+            NETDATA.alarms.callback = alarmsCallback;
+
+            // download all the charts the server knows
+            NETDATA.chartRegistry.downloadAll(initializeConfig.url, function(data) {
+                if(data !== null) {
+                    if (initializeConfig.custom_info === true && typeof data.custom_info !== 'undefined' && data.custom_info !== "" && netdataSnapshotData === null) {
+                        //console.log('loading custom dashboard decorations from server ' + initializeConfig.url);
+                        loadCustomDashboardInfo(NETDATA.serverDefault + data.custom_info, function () {
+                            initializeDynamicDashboardWithData(data);
+                        });
+                    }
+                    else {
+                        //console.log('not loading custom dashboard decorations from server ' + initializeConfig.url);
+                        initializeDynamicDashboardWithData(data);
+                    }
+                }
+            });
+        }
+
+        function xssModalDisableXss() {
+            //console.log('disabling xss checks');
+            NETDATA.xss.enabled = false;
+            NETDATA.xss.enabled_for_data = false;
+            initializeConfig.custom_info = true;
+            initializeChartsAndCustomInfo();
+            return false;
+        }
+
+        function xssModalKeepXss() {
+            //console.log('keeping xss checks');
+            NETDATA.xss.enabled = true;
+            NETDATA.xss.enabled_for_data = true;
+            initializeConfig.custom_info = false;
+            initializeChartsAndCustomInfo();
+            return false;
+        }
+
         function initializeDynamicDashboard(netdata_url) {
             if(typeof netdata_url === 'undefined' || netdata_url === null)
                 netdata_url = NETDATA.serverDefault;
 
+            initializeConfig.url = netdata_url;
+
             // initialize clickable alarms
             NETDATA.alarms.chart_div_offset = -50;
             NETDATA.alarms.chart_div_id_prefix = 'chart_';
             NETDATA.alarms.chart_div_animation_duration = 0;
 
             NETDATA.pause(function() {
-                NETDATA.alarms.callback = alarmsCallback;
-
-                // download all the charts the server knows
-                NETDATA.chartRegistry.downloadAll(netdata_url, function(data) {
-                    if(data !== null) {
-                        if(typeof data.custom_info !== 'undefined' && data.custom_info !== "" && netdataSnapshotData === null) {
-                            loadJs(NETDATA.serverDefault + data.custom_info, function () {
-                                $.extend(true, netdataDashboard, customDashboard);
-                                initializeDynamicDashboardWithData(data);
-                            });
-                        }
-                        else {
-                            initializeDynamicDashboardWithData(data);
-                        }
-                    }
-                });
+                if(typeof netdataCheckXSS !== 'undefined' && netdataCheckXSS === true) {
+                    //$("#loadOverlay").css("display","none");
+                    document.getElementById('netdataXssModalServer').innerText = initializeConfig.url;
+                    $('#xssModal').modal('show');
+                }
+                else {
+                    initializeChartsAndCustomInfo();
+                }
             });
         }
 
@@ -3276,8 +3322,8 @@
                     netdataCheckXSS = false; // disable the modal - this does not affect XSS checks, since dashboard.js is already loaded
                     NETDATA.xss.enabled = true;             // we should not do any remote requests, but if we do, check them
                     NETDATA.xss.enabled_for_data = true;    // check also snapshot data - that have been excluded from the initial check, due to compression
-                    initializeDynamicDashboard();
                     loadSnapshotPreflightEmpty();
+                    initializeDynamicDashboard();
                 });
             });
         };
@@ -4323,13 +4369,6 @@
                 NETDATA.globalPanAndZoom.setMaster(NETDATA.options.targets[0], netdataSnapshotData.after_ms, netdataSnapshotData.before_ms);
             }
 
-            if(typeof netdataCheckXSS !== 'undefined' && netdataCheckXSS === true) {
-                setTimeout(function() {
-                    document.getElementById('netdataXssModalServer').innerText = netdataServer;
-                    $('#xssModal').modal('show');
-                }, 1000);
-            }
-
             // var netdataEnded = performance.now();
             // console.log('start up time: ' + (netdataEnded - netdataStarted).toString() + ' ms');
         }
@@ -4591,34 +4630,35 @@
         </div>
     </div>
 
-    <div class="modal fade" id="xssModal" tabindex="-1" role="dialog" aria-labelledby="xssModalLabel">
+    <div class="modal fade" id="xssModal" tabindex="-1" role="dialog" aria-labelledby="xssModalLabel" data-keyboard="false" data-backdrop="static" style="z-index: 3000">
         <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title" id="xssModalLabel">XSS Protection</h4>
                 </div>
                 <div class="modal-body">
                     <p>
-                        This dashboard is now rendering data of server:
+                        This dashboard is about to render data from server:
                     </p>
                     <p style="font-size: 1.25em;">
                         <code id="netdataXssModalServer"></code>
                     </p>
                     <p>
-                        To protect your privacy, the dashboard is <b>checking all data transferred</b> for cross site scripting (XSS).
-                        This is CPU intensive, so your browser might be a bit slower.
+                        To protect your privacy, the dashboard will <b>check all data transferred</b> for cross site scripting (XSS).
+                        <br/>This is CPU intensive, so your browser might be a bit slower.
                     </p>
                     <p>
-                        If you <b>trust</b> the remote server, you can disable XSS protection, to speed it up.
-                        <br/>
-                        If you <b>don't trust</b> the remote server, you better keep it on. The dashboard will be a bit slower,
-                        but better be safe, than sorry...
+                        If you <b>trust</b> the remote server, you can disable XSS protection.<br/>
+                        In this case, any remote dashboard decoration code (javascript) will also run.
+                    </p>
+                    <p>
+                        If you <b>don't trust</b> the remote server, you should keep the protection on.<br/>
+                        The dashboard will run slower and remote dashboard decoration code will not run, but better be safe than sorry...
                     </p>
                 </div>
                 <div class="modal-footer">
-                    <a href="#" onclick="NETDATA.xss.enabled = true; NETDATA.xss.enabled_for_data = true; return false;" type="button" class="btn btn-success" data-dismiss="modal">Keep protecting me</a>
-                    <a href="#" onclick="NETDATA.xss.enabled = false; NETDATA.xss.enabled_for_data = false; return false;" type="button" class="btn btn-danger" data-dismiss="modal">I don't need this, the server is mine</a>
+                    <a href="#" onclick="return xssModalKeepXss();" type="button" class="btn btn-success" data-dismiss="modal">Keep protecting me</a>
+                    <a href="#" onclick="return xssModalDisableXss();" type="button" class="btn btn-danger" data-dismiss="modal">I don't need this, the server is mine</a>
                 </div>
             </div>
         </div>