GHSA-5ghw-9mgr-jvx2
Highcharts Grid Pro: cell-renderer `attributes` map written with raw `setAttribute`
Packages
| Ecosystem | Package | Affected | Fixed in |
|---|---|---|---|
| npm | @highcharts/grid-pro | >= 2.0.0, < 3.2.0 | 3.2.0 |
| npm | @highcharts/dashboards | >= 3.6.0, < 4.0.0 | 4.0.0 |
Details
As written in the advisory (Markdown source, shown as plain text).
### 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 ALLOWED_RENDERER_ATTRIBUTES = [
'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 (!ALLOWED_RENDERER_ATTRIBUTES.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/[email protected]`. If you load Highcharts Grid from a CDN, use a versioned URL, for example `https://cdn.jsdelivr.net/npm/@highcharts/[email protected]/grid-lite.js`. For more on each installation method, see the [installation guide](https://www.highcharts.com/docs/grid/installation).
References
External links from the advisory. They lead to third-party sites.