SVG export: Incorrect escaping for HTML within legend label

[1tgr]

Expected behaviour

When useHTML: true, a legend label whose HTML has a < symbol inside an attribute value produces valid SVG when exported.

Actual behaviour

The < symbol is not escaped on the exported SVG. Instead, it appears as a literal character within an SVG attribute value.

Live demo with steps to reproduce

https://jsfiddle.net/y7vtpzb4/2

1. Add the exporting module:
   <script src="https://code.highcharts.com/modules/exporting.js"></script>
2. Write JS code:

   Highcharts.chart('container', {
       legend: {
           useHTML: true,
           labelFormatter: () => `<span title="&lt;">hover on me</span>`,
       },
   
       series: [{
           data: [[1, 1]]
       }]
   });
   

3. Click the button at the corner of the chart and export to an SVG file
4. Open the SVG file in an editor and observe invalid XML:

   error on line 1 at column 4222: Unescaped '<' not allowed in attributes values

Product version

Highcharts 10.1.0, 10.2.1

Affected browser(s)

Google Chrome on Windows version 105.0.5195.127
Safari on Mac OS version 15.6.1 (17613.3.9.1.16)

[1tgr]

The legend is part of the HTML portion of the chart. When the user exports to SVG, the sanitizeSVG function places the legend HTML inside a <foreignObject> element at the end of the SVG.

The body of the <foreignObject> comes from the browser's innerHTML text, which obeys HTML escaping rules, where almost all characters are allowed unescaped within an attribute value. SVG (ie XML) requires that < symbols are always escaped within attribute values.

[karolkolodziej]

Thank you @1tgr for reporting that issue.

From what I can see, the < is the only character that is failing to export properly to SVG.

[1tgr]

I agree, since < is the only character that's allowed in an HTML attribute value but not allowed in an XML/SVG attribute value.

The relevant part of the XML spec: https://www.w3.org/TR/xml/#NT-AttValue

There they have a regex for valid double-quoted attributes: "[^<&"]*"

And single-quoted attributes: '[^<&']*'

But ", ' and & would already be escaped in innerHTML.

[rdp1414]

SVG exporting not working when title contains "<"

When title contains less-than sign "<", then SVG exporting does not work - See fiddle (click on hamburger-icon -> Download SVG vector image -> open it).

Our team extracts a chart's SVG and using that svg does multiple exporting operations like copy chart, download png, print chart, mail chart, put it in our reporting system, etc. None of these are working when chart's title contains "<".

Reported at Topic#49880.