Invalid sanitizing of secure urls in HTML formatters in v10.x

[pascalporedda]

Expected behaviour

What I'm trying to achieve (and what works in v9.x) is to display SVG icons as labels on the yAxis. We load our icons from an external CDN (URL looks like this: https://static-assets.dev.xxxx.com/icons/module-xyz.svg), and set this SVG as a mask for a span element, by using mask: url().

Actual behaviour

This works fine in v9x, but breaks in v10. I assume that this has to do with the introduction of the new security feature in v10 (allowBypassFiltering), because the URL does get sanitized from 'https://static-assets.dev.xxxx.com/icons/module-xyz.svg' to just 'https'.

What I've tried so far is to try bypass filtering, adding all kinds of allowedReferences to the AST and trying bunch of other stuff, but it all comes down to the fact that this just doesn't work in v10.

Live demo with steps to reproduce

https://jsfiddle.net/dmj9syar/

As you can see there, the Icon does not get loaded and the URL does get replaced.

[raf18seb]

Hi @pascalporedda, thank you for reporting the issue.

Simplified demo: https://jsfiddle.net/BlackLabel/8rmxyLot/

It's a regression after 0094a83
Especially this line which replaces style to data-style:

highcharts/ts/Core/Renderer/HTML/AST.ts

Line 564 in fcad6ce

.replace(/ style="/g, ' data-style="');

Related to #6884

FYI @TorsteinHonsi

[TorsteinHonsi]

Thanks, will check it out. Until then:

Workaround

Avoid inline styles: https://jsfiddle.net/highcharts/781sfv3k/

[TorsteinHonsi]

PS: HTML filtering and allowedReferences and allowBypassFiltering is not related to this as far as I can see, so I wouldn't change those settings.

[TorsteinHonsi]

Drop-in fix

Highcharts.AST.parseStyle = function(style) {
    return style
        .split(';')
        .reduce((styles, line) => {
            const pair = line.split(':').map((s) => s.trim()),
                key = pair.shift();

            if (key && pair.length) {
                styles[key.replace(
                    /-([a-z])/g,
                    (g) => g[1].toUpperCase()
                )] = pair.join(':'); // #17146
            }
            return styles;
        }, {});
};

View it live on jsFiddle