improve xss security

lib/shared/Configurator.js

@@ -245,7 +245,7 @@ class Configurator {
   _makeHeader(name) {
     let div = document.createElement('div');
     div.className = 'vis-configuration vis-config-header';
-    div.innerHTML = name;
+    div.innerHTML = util.xss(name);
     this._makeItem([],div);
   }
 
@@ -262,10 +262,10 @@ class Configurator {
     let div = document.createElement('div');
     div.className = 'vis-configuration vis-config-label vis-config-s' + path.length;
     if (objectLabel === true) {
-      div.innerHTML = '<i><b>' + name + ':</b></i>';
+      div.innerHTML = util.xss('<i><b>' + name + ':</b></i>');
     }
     else {
-      div.innerHTML = name + ':';
+      div.innerHTML = util.xss(name + ':');
     }
     return div;
   }
@@ -407,7 +407,7 @@ class Configurator {
       let div = document.createElement("div");
       div.id = "vis-configuration-popup";
       div.className = "vis-configuration-popup";
-      div.innerHTML = string;
+      div.innerHTML = util.xss(string);
       div.onclick = () => {this._removePopup()};
       this.popupCounter += 1;
       this.popupDiv = {html:div, index:index};

lib/shared/Popup.js

@@ -1,3 +1,4 @@
+import util from '../util';
 import './tooltip.css';
 
 /**
@@ -42,7 +43,7 @@ class Popup {
       this.frame.appendChild(content);
     }
     else {
-      this.frame.innerHTML = content; // string containing text or HTML
+      this.frame.innerHTML = util.xss(content); // string containing text or HTML
     }
   }
 

lib/timeline/Timeline.js

@@ -96,7 +96,7 @@ export default class Timeline extends Core {
           loadingScreenFragment.appendChild(loadingScreen);
         }
         else if (loadingScreen != undefined) {
-          loadingScreenFragment.innerHTML = loadingScreen;
+          loadingScreenFragment.innerHTML = util.xss(loadingScreen);
         }
       }
     }

lib/timeline/component/CustomTime.js

@@ -205,7 +205,7 @@ class CustomTime extends Component {
   setCustomMarker(title, editable) {
     const marker = document.createElement('div');
     marker.className = `vis-custom-time-marker`;
-    marker.innerHTML = title;
+    marker.innerHTML = util.xss(title);
     marker.style.position = 'absolute';
 
     if (editable) {

lib/timeline/component/DataAxis.js

@@ -1,4 +1,5 @@
-import { v4 as randomUUID } from "uuid";import util from '../../util';
+import { v4 as randomUUID } from "uuid";
+import util from '../../util';
 import * as DOMutil from '../../DOMutil';
 import Component from './Component';
 import DataScale from './DataScale';
@@ -504,7 +505,7 @@ class DataAxis extends Component {
     // reuse redundant label
     const label = DOMutil.getDOMElement('div', this.DOMelements.labels, this.dom.frame); //this.dom.redundant.labels.shift();
     label.className = className;
-    label.innerHTML = text;
+    label.innerHTML = util.xss(text);
     if (orientation === 'left') {
       label.style.left = `-${this.options.labelOffsetX}px`;
       label.style.textAlign = "right";
@@ -562,7 +563,7 @@ class DataAxis extends Component {
     if (this.options[orientation].title !== undefined && this.options[orientation].title.text !== undefined) {
       const title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
       title.className = `vis-y-axis vis-title vis-${orientation}`;
-      title.innerHTML = this.options[orientation].title.text;
+      title.innerHTML = util.xss(this.options[orientation].title.text);
 
       // Add style - if provided
       if (this.options[orientation].title.style !== undefined) {

lib/timeline/component/Group.js

@@ -178,9 +178,9 @@ class Group {
     } else if (content instanceof Object) {
       templateFunction(data, this.dom.inner);
     } else if (content !== undefined && content !== null) {
-      this.dom.inner.innerHTML = content;
+      this.dom.inner.innerHTML = util.xss(content);
     } else {
-      this.dom.inner.innerHTML = this.groupId || ''; // groupId can be null
+      this.dom.inner.innerHTML = util.xss(this.groupId || ''); // groupId can be null
     }
 
     // update title

lib/timeline/component/Legend.js

@@ -185,7 +185,7 @@ Legend.prototype.redraw = function() {
         content += this.groups[groupId].content + '<br />';
       }
     }
-    this.dom.textArea.innerHTML = content;
+    this.dom.textArea.innerHTML = util.xss(content);
     this.dom.textArea.style.lineHeight = ((0.75 * this.options.iconSize) + this.options.iconSpacing) + 'px';
   }
 };

lib/timeline/component/TimeAxis.js

@@ -339,7 +339,7 @@ class TimeAxis extends Component {
       this.dom.foreground.appendChild(label);
     }
     this.dom.minorTexts.push(label);
-    label.innerHTML = text;
+    label.innerHTML = util.xss(text);
 
 
     let y = (orientation == 'top') ? this.props.majorLabelHeight : 0;
@@ -372,7 +372,7 @@ class TimeAxis extends Component {
       this.dom.foreground.appendChild(label);
     }
 
-    label.childNodes[0].innerHTML = text;
+    label.childNodes[0].innerHTML = util.xss(text);
     label.className = `vis-text vis-major ${className}`;
     //label.title = title; // TODO: this is a heavy operation
 

lib/timeline/component/item/Item.js

@@ -366,7 +366,7 @@ class Item {
           content += `<br> end: ${moment(this.data.end).format('MM/DD/YYYY hh:mm')}`;
         }
       }
-      this.dom.onItemUpdateTimeTooltip.innerHTML = content;
+      this.dom.onItemUpdateTimeTooltip.innerHTML = util.xss(content);
     }
   }
 
@@ -397,7 +397,7 @@ class Item {
 
     if (this.options.visibleFrameTemplate) {
       visibleFrameTemplateFunction = this.options.visibleFrameTemplate.bind(this);
-      itemVisibleFrameContent = visibleFrameTemplateFunction(itemData, itemVisibleFrameContentElement);
+      itemVisibleFrameContent = util.xss(visibleFrameTemplateFunction(itemData, itemVisibleFrameContentElement));
     } else {
       itemVisibleFrameContent = '';
     }
@@ -414,7 +414,7 @@ class Item {
             itemVisibleFrameContentElement.appendChild(itemVisibleFrameContent);
           }
           else if (itemVisibleFrameContent != undefined) {
-            itemVisibleFrameContentElement.innerHTML = itemVisibleFrameContent;
+            itemVisibleFrameContentElement.innerHTML = util.xss(itemVisibleFrameContent);
           }
           else {
             if (!(this.data.type == 'background' && this.data.content === undefined)) {
@@ -445,7 +445,7 @@ class Item {
           element.appendChild(content);
         }
         else if (content != undefined) {
-          element.innerHTML = content;
+          element.innerHTML = util.xss(content);
         }
         else {
           if (!(this.data.type == 'background' && this.data.content === undefined)) {

lib/util.js

@@ -6,6 +6,7 @@ import { getType, isNumber, isString } from "vis-util/esnext";
 import { DataSet, createNewDataPipeFrom } from "vis-data/esnext";
 
 import moment from "moment";
+import xss  from 'xss';
 
 // parse ASP.Net Date pattern,
 // for example '/Date(1198908717056)/' or '/Date(1198908717056-0700)/'
@@ -226,5 +227,6 @@ export function typeCoerceDataSet(
 
 export default {
   ...util,
-  convert
+  convert,
+  xss
 };

package.json

@@ -122,7 +122,8 @@
     "uuid": "7.0.3",
     "vis-data": "7.1.1",
     "vis-dev-utils": "2.8.35",
-    "vis-util": "4.3.4"
+    "vis-util": "4.3.4",
+    "xss": "^1.0.8"
   },
   "collective": {
     "type": "opencollective",
@@ -259,5 +260,6 @@
     "synthomat <info@sublink.de>",
     "thomasbarone <thomas.barone@spectraqest.com>",
     "unknown <schneidersb@NB1207305.koehl.eu>"
-  ]
+  ],
+  "dependencies": {}
 }