Cross-site Scripting (XSS)

@@ -189,7 +189,7 @@ class Legend {
 
       let elLegendText = document.createElement('span')
       elLegendText.classList.add('apexcharts-legend-text')
-      elLegendText.innerHTML = Array.isArray(text) ? text.join(' ') : text
+      elLegendText.innerHTML = Array.isArray(text) ? Utils.sanitizeDom(text.join(' ')) : Utils.sanitizeDom(text)
 
       let textColor = w.config.legend.labels.useSeriesColors
         ? w.globals.colors[i]

@@ -1,6 +1,7 @@
 import Formatters from '../Formatters'
 import DateTime from '../../utils/DateTime'
 import Utils from './Utils'
+import Utilities from '../../utils/Utils'
 
 /**
  * ApexCharts Tooltip.Labels Class to draw texts on the tooltip.
@@ -165,14 +166,14 @@ export default class Labels {
       if (w.globals.yLabelFormatters[0]) {
         yLbFormatter = w.globals.yLabelFormatters[0]
       } else {
-        yLbFormatter = function(label) {
+        yLbFormatter = function (label) {
           return label
         }
       }
     }
 
     if (typeof yLbTitleFormatter !== 'function') {
-      yLbTitleFormatter = function(label) {
+      yLbTitleFormatter = function (label) {
         return label
       }
     }
@@ -197,6 +198,11 @@ export default class Labels {
     const w = this.w
     const ttCtx = this.ttCtx
 
+    Object.keys(values).forEach(key => {
+      if (typeof values[key] == 'string')
+        values[key] = Utilities.sanitizeDom(values[key])
+    })
+
     const { val, xVal, xAxisTTVal, zVal } = values
 
     let ttItemsChildren = null
@@ -225,7 +231,7 @@ export default class Labels {
 
     const ttYLabel = ttItems[t].querySelector('.apexcharts-tooltip-text-label')
     if (ttYLabel) {
-      ttYLabel.innerHTML = seriesName ? seriesName : ''
+      ttYLabel.innerHTML = seriesName ? Utilities.sanitizeDom(seriesName) : ''
     }
     const ttYVal = ttItems[t].querySelector('.apexcharts-tooltip-text-value')
     if (ttYVal) {

@@ -4,7 +4,7 @@
 
 class Utils {
   static bind(fn, me) {
-    return function() {
+    return function () {
       return fn.apply(me, arguments)
     }
   }
@@ -28,8 +28,8 @@ class Utils {
   // credit: http://stackoverflow.com/questions/27936772/deep-object-merging-in-es6-es7#answer-34749873
   static extend(target, source) {
     if (typeof Object.assign !== 'function') {
-      ;(function() {
-        Object.assign = function(target) {
+      ; (function () {
+        Object.assign = function (target) {
           'use strict'
           // We must check against these specific cases.
           if (target === undefined || target === null) {
@@ -218,9 +218,9 @@ class Utils {
     )
     return rgb && rgb.length === 4
       ? '#' +
-          ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
-          ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
-          ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2)
+      ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
+      ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
+      ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2)
       : ''
   }
 
@@ -380,6 +380,19 @@ class Utils {
     // other browser
     return false
   }
+
+  /**
+   * Sanitize dangerous characters in the string to prevent Cross-Site Scripting
+   * @param {string}
+   * string - String to sanitize
+   */
+  static sanitizeDom(string) {
+    return string
+      .replace(/\&/g, '&')
+      .replace(/\</g, '&lt;')
+      .replace(/\>/g, '&gt;')
+      .replace(/\"/g, '&quot;')
+  }
 }
 
 export default Utils