Highcharts Grid: pagination language options are parsed as HTML

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:

{
    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.