fix(xss): don't use innerHTML to set text (#1242)

We had a lot of instances of innerHTML that were simply setting text, in quite a few cases parsing it as HTML was even counter productive as it could theoreticly result in syntax errors and corrupted output (e.g. the output of JSON.stringify definitely shouldn't be parsed as HTML). There is only one occurence of innerHTML left and that is for the node/edge title as the docs clearly state that any string passed will be parsed as HTML.
visjs · Dec 27, 2020 · cda306a · cda306a
1 parent 5a183d7
commit cda306a
Show file tree

Hide file tree

Showing 24 changed files with 229 additions and 108 deletions.
diff --git a/cypress/pages/pollution.html b/cypress/pages/pollution.html
@@ -70,7 +70,9 @@
           );
 
           const root = document.getElementById(id);
-          root.innerText = "";
+          while (root.firstChild) {
+            root.removeChild(root.firstChild);
+          }
 
           const table = document.createElement("table");
           ["added", "changed", "missing"].forEach((key) => {

diff --git a/docs-kr/network/index.html b/docs-kr/network/index.html
@@ -68,12 +68,12 @@
     <script>
       function toggleGettingStarted(aThis) {
         var gettingStartedDiv = document.getElementById("gettingStarted");
-        if (aThis.innerHTML.indexOf("Show") !== -1) {
+        if (aThis.innerText.indexOf("Show") !== -1) {
           gettingStartedDiv.className = "";
-          aThis.innerHTML = "Hide the getting started again.";
+          aThis.innerText = "Hide the getting started again.";
         } else {
           gettingStartedDiv.className = "hidden";
-          aThis.innerHTML = "Show the getting started!";
+          aThis.innerText = "Show the getting started!";
         }
       }
     </script>

diff --git a/docs/network/index.html b/docs/network/index.html
@@ -68,12 +68,12 @@
     <script>
       function toggleGettingStarted(aThis) {
         var gettingStartedDiv = document.getElementById("gettingStarted");
-        if (aThis.innerHTML.indexOf("Show") !== -1) {
+        if (aThis.innerText.indexOf("Show") !== -1) {
           gettingStartedDiv.className = "";
-          aThis.innerHTML = "Hide the getting started again.";
+          aThis.innerText = "Hide the getting started again.";
         } else {
           gettingStartedDiv.className = "hidden";
-          aThis.innerHTML = "Show the getting started!";
+          aThis.innerText = "Show the getting started!";
         }
       }
     </script>

diff --git a/examples/network/data/dynamicData.html b/examples/network/data/dynamicData.html
@@ -130,7 +130,7 @@
         // create an array with nodes
         nodes = new vis.DataSet();
         nodes.on("*", function () {
-          document.getElementById("nodes").innerHTML = JSON.stringify(
+          document.getElementById("nodes").innerText = JSON.stringify(
             nodes.get(),
             null,
             4
@@ -147,7 +147,7 @@
         // create an array with edges
         edges = new vis.DataSet();
         edges.on("*", function () {
-          document.getElementById("edges").innerHTML = JSON.stringify(
+          document.getElementById("edges").innerText = JSON.stringify(
             edges.get(),
             null,
             4

diff --git a/examples/network/data/importingFromGephi.html b/examples/network/data/importingFromGephi.html
@@ -149,7 +149,7 @@ <h4>Node Content:</h4>
       network.on("click", function (params) {
         if (params.nodes.length > 0) {
           var data = nodes.get(params.nodes[0]); // get the data from selected node
-          nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
+          nodeContent.innerText = JSON.stringify(data, undefined, 3); // show the data in the div
         }
       });
 
@@ -179,7 +179,7 @@ <h4>Node Content:</h4>
         edges.add(parsed.edges);
 
         var data = nodes.get(2); // get the data from node 2 as example
-        nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
+        nodeContent.innerText = JSON.stringify(data, undefined, 3); // show the data in the div
         network.fit(); // zoom to fit
       }
     </script>

diff --git a/examples/network/edgeStyles/arrowTypes.html b/examples/network/edgeStyles/arrowTypes.html
@@ -39,12 +39,18 @@
 
       // update list of arrow types in html body
       var nof_types = arrow_types.length;
-      var list_contents = [];
+      var mylist = document.getElementById("arrow_type_list");
+      while (mylist.firstChild) {
+        mylist.removeChild(mylist.firstChild);
+      }
       for (var i = 0; i < nof_types; i++) {
-        list_contents.push("<code>'" + arrow_types[i] + "'</code>");
+        if (i > 0) {
+          mylist.appendChild(document.createTextNode(", "));
+        }
+        const code = document.createElement("code");
+        code.innerText = arrow_types[i];
+        mylist.appendChild(code);
       }
-      var mylist = document.getElementById("arrow_type_list");
-      mylist.innerHTML = list_contents.join(", ");
 
       // create an array with nodes
       var node_attrs = new Array();

diff --git a/examples/network/events/interactionEvents.html b/examples/network/events/interactionEvents.html
@@ -23,7 +23,9 @@
     </p>
 
     <div id="mynetwork"></div>
-    <pre id="eventSpan"></pre>
+
+    <h2 id="eventSpanHeading"></h2>
+    <pre id="eventSpanContent"></pre>
 
     <script type="text/javascript">
       // create an array with nodes
@@ -61,23 +63,36 @@
 
       network.on("click", function (params) {
         params.event = "[original event]";
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>Click event:</h2>" + JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText = "Click event:";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
         console.log(
           "click event, getNodeAt returns: " +
             this.getNodeAt(params.pointer.DOM)
         );
       });
       network.on("doubleClick", function (params) {
         params.event = "[original event]";
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>doubleClick event:</h2>" + JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText =
+          "doubleClick event:";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
       });
       network.on("oncontext", function (params) {
         params.event = "[original event]";
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>oncontext (right click) event:</h2>" +
-          JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText =
+          "oncontext (right click) event:";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
       });
       network.on("dragStart", function (params) {
         // There's no point in displaying this event on screen, it gets immediately overwritten
@@ -90,13 +105,23 @@
       });
       network.on("dragging", function (params) {
         params.event = "[original event]";
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>dragging event:</h2>" + JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText =
+          "dragging event:";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
       });
       network.on("dragEnd", function (params) {
         params.event = "[original event]";
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>dragEnd event:</h2>" + JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText =
+          "dragEnd event:";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
         console.log("dragEnd Event:", params);
         console.log(
           "dragEnd event, getNodeAt returns: " +
@@ -105,24 +130,41 @@
       });
       network.on("controlNodeDragging", function (params) {
         params.event = "[original event]";
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>control node dragging event:</h2>" +
-          JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText =
+          "control node dragging event:";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
       });
       network.on("controlNodeDragEnd", function (params) {
         params.event = "[original event]";
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>control node drag end event:</h2>" +
-          JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText =
+          "control node drag end event:";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
         console.log("controlNodeDragEnd Event:", params);
       });
       network.on("zoom", function (params) {
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>zoom event:</h2>" + JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText = "zoom event:";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
       });
       network.on("showPopup", function (params) {
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>showPopup event: </h2>" + JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText =
+          "showPopup event: ";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
       });
       network.on("hidePopup", function () {
         console.log("hidePopup Event");

diff --git a/examples/network/events/physicsEvents.html b/examples/network/events/physicsEvents.html
@@ -20,7 +20,10 @@
     <p>Create a simple network with some nodes and edges.</p>
 
     <div id="mynetwork"></div>
-    <pre id="eventSpan"></pre>
+
+    <h2 id="eventSpanHeading"></h2>
+    <pre id="eventSpanContent"></pre>
+
     <script type="text/javascript">
       // create an array with nodes
       var nodes = new vis.DataSet([
@@ -49,23 +52,34 @@
       var network = new vis.Network(container, data, options);
 
       network.on("startStabilizing", function (params) {
-        document.getElementById("eventSpan").innerHTML =
-          "<h3>Starting Stabilization</h3>";
+        document.getElementById("eventSpanHeading").innerText =
+          "Starting Stabilization";
+        document.getElementById("eventSpanContent").innerText = "";
         console.log("started");
       });
       network.on("stabilizationProgress", function (params) {
-        document.getElementById("eventSpan").innerHTML =
-          "<h3>Stabilization progress</h3>" + JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText =
+          "Stabilization progress";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
         console.log("progress:", params);
       });
       network.on("stabilizationIterationsDone", function (params) {
-        document.getElementById("eventSpan").innerHTML =
-          "<h3>Stabilization iterations complete</h3>";
+        document.getElementById("eventSpanHeading").innerText =
+          "Stabilization iterations complete";
+        document.getElementById("eventSpanContent").innerText = "";
         console.log("finished stabilization interations");
       });
       network.on("stabilized", function (params) {
-        document.getElementById("eventSpan").innerHTML =
-          "<h3>Stabilized!</h3>" + JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText = "Stabilized!";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
         console.log("stabilized!", params);
       });
     </script>

diff --git a/examples/network/exampleApplications/loadingBar.html b/examples/network/exampleApplications/loadingBar.html
@@ -498,11 +498,11 @@
           var width = Math.max(minWidth, maxWidth * widthFactor);
 
           document.getElementById("bar").style.width = width + "px";
-          document.getElementById("text").innerHTML =
+          document.getElementById("text").innerText =
             Math.round(widthFactor * 100) + "%";
         });
         network.once("stabilizationIterationsDone", function () {
-          document.getElementById("text").innerHTML = "100%";
+          document.getElementById("text").innerText = "100%";
           document.getElementById("bar").style.width = "496px";
           document.getElementById("loadingBar").style.opacity = 0;
           // really clean the dom element

diff --git a/examples/network/labels/labelAlignment.html b/examples/network/labels/labelAlignment.html
@@ -37,7 +37,9 @@
     </p>
 
     <div id="mynetwork"></div>
-    <pre id="eventSpan"></pre>
+
+    <h2 id="eventSpanHeading"></h2>
+    <pre id="eventSpanContent"></pre>
 
     <script type="text/javascript">
       // create an array with nodes
@@ -77,8 +79,12 @@
 
       network.on("click", function (params) {
         params.event = "[original event]";
-        document.getElementById("eventSpan").innerHTML =
-          "<h2>Click event:</h2>" + JSON.stringify(params, null, 4);
+        document.getElementById("eventSpanHeading").innerText = "Click event:";
+        document.getElementById("eventSpanContent").innerText = JSON.stringify(
+          params,
+          null,
+          4
+        );
       });
     </script>
   </body>

diff --git a/examples/network/layout/hierarchicalLayout.html b/examples/network/layout/hierarchicalLayout.html
@@ -58,7 +58,7 @@
 
         // add event listeners
         network.on("select", function (params) {
-          document.getElementById("selection").innerHTML =
+          document.getElementById("selection").innerText =
             "Selection: " + params.nodes;
         });
       }

diff --git a/examples/network/layout/hierarchicalLayoutOverlapAvoidance.html b/examples/network/layout/hierarchicalLayoutOverlapAvoidance.html
@@ -217,7 +217,7 @@ <h3>Hierarchical Layout Overlap Avoidance</h3>
 
         // add event listeners
         network.on("select", function (params) {
-          document.getElementById("selection").innerHTML =
+          document.getElementById("selection").innerText =
             "Selection: " + params.nodes;
         });
       }

diff --git a/examples/network/layout/hierarchicalLayoutUserdefined.html b/examples/network/layout/hierarchicalLayoutUserdefined.html
@@ -103,7 +103,7 @@
 
         // add event listeners
         network.on("select", function (params) {
-          document.getElementById("selection").innerHTML =
+          document.getElementById("selection").innerText =
             "Selection: " + params.nodes;
         });
       }