CVE-2026-118242

Highcharts JS is a JavaScript charting library based on SVG. From 2.3.0 until 3.2.0, Highcharts Grid creates SVG path elements from rendering.icons object definitions and previously copied every child key with setAttribute. An attacker who controls Grid configuration can supply event-handler attribute names in an icon definition. Because custom icons override built-ins, the attacker can replace default sort or pagination icons, and script runs in the hosting page origin when a user hovers over or activates the affected icon. This issue is fixed in 3.2.0.

Highcharts JS is a JavaScript charting library based on SVG. From 2.3.0 until 3.2.0, Highcharts Grid creates SVG path elements from rendering.icons object definitions and previously copied every child key with setAttribute. An attacker who controls Grid configuration can supply event-handler attribute names in an icon definition. Because custom icons override built-ins, the attacker can replace default sort or pagination icons, and script runs in the hosting page origin when a user hovers over or activates the affected icon. This issue is fixed in 3.2.0.

Impact

A custom icon supplied under rendering.icons as an icon definition object is built by creating an SVG path for each of its child entries and setting every key of that entry as an attribute of the path, without filtering the attribute names; only the string form of the option is passed through the markup allow-list. An attacker who controls the Grid configuration can therefore supply child entries whose keys name event handlers, and those handlers execute in the origin of the page hosting the Grid. Custom icons take precedence over the built-in ones, so the attacker can replace icons that render without any further configuration, such as the sort icon shown in every column header by default and the pagination controls where pagination is enabled, and does not need any reference to a custom icon name. Exploitation requires that untrusted data reach the Grid configuration and that a user hover over or activate an affected icon.

Workarounds

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

(function () {
    const GridNS = typeof Grid !== 'undefined' ? Grid : undefined;
    const GridClass = GridNS && GridNS.Grid;

    if (!GridClass || !GridClass.prototype.loadUserOptions) {
        return; // Grid not loaded
    }

    const allowedPathAttributes = [
        'd',
        'fill',
        'opacity',
        'stroke',
        'stroke-width',
        'stroke-linecap',
        'stroke-linejoin',
        'transform'
    ];

    const originalLoadUserOptions = GridClass.prototype.loadUserOptions;

    function sanitizeIconValue(value) {
        if (!value || typeof value === 'string') {
            return value;
        }

        const children = value.children || [];
        const sanitizedChildren = [];

        for (let i = 0; i < children.length; i++) {
            const child = children[i] || {};
            const clean = {};

            for (let j = 0; j < allowedPathAttributes.length; j++) {
                const attr = allowedPathAttributes[j];
                if (child[attr] !== undefined && child[attr] !== null) {
                    clean[attr] = child[attr];
                }
            }

            sanitizedChildren.push(clean);
        }

        return {
            width: value.width,
            height: value.height,
            viewBox: value.viewBox,
            fill: value.fill,
            children: sanitizedChildren
        };
    }

    function sanitizeIconsMap(icons) {
        if (!icons) {
            return icons;
        }

        const out = {};
        for (const key in icons) {
            if (Object.prototype.hasOwnProperty.call(icons, key)) {
                out[key] = sanitizeIconValue(icons[key]);
            }
        }
        return out;
    }

    GridClass.prototype.loadUserOptions = function (newOptions) {
        if (
            newOptions &&
            newOptions.rendering &&
            newOptions.rendering.icons
        ) {
            newOptions.rendering.icons = sanitizeIconsMap(
                newOptions.rendering.icons
            );
        }

        return originalLoadUserOptions.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/[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.

Highcharts JS is a JavaScript charting library based on SVG. From 2.3.0 until 3.2.0, Highcharts Grid creates SVG path elements from rendering.icons object definitions and previously copied every child key with setAttribute. An attacker who controls Grid configuration can supply event-handler attribute names in an icon definition. Because custom icons override built-ins, the attacker can replace default sort or pagination icons, and script runs in the hosting page origin when a user hovers over or activates the affected icon. This issue is fixed in 3.2.0.

Highcharts JS is a JavaScript charting library based on SVG. From 2.3.0 until 3.2.0, Highcharts Grid creates SVG path elements from rendering.icons object definitions and previously copied every child key with setAttribute. An attacker who controls Grid configuration can supply event-handler attribute names in an icon definition. Because custom icons override built-ins, the attacker can replace default sort or pagination icons, and script runs in the hosting page origin when a user hovers over or activates the affected icon. This issue is fixed in 3.2.0.

Impact

A custom icon supplied under rendering.icons as an icon definition object is built by creating an SVG path for each of its child entries and setting every key of that entry as an attribute of the path, without filtering the attribute names; only the string form of the option is passed through the markup allow-list. An attacker who controls the Grid configuration can therefore supply child entries whose keys name event handlers, and those handlers execute in the origin of the page hosting the Grid. Custom icons take precedence over the built-in ones, so the attacker can replace icons that render without any further configuration, such as the sort icon shown in every column header by default and the pagination controls where pagination is enabled, and does not need any reference to a custom icon name. Exploitation requires that untrusted data reach the Grid configuration and that a user hover over or activate an affected icon.

Workarounds

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

(function () {
    const GridNS = typeof Grid !== 'undefined' ? Grid : undefined;
    const GridClass = GridNS && GridNS.Grid;

    if (!GridClass || !GridClass.prototype.loadUserOptions) {
        return; // Grid not loaded
    }

    const allowedPathAttributes = [
        'd',
        'fill',
        'opacity',
        'stroke',
        'stroke-width',
        'stroke-linecap',
        'stroke-linejoin',
        'transform'
    ];

    const originalLoadUserOptions = GridClass.prototype.loadUserOptions;

    function sanitizeIconValue(value) {
        if (!value || typeof value === 'string') {
            return value;
        }

        const children = value.children || [];
        const sanitizedChildren = [];

        for (let i = 0; i < children.length; i++) {
            const child = children[i] || {};
            const clean = {};

            for (let j = 0; j < allowedPathAttributes.length; j++) {
                const attr = allowedPathAttributes[j];
                if (child[attr] !== undefined && child[attr] !== null) {
                    clean[attr] = child[attr];
                }
            }

            sanitizedChildren.push(clean);
        }

        return {
            width: value.width,
            height: value.height,
            viewBox: value.viewBox,
            fill: value.fill,
            children: sanitizedChildren
        };
    }

    function sanitizeIconsMap(icons) {
        if (!icons) {
            return icons;
        }

        const out = {};
        for (const key in icons) {
            if (Object.prototype.hasOwnProperty.call(icons, key)) {
                out[key] = sanitizeIconValue(icons[key]);
            }
        }
        return out;
    }

    GridClass.prototype.loadUserOptions = function (newOptions) {
        if (
            newOptions &&
            newOptions.rendering &&
            newOptions.rendering.icons
        ) {
            newOptions.rendering.icons = sanitizeIconsMap(
                newOptions.rendering.icons
            );
        }

        return originalLoadUserOptions.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/[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.