Highcharts Grid Pro: cell-renderer `attributes` map written with raw `setAttribute`

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:

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.