Impact The pagination language strings are written into the DOM as markup rather than as text. An attacker who controls those language options can supply elements carrying event handlers, and those handlers execute in the origin of the page hosting the Grid when the pagination controls render. Exploitation requires that untrusted data reach the Grid language configuration and that pagination be enabled on the Grid.

Workarounds Run this once after loading the Grid, before creating any grid: javascript { const Pagination = Grid.Pagination;

const escapeLang = (pagination) => { const lang = pagination.lang; if (!lang) { return; }

for (const key of ['pageInfo', 'pageSizeLabel']) { if (typeof lang[key] === 'string') { lang[key] = lang[key].replace(/</g, '&lt;'); } } };

for (const name of ['updatePageInfo', 'renderPageSizeSelector']) { const original = Pagination.prototype[name];

Pagination.prototype[name] = function (...args) { escapeLang(this); return original.apply(this, args); }; } }

Obtaining the patched version The patched releases are available from all the usual distribution channels. With npm, upgrade the affected package to the patched version listed above, for example npm install @highcharts/grid-lite@3.2.0. If you load Highcharts Grid from a CDN, use a versioned URL, for example https://cdn.jsdelivr.net/npm/@highcharts/grid-lite@3.2.0/grid-lite.js. For more on each installation method, see the installation guide.

Impact The edit mode fullscreen labels are parsed as HTML when the corresponding control is rendered. An attacker who controls the Dashboards language options can supply markup carrying event handlers, which then execute in the origin of the page hosting the dashboard. Exploitation requires that untrusted data reach the Dashboards language configuration and that the affected control be rendered. Script running this way has the same access to page data, storage and session state as the hosting application.

Workarounds

Until you can upgrade, replace Fullscreen.prototype.setButtonText atapplication startup. The replacement is the original method with textContent in place of innerHTML.

If you install Dashboards from npm

Import the module once, before any board is created.

js import Fullscreen from '@highcharts/dashboards/es-modules/Dashboards/EditMode/Fullscreen.js';

Fullscreen.prototype.setButtonText = function () { const editMode = this.board.editMode, button = editMode?.tools.contextMenu?.items.viewFullscreen;

if (button?.innerElement) { const lang = editMode.lang;

button.innerElement.textContent = (this.isOpen ? lang.exitFullscreen : lang.viewFullscreen) || ''; } };

If you load Dashboards from a <script> tag

The same replacement, taking Fullscreen from the global namespace. It must run after modules/layout and before any board is created.

html <script src="https://code.highcharts.com/dashboards/dashboards.js"></script> <script src="https://code.highcharts.com/dashboards/modules/layout.js"></script> <script> { const Fullscreen = window.Dashboards?.Fullscreen;

Fullscreen.prototype.setButtonText = function () { const editMode = this.board.editMode, button = editMode?.tools.contextMenu?.items.viewFullscreen;

if (button?.innerElement) { const lang = editMode.lang;

button.innerElement.textContent = (this.isOpen ? lang.exitFullscreen : lang.viewFullscreen) || ''; } }; } </script>

If your application does not need Edit Mode, leaving it disabled (editMode.enabled: false) removes the exposure as well. The same applies to the context menu — the label is only reachable when viewFullscreen is among editMode.contextMenu.items.

Obtaining the patched version The patched releases are available from all the usual distribution channels. With npm, upgrade the affected package to the patched version listed above, for example npm install @highcharts/dashboards@4.2.3. If you load Highcharts Dashboards from a CDN, use a versioned URL, for example https://code.highcharts.com/dashboards/4.2.3/dashboards.js. For more on each installation method, see the installation guide.

Impact The component language strings shown in the edit mode sidebar are parsed as HTML rather than inserted as text. An attacker who controls those language options can supply markup carrying event handlers, which execute in the origin of the page hosting the dashboard once the sidebar renders the affected labels. Exploitation requires that untrusted data reach the Dashboards language configuration and that a user open the edit mode sidebar.

Workarounds

Until you can upgrade, patch EditMode once at application startup. The hook runs before the sidebar is built, so the labels are already harmless by the time they are rendered. Assigning a string to textContent and reading back innerHTML turns any markup into literal text, which is exactly what the fixed version renders.

After importing the module, use this code snipped once, before any board is created.

js { const EditMode = window.Dashboards?.EditMode; const escapeHTML = (text) => text .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;'); const patched = new WeakSet(); const originalInit = EditMode.prototype.init;

EditMode.prototype.init = function (...args) { const labels = this.lang?.sidebar;

if (labels && !patched.has(this)) { patched.add(this);

for (const key of Object.keys(labels)) { if (typeof labels[key] === 'string') { labels[key] = escapeHTML(labels[key]); } } }

return originalInit.apply(this, args); }; }

If your application does not need Edit Mode, leaving it disabled (editMode.enabled: false) removes the exposure as well.

Obtaining the patched version The patched releases are available from all the usual distribution channels. With npm, upgrade the affected package to the patched version listed above, for example npm install @highcharts/dashboards@4.2.3. If you load Highcharts Dashboards from a CDN, use a versioned URL, for example https://code.highcharts.com/dashboards/4.2.3/dashboards.js. For more on each installation method, see the installation guide.

Impact The breadcrumbs style option is applied to the breadcrumb button as SVG attributes rather than as CSS, and the attribute names are not filtered. An attacker who controls the chart configuration can supply keys under breadcrumbs.style that name event handlers, and those keys become live handlers on the breadcrumb button, so the attacker's script runs in the origin of the page hosting the chart. The option is reached through drilldown.breadcrumbs, navigation.breadcrumbs and the breadcrumbs option of the treemap, sunburst and treegraph series. Exploitation requires that untrusted data reach the chart configuration and that a user drill down, or traverse into a level of a hierarchical series, so that the breadcrumbs render, and then hover over or activate the breadcrumb button. Charts rendered in styled mode do not apply the option and are not affected. Charts built with Highcharts Stock, Maps and Gantt are included, since those ship from the same package as Core.

Workarounds Verified against published bundles on 10.0.0, 11.4.8, 12.3.0 and 13.0.2.

Load immediately after Highcharts, before any chart is created:

js // Workaround fix for all affected Highcharts versions: 10.0.0-13.0.2 ((H)=>{const S=H.SVGElement.prototype,D=S.defaultSetter;S.defaultSetter=function defaultSetter(v,k,e){/^on/i.test(k)||D.call(this,v,k,e)};})(Highcharts); // End of the workaround fix

Obtaining the patched version The patched releases are available from all the usual distribution channels. With npm, upgrade the affected package to the patched version listed above, for example npm install highcharts@13.1.0. If you load Highcharts from the CDN, use the versioned URLs on code.highcharts.com, for example https://code.highcharts.com/13.1.0/highcharts.js. For more on each installation method, see the installation guide.

Impact The Highcharts component uses the value of chartConstructor to select a function from the Highcharts namespace and invokes it with the component's container element and its chartOptions, without checking the value against the supported chart constructors. An attacker who controls the dashboard configuration can therefore name any other public member of that namespace; utility functions in that namespace copy the supplied options onto the container element as properties or attributes, so markup and event handlers carried in chartOptions land in the page and run in the origin of the page hosting the dashboard. Exploitation requires that untrusted data reach the Dashboards component configuration. No user interaction is required beyond rendering the board.

Workarounds If your board configuration comes from a source you do not fully control, paste this snippet right after importing libraries: ts (function () { const HighchartsComponent = Dashboards && Dashboards.HighchartsComponent;

if (!HighchartsComponent || !HighchartsComponent.prototype.createChart) { return; // HighchartsComponent not loaded }

const allowedConstructors = [ 'chart', 'stockChart', 'mapChart', 'ganttChart' ]; const originalCreateChart = HighchartsComponent.prototype.createChart;

HighchartsComponent.prototype.createChart = function () { if (allowedConstructors.indexOf(this.chartConstructor) === -1) { this.chartConstructor = 'chart'; }

return originalCreateChart.apply(this, arguments); }; }());

Obtaining the patched version The patched releases are available from all the usual distribution channels. With npm, upgrade the affected package to the patched version listed above, for example npm install @highcharts/dashboards@4.2.2. If you load Highcharts Dashboards from a CDN, use a versioned URL, for example https://code.highcharts.com/dashboards/4.2.2/dashboards.js. For more on each installation method, see the installation guide.

Impact When the HTML text parser cannot obtain a document from DOMParser because the call throws, it falls back to assigning the raw markup to the innerHTML of an element created in the hosting document, and the allow-list is applied only to the resulting DOM afterwards. In Chromium the Trusted Types policy callback that the parser uses throws while a beforeprint handler is running, so if the hosting page re-renders the chart from a beforeprint handler, every HTML-rendered text option parsed at that moment, such as useHTML titles, axis labels and data labels or text set by responsive rules, is inserted unsanitized, and event handlers embedded in that markup run in the origin of the page hosting the chart. Exploitation requires that untrusted data reach the chart configuration, that the hosting page update the chart from a beforeprint handler in Chromium, and that printing be started, which the print item of the exporting menu does on its own. Charts built with Highcharts Stock, Maps and Gantt are included, since those ship from the same package as Core.

Workarounds Drop-in fix - for any versions affected (12.0.0-13.0.2). Add the below IIFE to run after Highcharts is loaded. ((n)=>{n.AST.prototype.parseMarkup=function parseMarkup(t){let e,i=[];t=t.trim().replace(/ style=(["'])/g," data-style=$1");try{e=new DOMParser().parseFromString(tI?tI.createHTML(t):t,"text/html")}catch{}if(!e)try{e=new DOMParser().parseFromString(t,"text/html")}catch{}e||((e=n.doc.implementation.createHTMLDocument("")).body.innerHTML=t);let s=(t,e)=>{let i=t.localName||t.nodeName.toLowerCase(),o={tagName:i};"#text"===i&&(o.textContent=t.textContent||"");let r=t.attributes;if(r){let t={};[].forEach.call(r,e=>{"data-style"===e.name?o.style=tB.parseStyle(e.value):t[e.name]=e.value}),o.attributes=t}if(t.childNodes.length){let e=[];[].forEach.call(t.childNodes,t=>{s(t,e)}),e.length&&(o.children=e)}e.push(o)};return[].forEach.call(e.body.childNodes,t=>s(t,i)),i};})(Highcharts); Live demo & testing

Obtaining the patched version The patched releases are available from all the usual distribution channels. With npm, upgrade the affected package to the patched version listed above, for example npm install highcharts@13.1.0. If you load Highcharts from the CDN, use the versioned URLs on code.highcharts.com, for example https://code.highcharts.com/13.1.0/highcharts.js. For more on each installation method, see the installation guide.

Impact The data cursor keeps its listener and state bookkeeping in plain objects keyed by data table id, so a table id of proto supplied in the dataPool connector configuration resolves to Object.prototype when a sync registers its listeners, and the registration creates a property on Object.prototype named after the sync state and holding the internal listener array. The property name begins with a state prefix fixed by the library, to which the sync group option can append an attacker-chosen suffix, and its value is the library's own listener array, but the property is enumerable and visible on every object in the page, and emitting a lasting state for that table id then throws, so syncs that keep lasting states, such as extremes, stop working. Exploitation requires that untrusted data reach the Dashboards configuration and that a sync such as highlight or extremes be enabled on a component using that table, which the same configuration can do. No user interaction is required beyond loading the board.

The injected property is inert until other code on the page reads or enumerates it, so consequences depend on the consuming application.

Workarounds Drop-in fix - for any Highcharts Dashboards versions affected (1.0.0-4.2.1). Add the below IIFE to run after Highcharts Dashboards is loaded.

!function(t){if(t&&t.DataCursor&&t.DataTable){var e=t.DataCursor.prototype,r=t.DataTable.prototype;e.tableIdPollutionPatched||(e.tableIdPollutionPatched=!0,null!==Object.getPrototypeOf((new t.DataCursor).listenerMap)&&['addListener','emitCursor','remitCursor','removeListener'].forEach(function(t){var r=e[t];r&&(e[t]=function(){var t;return t=this,['listenerMap','stateMap'].forEach(function(e){var r,a=t[e];a&&null!==Object.getPrototypeOf(a)&&(r=Object.create(null),Object.keys(a).forEach(function(t){r[t]=a[t]}),t[e]=r)}),r.apply(this,arguments)})}),'proto'!==new t.DataTable({id:'proto'}).id||Object.getOwnPropertyDescriptor(r,'id')||Object.defineProperty(r,'id',{configurable:!0,enumerable:!0,get:function(){return this.safeTableId},set:function(e){'proto'!==e&&'constructor'!==e||(e=t.uniqueKey(),this.autoId=!0),this.safeTableId=e}}))}}(Dashboards);

Live demo & testing

Obtaining the patched version The patched releases are available from all the usual distribution channels. With npm, upgrade the affected package to the patched version listed above, for example npm install @highcharts/dashboards@4.2.2. If you load Highcharts Dashboards from a CDN, use a versioned URL, for example https://code.highcharts.com/dashboards/4.2.2/dashboards.js. For more on each installation method, see the installation guide.

Impact The input-type cell renderers copy every entry of the renderer's attributes option onto the input or select element they create, without checking the attribute names. An attacker who controls the Grid configuration can supply entries under a column's cells.renderer.attributes or cells.editMode.renderer.attributes whose names are event handlers, and those handlers execute in the origin of the page hosting the Grid. A view renderer places the handler on the input rendered in every row of the column as soon as the Grid renders; an edit-mode renderer places it on the input created when a cell enters edit mode, and that input is focused immediately, so a focus handler runs as soon as the user starts editing. Exploitation requires that untrusted data reach the Grid configuration and that a user hover over or focus one of the rendered inputs, or begin editing a cell. The Pro DataGrid that shipped inside the Dashboards package is included.

Workarounds

If your column configuration comes from a source you do not fully control, paste this snippet right after importing the Grid module:

ts const ALLOWEDRENDERERATTRIBUTES = [ 'autofocus', 'checked', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'pattern', 'placeholder', 'size', 'step' ];

const scrubColumn = (column) => { const cells = column?.cells;

for (const renderer of [cells?.renderer, cells?.editMode?.renderer]) { const attributes = renderer?.attributes;

if (attributes) { for (const key of Object.keys(attributes)) { if (!ALLOWEDRENDERERATTRIBUTES.includes(key.toLowerCase())) { delete attributes[key]; } } } }

return column; };

const scrubOptions = (options) => { scrubColumn(options?.columnDefaults); (options?.columns || []).forEach(scrubColumn); return options; };

const proto = Grid.Grid.prototype;

const loadUserOptions = proto.loadUserOptions; proto.loadUserOptions = function (options, ...rest) { scrubOptions(Grid.defaultOptions); return loadUserOptions.call(this, scrubOptions(options), ...rest); };

const updateColumn = proto.updateColumn; proto.updateColumn = function (columnId, options, ...rest) { return updateColumn.call(this, columnId, scrubColumn(options), ...rest); };

Obtaining the patched version The patched releases are available from all the usual distribution channels. With npm, upgrade the affected package to the patched version listed above, for example npm install @highcharts/grid-lite@3.2.0. If you load Highcharts Grid from a CDN, use a versioned URL, for example https://cdn.jsdelivr.net/npm/@highcharts/grid-lite@3.2.0/grid-lite.js. For more on each installation method, see the installation guide.

Highcharts JS is a JavaScript charting library based on SVG. In Highcharts versions 8 and earlier, the chart options structure was not systematically filtered for XSS vectors. The potential impact was that content from untrusted sources could execute code in the end user's browser. The vulnerability is patched in version 9. As a workaround, implementers who are not able to upgrade may apply DOMPurify recursively to the options structure to filter out malicious markup.

In js/parts/SvgRenderer.js in Highcharts JS before 6.1.0, the use of backtracking regular expressions permitted an attacker to conduct a denial of service attack against the SVGRenderer component, aka ReDoS.