Highcharts Grid: custom icon definition objects written with raw `setAttribute` on `<path>`

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);
    };
}());