Skip to content
Permalink
Browse files Browse the repository at this point in the history
Merge pull request #2158 from 418sec/1-npm-apexcharts
Security Fix for Cross-Site Scripting (XSS) - huntr.dev
  • Loading branch information
junedchhipa committed Jan 14, 2021
2 parents abeda93 + e4c30a4 commit 68f3f34
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 10 deletions.
2 changes: 1 addition & 1 deletion src/modules/legend/Legend.js
Expand Up @@ -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]
Expand Down
12 changes: 9 additions & 3 deletions src/modules/tooltip/Labels.js
@@ -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.
Expand Down Expand Up @@ -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
}
}
Expand All @@ -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
Expand Down Expand Up @@ -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) {
Expand Down
25 changes: 19 additions & 6 deletions src/utils/Utils.js
Expand Up @@ -4,7 +4,7 @@

class Utils {
static bind(fn, me) {
return function() {
return function () {
return fn.apply(me, arguments)
}
}
Expand All @@ -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) {
Expand Down Expand Up @@ -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)
: ''
}

Expand Down Expand Up @@ -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

0 comments on commit 68f3f34

Please sign in to comment.